:root{--bg:#f5f4fb;--panel:#fff;--text:#171526;--muted:#716d85;--line:#e7e4f0;--p:#5b45c9;--p2:#33256e;--danger:#c43850;--ok:#16845b;--shadow:0 14px 40px rgba(45,31,102,.09)}
*{box-sizing:border-box}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:linear-gradient(180deg,#eeeafd 0,#f8f7fc 45%,#f3f2f7 100%);color:var(--text);min-height:100vh}.oculto{display:none!important}.pantalla-login{min-height:100vh;display:grid;place-items:center;padding:24px}.login-card{width:min(460px,100%);background:rgba(255,255,255,.92);border:1px solid #e6e1fb;border-radius:24px;padding:28px;box-shadow:var(--shadow)}.marca{font-size:38px}.login-card h1{margin:8px 0 4px}.muted,.hint{color:var(--muted)}.stack{display:grid;gap:14px;margin-top:20px}.stack h2{font-size:18px;margin:8px 0 0}label{display:grid;gap:7px;font-size:13px;font-weight:700;color:#433d5b}input,select{width:100%;border:1px solid #dcd7eb;border-radius:12px;padding:11px 12px;background:#fff;color:var(--text);font:inherit;outline:none}input:focus,select:focus{border-color:var(--p);box-shadow:0 0 0 3px rgba(91,69,201,.12)}button{border:0;border-radius:12px;padding:10px 14px;font:inherit;font-weight:800;cursor:pointer}.primary{background:linear-gradient(135deg,var(--p),var(--p2));color:white}.secondary{background:#eeeafc;color:#3e327e}.danger{background:#feecef;color:#9f2439}.link-btn{background:transparent;color:var(--p);padding:12px 0}.error{color:var(--danger);min-height:20px}.aviso{background:#fff4d8;border:1px solid #f4d58d;padding:12px;border-radius:12px;margin:16px 0}.app{width:min(1380px,calc(100% - 28px));margin:0 auto;padding:18px 0 42px}.topbar{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:14px 18px;margin-bottom:16px;background:rgba(246,244,252,.9);backdrop-filter:blur(16px);border:1px solid rgba(220,215,235,.9);border-radius:18px}.topbar h1{margin:3px 0;font-size:22px}.eyebrow{font-size:11px;letter-spacing:.11em;font-weight:900;color:var(--p)}.usuario-box{display:flex;align-items:center;gap:12px}.usuario-box>div{display:grid;text-align:right}.usuario-box small{color:var(--muted);text-transform:capitalize}.saldos-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.saldo-card,.panel{background:rgba(255,255,255,.94);border:1px solid var(--line);box-shadow:var(--shadow)}.saldo-card{border-radius:18px;padding:16px;display:grid;gap:6px}.saldo-card span{font-size:13px;color:var(--muted);font-weight:700}.saldo-card strong{font-size:25px}.saldo-card small{color:var(--muted)}.saldo-card.destacado{background:linear-gradient(135deg,#33256e,#624bd0);color:#fff}.saldo-card.destacado span,.saldo-card.destacado small{color:#ddd7ff}.panel{border-radius:20px;padding:18px;margin-top:14px}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}.panel-head h2{margin:3px 0 0;font-size:20px}.panel-head h2 small{font-size:12px;color:var(--muted);font-weight:700}.form-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.span-2{grid-column:span 2}.actions{display:flex;justify-content:flex-end;align-items:end}.actions button{min-width:190px}.filtros{display:grid;grid-template-columns:2fr 1fr 1fr;gap:10px;margin-bottom:12px}.tabla-wrap{overflow:auto;border:1px solid var(--line);border-radius:14px}table{width:100%;border-collapse:collapse;min-width:860px}th,td{padding:11px 12px;text-align:left;border-bottom:1px solid var(--line);font-size:13px}th{background:#f7f5fc;color:#5d5773;position:sticky;top:0}tbody tr:last-child td{border-bottom:0}.amount{font-weight:900;white-space:nowrap}.amount.in{color:var(--ok)}.amount.out{color:var(--danger)}.pill{display:inline-flex;padding:4px 8px;border-radius:999px;background:#f0edfb;font-size:11px;font-weight:800}.row-actions{display:flex;gap:6px;white-space:nowrap}.row-actions button{padding:6px 9px;border-radius:9px;font-size:12px}.empty{text-align:center;color:var(--muted);padding:28px}.wrap{flex-wrap:wrap}.toast{position:fixed;right:18px;bottom:18px;z-index:20;background:#1d1930;color:#fff;padding:12px 16px;border-radius:12px;box-shadow:var(--shadow);max-width:min(420px,calc(100vw - 36px))}.toast.ok{background:#146b4c}.toast.err{background:#8f2d40}.user-form{margin-bottom:14px}@media(max-width:1000px){.saldos-grid{grid-template-columns:repeat(2,1fr)}.saldos-grid .destacado{grid-column:span 2}.form-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:640px){.app{width:min(100% - 16px,1380px);padding-top:8px}.topbar{align-items:flex-start;padding:12px;position:sticky}.topbar h1{font-size:18px}.usuario-box{align-items:flex-end;flex-direction:column;gap:7px}.usuario-box>div{text-align:right}.saldos-grid{grid-template-columns:1fr 1fr;gap:8px}.saldo-card{padding:12px}.saldo-card strong{font-size:20px}.form-grid,.filtros{grid-template-columns:1fr}.span-2{grid-column:auto}.actions{justify-content:stretch}.actions button{width:100%}.panel{padding:12px}.panel-head{align-items:flex-start}.login-card{padding:20px}.saldo-card.destacado{grid-column:span 2}}

/* Navegación principal: Dashboard / Administración */
.app-nav{
  display:flex;
  gap:8px;
  align-items:center;
  margin:0 0 14px;
  padding:6px;
  width:max-content;
  max-width:100%;
  background:rgba(255,255,255,.78);
  border:1px solid var(--line);
  border-radius:15px;
  box-shadow:0 8px 24px rgba(45,31,102,.06);
}
.app-nav-btn{
  background:transparent;
  color:#514a68;
  padding:9px 15px;
  border-radius:10px;
  white-space:nowrap;
}
.app-nav-btn.activo{
  background:linear-gradient(135deg,var(--p),var(--p2));
  color:#fff;
  box-shadow:0 6px 16px rgba(51,37,110,.18);
}
#panel-saldos .saldo-card.destacado{
  order:-1;
}
@media (max-width:680px){
  .app-nav{width:100%}
  .app-nav-btn{flex:1;padding:9px 8px}
  #panel-saldos{grid-template-columns:1fr}
}

/* Saldo real integrado en el rectángulo superior */
.saldo-header{
  margin-left:auto;
  min-width:155px;
  padding:8px 12px;
  border-radius:13px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.10);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:2px;
}
.saldo-header span{
  font-size:.72rem;
  opacity:.78;
  line-height:1.1;
}
.saldo-header strong{
  font-size:1.12rem;
  line-height:1.15;
  white-space:nowrap;
}
@media (max-width:680px){
  .saldo-header{
    min-width:0;
    padding:7px 9px;
    margin-left:0;
  }
  .saldo-header strong{
    font-size:1rem;
  }
}

/* Saldo real más grande y llamativo */
.saldo-header{
  min-width:185px;
  padding:10px 15px;
  border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.saldo-header span{
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.02em;
  opacity:.9;
}
.saldo-header strong{
  font-size:1.55rem;
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.02em;
  transition:color .2s ease, text-shadow .2s ease;
}
.saldo-header.saldo-positivo{
  background:rgba(20,140,72,.16);
  border-color:rgba(34,197,94,.45);
}
.saldo-header.saldo-positivo strong{
  color:#16a34a;
  text-shadow:0 0 18px rgba(34,197,94,.20);
}
.saldo-header.saldo-negativo{
  background:rgba(185,28,28,.16);
  border-color:rgba(239,68,68,.45);
}
.saldo-header.saldo-negativo strong{
  color:#dc2626;
  text-shadow:0 0 18px rgba(239,68,68,.18);
}
.saldo-header.saldo-cero strong{
  color:inherit;
}
@media (max-width:680px){
  .saldo-header{
    min-width:150px;
    padding:8px 10px;
  }
  .saldo-header strong{
    font-size:1.25rem;
  }
}

/* Estado visual directo del saldo real */
.saldo-header[data-signo="positivo"]{
  background:rgba(22,163,74,.10) !important;
  border-color:rgba(22,163,74,.32) !important;
}
.saldo-header[data-signo="positivo"] strong{
  color:#16a34a !important;
}
.saldo-header[data-signo="negativo"]{
  background:rgba(220,38,38,.10) !important;
  border-color:rgba(220,38,38,.32) !important;
}
.saldo-header[data-signo="negativo"] strong{
  color:#dc2626 !important;
}
.saldo-header[data-signo="cero"] strong{
  color:#242033 !important;
}

/* Color automático de los saldos personales */
.saldo-card[data-signo="positivo"] strong{
  color:#16a34a !important;
}
.saldo-card[data-signo="negativo"] strong{
  color:#dc2626 !important;
}
.saldo-card[data-signo="cero"] strong{
  color:#242033 !important;
}

/* ================================
   AJUSTE MÓVIL – Cuenta Familiar
   Saldo real centrado
   Usuario + cerrar sesión a la derecha
   Tarjetas compactas, 2 por fila
   ================================ */
@media (max-width: 680px){

  /* Encabezado superior */
  header{
    display:grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "brand user"
      "saldo saldo" !important;
    align-items:start !important;
    column-gap:12px !important;
    row-gap:10px !important;
  }

  /* Bloque izquierdo: nombre del sistema */
  header > *:first-child{
    grid-area: brand !important;
    align-self:start !important;
  }

  /* Bloque del usuario / rol / cerrar sesión */
  #usuario-nombre,
  #usuario-rol{
    text-align:right !important;
  }

  #usuario-nombre{
    display:block !important;
    font-size:1rem !important;
    line-height:1.05 !important;
  }

  #usuario-rol{
    display:block !important;
    font-size:.82rem !important;
    opacity:.85 !important;
    margin-top:2px !important;
  }

  #usuario-nombre,
  #usuario-rol,
  button[onclick*="logout"],
  #btn-logout,
  #btn-cerrar-sesion{
    justify-self:end !important;
  }

  button,
  #btn-logout,
  #btn-cerrar-sesion{
    max-width:100%;
  }

  header button,
  .topbar button,
  .header button{
    padding:8px 12px !important;
    min-height:auto !important;
  }

  /* Saldo real centrado y más protagonista */
  .saldo-header{
    grid-area: saldo !important;
    margin:0 auto !important;
    width:min(100%, 260px) !important;
    min-width:0 !important;
    text-align:center !important;
    align-items:center !important;
    justify-content:center !important;
    padding:10px 14px !important;
  }

  .saldo-header span{
    text-align:center !important;
  }

  .saldo-header strong{
    text-align:center !important;
    font-size:1.45rem !important;
  }

  /* Navegación Dashboard / Administración */
  .app-nav{
    width:100% !important;
  }

  .app-nav-btn{
    flex:1 1 0 !important;
    padding:10px 8px !important;
    font-size:1rem !important;
  }

  /* Tarjetas de saldos: dos por fila */
  #panel-saldos,
  .saldos-grid{
    display:grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap:12px !important;
  }

  #panel-saldos .saldo-card,
  .saldos-grid .saldo-card{
    min-height:0 !important;
    padding:14px 14px 12px !important;
    border-radius:18px !important;
  }

  #panel-saldos .saldo-card span,
  .saldos-grid .saldo-card span{
    font-size:.82rem !important;
    line-height:1.15 !important;
  }

  #panel-saldos .saldo-card strong,
  .saldos-grid .saldo-card strong{
    display:block !important;
    margin-top:6px !important;
    font-size:1rem !important;
    line-height:1.05 !important;
    letter-spacing:-.01em !important;
    word-break:break-word !important;
  }

  #panel-saldos .saldo-card small,
  .saldos-grid .saldo-card small{
    display:block !important;
    margin-top:8px !important;
    font-size:.72rem !important;
    line-height:1.18 !important;
  }

  .panel,
  .card,
  .box{
    overflow:hidden;
  }
}

@media (max-width: 420px){
  #panel-saldos .saldo-card,
  .saldos-grid .saldo-card{
    padding:12px 12px 10px !important;
  }

  #panel-saldos .saldo-card strong,
  .saldos-grid .saldo-card strong{
    font-size:.92rem !important;
  }

  .saldo-header{
    width:min(100%, 235px) !important;
  }

  .saldo-header strong{
    font-size:1.28rem !important;
  }
}

/* ==========================================================
   MÓVIL COMPACTO v2
   - título + usuario a la izquierda
   - saldo real centrado
   - cerrar sesión a la derecha
   - corrige desbordamiento de fecha/inputs
   ========================================================== */
@media (max-width:680px){

  /* Cabecera: una sola franja compacta */
  header{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(125px,165px) auto !important;
    grid-template-rows:auto !important;
    grid-template-areas:"brand saldo user" !important;
    align-items:center !important;
    gap:8px !important;
    padding:12px 12px !important;
    min-height:0 !important;
  }

  /* Título, más compacto */
  header > *:first-child{
    grid-area:brand !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    align-self:center !important;
  }

  header h1,
  header h2,
  header .brand-title{
    margin:0 !important;
    font-size:1.02rem !important;
    line-height:1.08 !important;
    letter-spacing:-.02em !important;
  }

  /* Saldo real en el centro del encabezado */
  .saldo-header{
    grid-area:saldo !important;
    margin:0 !important;
    width:100% !important;
    min-width:0 !important;
    padding:8px 8px !important;
    border-radius:14px !important;
    text-align:center !important;
    align-items:center !important;
    justify-content:center !important;
    box-shadow:0 5px 14px rgba(31,24,70,.08) !important;
  }

  .saldo-header span{
    font-size:.68rem !important;
    line-height:1 !important;
    margin:0 !important;
  }

  .saldo-header strong{
    margin-top:3px !important;
    font-size:1.08rem !important;
    line-height:1.02 !important;
    white-space:nowrap !important;
  }

  /* Zona usuario a la derecha; nombre/rol compactos */
  header .usuario-box,
  header .user-box,
  header .session-box,
  header .top-user,
  header > div:has(#usuario-nombre){
    grid-area:user !important;
    justify-self:end !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-end !important;
    gap:2px !important;
    margin:0 !important;
    padding:0 !important;
    min-width:0 !important;
  }

  #usuario-nombre{
    margin:0 !important;
    font-size:.82rem !important;
    line-height:1.05 !important;
    font-weight:800 !important;
    text-align:right !important;
    max-width:105px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  #usuario-rol{
    margin:0 !important;
    font-size:.68rem !important;
    line-height:1 !important;
    text-align:right !important;
  }

  #btn-logout,
  #btn-cerrar-sesion,
  header button{
    margin-top:4px !important;
    padding:6px 9px !important;
    min-height:0 !important;
    min-width:0 !important;
    width:auto !important;
    border-radius:11px !important;
    font-size:.74rem !important;
    line-height:1.05 !important;
    white-space:nowrap !important;
  }

  /* Navegación más baja */
  .app-nav{
    margin:8px 0 10px !important;
    padding:4px !important;
    border-radius:14px !important;
  }

  .app-nav-btn{
    padding:8px 6px !important;
    min-height:0 !important;
    font-size:.88rem !important;
    border-radius:10px !important;
  }

  /* Tarjetas 2x2, todavía más compactas */
  #panel-saldos,
  .saldos-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:9px !important;
  }

  #panel-saldos .saldo-card,
  .saldos-grid .saldo-card{
    padding:11px 11px 10px !important;
    min-height:105px !important;
    border-radius:16px !important;
  }

  #panel-saldos .saldo-card span,
  .saldos-grid .saldo-card span{
    font-size:.73rem !important;
    line-height:1.1 !important;
  }

  #panel-saldos .saldo-card strong,
  .saldos-grid .saldo-card strong{
    margin-top:5px !important;
    font-size:.92rem !important;
    line-height:1.05 !important;
  }

  #panel-saldos .saldo-card small,
  .saldos-grid .saldo-card small{
    margin-top:7px !important;
    font-size:.66rem !important;
    line-height:1.15 !important;
  }

  /* Panel de nuevo registro */
  #panel-movimiento{
    padding:16px 12px !important;
  }

  #panel-movimiento h2,
  #panel-movimiento h3{
    margin-top:2px !important;
    margin-bottom:14px !important;
  }

  /* Evita que cualquier control se salga del panel */
  #panel-movimiento *,
  form *,
  .form-grid *,
  .grid-form *{
    box-sizing:border-box !important;
    min-width:0 !important;
  }

  #panel-movimiento form,
  #panel-movimiento .form-grid,
  #panel-movimiento .grid-form{
    width:100% !important;
    max-width:100% !important;
    overflow:visible !important;
  }

  #panel-movimiento input,
  #panel-movimiento select,
  #panel-movimiento textarea,
  #panel-movimiento button,
  input[type="date"]{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  /* iPhone/Safari: el input date a veces fuerza ancho mínimo interno */
  #panel-movimiento input[type="date"]{
    display:block !important;
    -webkit-appearance:none !important;
    appearance:none !important;
    padding-left:12px !important;
    padding-right:12px !important;
    font-size:.92rem !important;
  }

  /* Las filas del formulario pasan a una sola columna en móvil */
  #panel-movimiento .form-grid,
  #panel-movimiento .grid-form,
  #panel-movimiento form{
    grid-template-columns:minmax(0,1fr) !important;
  }
}

@media (max-width:430px){
  header{
    grid-template-columns:minmax(0,1fr) minmax(112px,145px) auto !important;
    padding:10px !important;
    gap:6px !important;
  }

  .saldo-header{
    padding:7px 6px !important;
  }

  .saldo-header strong{
    font-size:1rem !important;
  }

  #usuario-nombre{
    max-width:86px !important;
    font-size:.76rem !important;
  }

  #btn-logout,
  #btn-cerrar-sesion,
  header button{
    padding:5px 7px !important;
    font-size:.68rem !important;
  }
}

/* =========================
   LOGO CUENTA FAMILIAR
   ========================= */
.logo-login-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  margin:0 auto 14px;
}
.logo-login-cuenta{
  width:82px;
  height:82px;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 8px 18px rgba(41,35,95,.16));
}
.logo-header-cuenta{
  width:42px;
  height:42px;
  object-fit:contain;
  flex:0 0 auto;
  margin-right:8px;
  filter:drop-shadow(0 5px 12px rgba(41,35,95,.12));
}

@media (max-width:680px){
  .logo-login-cuenta{
    width:72px;
    height:72px;
  }
  .logo-header-cuenta{
    width:34px;
    height:34px;
    margin-right:5px;
  }
}

/* Logo del login en el lugar de la antigua tarjeta */
.marca.marca-logo{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  width:100% !important;
  margin:0 auto 12px !important;
  padding:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  border:0 !important;
  font-size:0 !important;
}

.marca.marca-logo .logo-login-cuenta{
  display:block !important;
  width:88px !important;
  height:88px !important;
  object-fit:contain !important;
  margin:0 auto !important;
  filter:drop-shadow(0 8px 18px rgba(41,35,95,.16));
}

@media (max-width:680px){
  .marca.marca-logo{
    margin-bottom:10px !important;
  }
  .marca.marca-logo .logo-login-cuenta{
    width:78px !important;
    height:78px !important;
  }
}

/* ==================================================
   UI PRO — tarjeta principal + mejora visual general
   ================================================== */

body{
  background:
    radial-gradient(circle at top right, rgba(120,93,248,.10), transparent 34%),
    linear-gradient(180deg, #f6f2ff 0%, #f1edf9 100%) !important;
}

.saldo-header{
  position:relative !important;
  overflow:hidden !important;
  display:grid !important;
  grid-template-columns:58px 1fr !important;
  gap:14px !important;
  align-items:start !important;
  width:min(100%, 340px) !important;
  min-width:0 !important;
  margin:0 !important;
  padding:22px 22px !important;
  border-radius:26px !important;
  color:#fff !important;
  background:
    radial-gradient(circle at 88% 82%, rgba(255,255,255,.10) 0 18%, transparent 18% 100%),
    radial-gradient(circle at 76% 86%, rgba(255,255,255,.06) 0 24%, transparent 24% 100%),
    linear-gradient(135deg, #4b2fc7 0%, #5d3ee1 55%, #6f58f3 100%) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:0 18px 38px rgba(67,44,176,.28) !important;
}

.saldo-header::after{
  content:"";
  position:absolute;
  inset:auto -34px -36px auto;
  width:138px;
  height:138px;
  border-radius:50%;
  border:18px solid rgba(255,255,255,.08);
  pointer-events:none;
}

.saldo-header::before{
  content:"";
  position:absolute;
  inset:auto 28px -18px auto;
  width:92px;
  height:92px;
  border-radius:50%;
  border:14px solid rgba(255,255,255,.06);
  pointer-events:none;
}

.saldo-header-icon{
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  font-size:1.2rem;
  background:rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}

.saldo-header-body{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}

.saldo-header-label{
  font-size:.94rem !important;
  font-weight:700 !important;
  color:rgba(255,255,255,.92) !important;
  line-height:1.12 !important;
}

.saldo-header strong{
  font-size:2.05rem !important;
  line-height:1.02 !important;
  font-weight:900 !important;
  letter-spacing:-.03em !important;
  color:#ffffff !important;
  text-shadow:none !important;
  white-space:nowrap !important;
}

.saldo-header-note{
  font-size:.90rem !important;
  line-height:1.2 !important;
  color:rgba(255,255,255,.84) !important;
}

.saldo-header[data-signo="positivo"] strong{
  color:#ffffff !important;
}
.saldo-header[data-signo="negativo"] strong{
  color:#ffd2d2 !important;
}
.saldo-header[data-signo="cero"] strong{
  color:#ffffff !important;
}

.saldo-card{
  border-radius:24px !important;
  border:1px solid rgba(98,78,187,.10) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(251,249,255,.98)) !important;
  box-shadow:0 10px 24px rgba(42,28,103,.08) !important;
  transition:transform .18s ease, box-shadow .18s ease !important;
}
.saldo-card:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 28px rgba(42,28,103,.10) !important;
}

.saldo-card span{
  display:block;
  font-size:.95rem !important;
  font-weight:800 !important;
  color:#6d648b !important;
  line-height:1.15 !important;
  letter-spacing:-.01em !important;
}

.saldo-card strong{
  margin-top:10px !important;
  font-size:1.2rem !important;
  line-height:1.05 !important;
  font-weight:900 !important;
}

.saldo-card small{
  margin-top:10px !important;
  font-size:.86rem !important;
  color:#7e7893 !important;
}

button,
.app-nav-btn{
  transition:transform .16s ease, box-shadow .16s ease, opacity .16s ease !important;
}

button:hover,
.app-nav-btn:hover{
  transform:translateY(-1px);
}

.app-nav{
  background:rgba(255,255,255,.86) !important;
  border:1px solid rgba(92,72,173,.10) !important;
  box-shadow:0 8px 22px rgba(45,31,102,.06) !important;
}

.app-nav-btn.activo{
  background:linear-gradient(135deg, #5738db 0%, #4a2fc2 100%) !important;
  color:#fff !important;
  box-shadow:0 8px 20px rgba(74,47,194,.24) !important;
}

.panel{
  border-radius:28px !important;
  border:1px solid rgba(98,78,187,.10) !important;
  box-shadow:0 12px 28px rgba(42,28,103,.06) !important;
}

input, select, textarea{
  border-radius:18px !important;
  border:1px solid rgba(109,95,170,.18) !important;
  box-shadow:inset 0 1px 2px rgba(34,20,84,.03) !important;
}

input:focus, select:focus, textarea:focus{
  border-color:#6a4ef0 !important;
  box-shadow:0 0 0 3px rgba(106,78,240,.12) !important;
}

@media (max-width:680px){
  .saldo-header{
    width:100% !important;
    max-width:100% !important;
    grid-template-columns:46px 1fr !important;
    gap:10px !important;
    padding:18px 16px !important;
    border-radius:22px !important;
  }

  .saldo-header-icon{
    width:38px;
    height:38px;
    border-radius:12px;
    font-size:1.05rem;
  }

  .saldo-header-label{
    font-size:.88rem !important;
  }

  .saldo-header strong{
    font-size:1.75rem !important;
  }

  .saldo-header-note{
    font-size:.80rem !important;
  }

  .saldo-card{
    border-radius:18px !important;
  }

  .saldo-card span{
    font-size:.78rem !important;
  }

  .saldo-card strong{
    font-size:.98rem !important;
  }

  .saldo-card small{
    font-size:.72rem !important;
  }
}


/* ===== Rol Leo: vista exclusiva de saldo general ===== */
.panel-leo{max-width:720px;margin:18px auto 0}
.leo-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end}
.leo-actions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.leo-actions button{min-height:48px;font-size:15px}
@media(max-width:640px){
  .panel-leo{margin-top:10px}
  .leo-form{grid-template-columns:1fr}
  .leo-actions{grid-column:auto;grid-template-columns:1fr 1fr}
  .leo-actions button{padding:12px 8px}
}

/* ==========================================================
   v8 — RESTAURAR CUADRO SALDO REAL
   Solo corrige la tarjeta superior. No cambia el resto de UI.
   ========================================================== */

/* Neutraliza los estilos antiguos por signo que aclaraban el fondo. */
.saldo-header,
.saldo-header.saldo-positivo,
.saldo-header.saldo-negativo,
.saldo-header.saldo-cero,
.saldo-header[data-signo="positivo"],
.saldo-header[data-signo="negativo"],
.saldo-header[data-signo="cero"]{
  color:#fff !important;
  background:linear-gradient(135deg,#33256e 0%,#4d36b4 52%,#624bd0 100%) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:0 12px 28px rgba(51,37,110,.24) !important;
}

.saldo-header .saldo-header-label,
.saldo-header span{
  color:#f4f1ff !important;
  opacity:1 !important;
  text-shadow:none !important;
}

.saldo-header .saldo-header-note,
.saldo-header small{
  color:#ddd7ff !important;
  opacity:1 !important;
  text-shadow:none !important;
}

.saldo-header .saldo-header-icon{
  color:#fff !important;
  background:rgba(255,255,255,.13) !important;
  border:1px solid rgba(255,255,255,.08) !important;
}

/* El número vuelve a ser el protagonista, con alto contraste. */
.saldo-header #saldo-real,
.saldo-header strong,
.saldo-header.saldo-positivo strong,
.saldo-header.saldo-negativo strong,
.saldo-header.saldo-cero strong,
.saldo-header[data-signo="positivo"] strong,
.saldo-header[data-signo="negativo"] strong,
.saldo-header[data-signo="cero"] strong{
  color:#fff !important;
  text-shadow:0 2px 10px rgba(22,14,63,.24) !important;
}

/* En móvil recupera el formato compacto anterior y evita recortes. */
@media (max-width:680px){
  .saldo-header,
  .saldo-header.saldo-positivo,
  .saldo-header.saldo-negativo,
  .saldo-header.saldo-cero,
  .saldo-header[data-signo="positivo"],
  .saldo-header[data-signo="negativo"],
  .saldo-header[data-signo="cero"]{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    min-height:0 !important;
    padding:9px 8px !important;
    gap:2px !important;
    border-radius:15px !important;
    text-align:center !important;
    overflow:hidden !important;
  }

  .saldo-header::before,
  .saldo-header::after{
    display:none !important;
  }

  /* El icono se oculta solo en teléfono para devolver espacio al importe. */
  .saldo-header .saldo-header-icon{
    display:none !important;
  }

  .saldo-header .saldo-header-body{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    min-width:0 !important;
    gap:2px !important;
  }

  .saldo-header .saldo-header-label,
  .saldo-header span{
    width:100% !important;
    margin:0 !important;
    font-size:.69rem !important;
    line-height:1.05 !important;
    text-align:center !important;
  }

  .saldo-header #saldo-real,
  .saldo-header strong{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    margin:2px 0 1px !important;
    padding:0 !important;
    font-size:clamp(.92rem,4.1vw,1.10rem) !important;
    line-height:1.05 !important;
    letter-spacing:-.025em !important;
    white-space:nowrap !important;
    overflow:visible !important;
    text-align:center !important;
  }

  .saldo-header .saldo-header-note,
  .saldo-header small{
    display:block !important;
    width:100% !important;
    margin:0 !important;
    font-size:.62rem !important;
    line-height:1.08 !important;
    text-align:center !important;
  }
}

@media (max-width:430px){
  header{
    grid-template-columns:minmax(72px,1fr) minmax(136px,154px) auto !important;
  }

  .saldo-header #saldo-real,
  .saldo-header strong{
    font-size:.98rem !important;
  }
}


/* ==========================================================
   v9 — CONTROL INDEPENDIENTE DE LEO + COMPARACIÓN
   ========================================================== */
.comparacion-panel{margin-top:16px}
.comparacion-panel .panel-head{align-items:center}
.comparacion-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.comparacion-card{padding:16px;border:1px solid var(--line,#e7e1f3);border-radius:18px;background:#fff;display:flex;flex-direction:column;gap:7px;min-width:0}
.comparacion-card span{font-size:.82rem;font-weight:800;color:#665f84}
.comparacion-card strong{font-size:1.15rem;color:#211b35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.comparacion-card small{color:#7a7392;line-height:1.25}
.comparacion-estado{padding:8px 12px;border-radius:999px;font-size:.82rem;white-space:nowrap}
.comparacion-estado.ok{color:#126b35;background:#e9f8ef;border:1px solid #bce7cb}
.comparacion-estado.alerta{color:#a42828;background:#fff0f0;border:1px solid #f3c4c4}
.comparacion-estado.pendiente{color:#665f84;background:#f3effc;border:1px solid #e1d8f6}
.comparacion-diferencia.ok{color:#15803d !important}
.comparacion-diferencia.alerta{color:#c62828 !important}

.leo-registro-head{margin-top:22px;margin-bottom:10px}
.leo-registro-head h3{margin:2px 0 0;font-size:1.15rem}
.leo-registro-head small{font-size:.75rem;color:#7b7492;font-weight:600}
.leo-tabla-wrap{margin-top:6px}
.tabla-leo th,.tabla-leo td{white-space:nowrap}

@media(max-width:760px){
  .comparacion-grid{grid-template-columns:1fr}
  .comparacion-panel .panel-head{align-items:flex-start;gap:10px}
  .comparacion-estado{white-space:normal;text-align:center}
  .comparacion-card strong{font-size:1.05rem}
}


/* ===== v11 iPhone: aislamiento visual estricto del rol Leo ===== */
body.modo-leo #panel-saldos,
body.modo-leo .saldos-grid,
body.modo-leo #panel-comparacion,
body.modo-leo #panel-historial,
body.modo-leo #panel-movimiento,
body.modo-leo #panel-usuarios,
body.modo-leo #app-nav-main{
  display:none !important;
  visibility:hidden !important;
}
body.modo-leo #panel-leo{
  display:block !important;
  visibility:visible !important;
}
body.modo-leo .saldo-header{
  visibility:visible !important;
}


/* ===== v14 Administración: respaldo Excel diario ===== */
#panel-config{margin-top:14px}
.respaldo-card{
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  gap:16px;
  align-items:start;
  padding:18px;
  border:1px solid rgba(91,69,201,.14);
  border-radius:22px;
  background:linear-gradient(180deg,#fff,#faf8ff);
}
.respaldo-icon{
  width:58px;height:58px;border-radius:18px;
  display:grid;place-items:center;
  background:#eee9ff;font-size:1.7rem;
}
.respaldo-info h3{margin:0 0 7px;font-size:1.08rem}
.respaldo-info p{margin:7px 0;line-height:1.45;color:#514b69}
.respaldo-actions{margin-top:15px;display:flex;flex-wrap:wrap;gap:10px}
.respaldo-actions button{min-height:44px}
.respaldo-msg{margin-top:12px !important;font-size:.88rem;color:#716d85 !important}
@media(max-width:680px){
  .respaldo-card{grid-template-columns:1fr;padding:15px}
  .respaldo-icon{width:48px;height:48px;border-radius:15px;font-size:1.4rem}
  .respaldo-actions button{width:100%}
  .app-nav{overflow-x:auto;justify-content:flex-start}
  .app-nav-btn{flex:1 0 auto}
}
body.modo-leo #panel-config{display:none !important;visibility:hidden !important}

/* v14: respaldo integrado dentro de Administración */
#admin-respaldo-excel.respaldo-admin{margin:4px 0 22px;}
#panel-usuarios > #admin-respaldo-excel + .user-form{margin-top:8px;}


/* ===== v15 · Editor seguro de usuarios ===== */
.modal-user{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:18px;}
.modal-user-backdrop{position:absolute;inset:0;background:rgba(24,18,53,.52);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);}
.modal-user-card{position:relative;z-index:1;width:min(760px,100%);max-height:min(90vh,820px);overflow:auto;background:#fff;border:1px solid var(--line);border-radius:22px;padding:20px;box-shadow:0 24px 70px rgba(28,20,68,.28);}
.modal-user-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px;}
.modal-user-head h2{margin:3px 0 0;font-size:22px;}
.modal-close{min-width:42px;padding:9px 12px;}
.edit-user-form{grid-template-columns:repeat(2,minmax(0,1fr));}
.edit-user-form small{font-weight:500;line-height:1.35;}
#edit-user-uid{background:#f4f2f9;color:#6c6680;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;}
.modal-user-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:4px;}
.modal-user-actions button{min-width:150px;}
@media(max-width:640px){
  .modal-user{padding:10px;}
  .modal-user-card{border-radius:18px;padding:14px;max-height:94vh;}
  .edit-user-form{grid-template-columns:1fr;}
  .edit-user-form .span-2{grid-column:auto;}
  .modal-user-actions{display:grid;grid-template-columns:1fr 1fr;}
  .modal-user-actions button{min-width:0;width:100%;}
  #panel-usuarios .row-actions{flex-wrap:wrap;}
}

/* v16 · correo pendiente de verificación */
.email-user-cell{display:flex;flex-direction:column;gap:3px;min-width:180px}
.email-pendiente{display:block;color:#a15c00;font-weight:700;font-size:.76rem;line-height:1.2}
[data-theme="dark"] .email-pendiente{color:#f6c66f}

/* v19 · Excel de Leo / OneDrive */
.leo-sync-card{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;margin:8px 0 14px;border:1px solid rgba(91,67,214,.22);border-radius:16px;background:rgba(91,67,214,.07)}
.leo-sync-info{display:flex;flex-direction:column;gap:3px;min-width:0}.leo-sync-info strong{font-size:1rem}.leo-sync-info small{color:var(--muted,#6b7280);overflow-wrap:anywhere}.leo-sync-info small.ok{color:#137333}.leo-sync-info small.err{color:#b3261e}.leo-sync-card button{flex:0 0 auto}
@media(max-width:620px){.leo-sync-card{align-items:stretch;flex-direction:column}.leo-sync-card button{width:100%}}

.leo-sync-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
@media(max-width:620px){.leo-sync-actions{display:grid;grid-template-columns:1fr 1fr}.leo-sync-actions button{width:100%}}

/* v19.6 · versión fija en esquina inferior derecha del login */
.login-version{
  position:fixed;
  right:max(12px, env(safe-area-inset-right));
  bottom:max(10px, env(safe-area-inset-bottom));
  z-index:20;
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin:0;
  padding:5px 10px;
  border:1px solid rgba(91,69,201,.16);
  border-radius:999px;
  background:rgba(255,255,255,.88);
  color:#514a68;
  font-size:.76rem;
  font-weight:700;
  line-height:1;
  box-shadow:0 3px 12px rgba(39,31,78,.10);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.login-version strong{color:var(--p);font-weight:900}
[data-theme="dark"] .login-version{background:rgba(27,24,39,.88);color:#d9d4e8;border-color:rgba(255,255,255,.13)}
@media(max-width:520px){.login-version{right:max(8px, env(safe-area-inset-right));bottom:max(8px, env(safe-area-inset-bottom));font-size:.71rem;padding:5px 8px}}