/* =========================================================
   Panel interno de Maiton (login, registro, dashboard)
   Reutiliza las variables de marca definidas en site.css
   ========================================================= */

.auth-body{
  margin:0;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(1100px 520px at 85% -10%, rgba(27,107,137,.12), transparent 60%),
    var(--paper);
  font-family:'IBM Plex Sans', Arial, sans-serif;
  color:var(--ink);
  padding:32px 16px;
}
.auth-wrap{ width:100%; max-width:420px; display:flex; flex-direction:column; align-items:center; gap:22px; }
.auth-brand img{ height:40px; }
.auth-card{
  width:100%;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:32px 30px;
}
.auth-card h1{ font:800 22px/1.3 'Sora', Arial, sans-serif; margin:0 0 6px; color:var(--ink); }
.auth-card .auth-sub{ font-size:13.5px; color:var(--ink-soft); margin:0 0 24px; }
.auth-back{ font-size:13px; color:var(--ink-soft); text-decoration:none; }
.auth-back:hover{ color:var(--blue); }

.field{ margin-bottom:16px; }
.field label{ display:block; font:600 12.5px 'IBM Plex Mono', monospace; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:6px; }
.field input, .field select, .field textarea{
  width:100%;
  box-sizing:border-box;
  padding:11px 13px;
  border-radius:9px;
  border:1px solid var(--line);
  background:var(--paper);
  color:var(--ink);
  font:14px/1.4 'IBM Plex Sans', Arial, sans-serif;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(27,107,137,.15);
}
.field .field-error{ color:#D14343; font-size:12.5px; margin-top:5px; }
.field-hint{ font-size:12px; color:var(--ink-soft); margin-top:5px; }

.btn-block{ width:100%; display:flex; align-items:center; justify-content:center; gap:8px; }
.auth-alt{ margin-top:18px; text-align:center; font-size:13.5px; color:var(--ink-soft); }
.auth-alt a{ color:var(--blue); font-weight:600; text-decoration:none; }
.auth-alt a:hover{ text-decoration:underline; }

.alert{ padding:12px 14px; border-radius:9px; font-size:13.5px; margin-bottom:18px; line-height:1.5; }
.alert-success{ background:rgba(31,174,88,.12); color:#146C39; border:1px solid rgba(31,174,88,.3); }
.alert-error{ background:rgba(209,67,67,.1); color:#B23A3A; border:1px solid rgba(209,67,67,.28); }
.alert-info{ background:rgba(27,107,137,.1); color:var(--blue-dark); border:1px solid rgba(27,107,137,.25); }

.status-icon{ font-size:40px; text-align:center; margin-bottom:6px; }

/* ---------- header login button ---------- */
.user-chip{
  display:inline-flex; align-items:center; gap:8px;
  font:600 13px 'IBM Plex Sans', Arial, sans-serif; color:var(--ink);
  text-decoration:none; padding:8px 14px; border-radius:999px; border:1px solid var(--line);
  background:var(--surface-2);
}
.user-chip:hover{ border-color:var(--blue); }
.user-chip .avatar{
  width:22px; height:22px; border-radius:50%; background:var(--blue); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700;
}

/* =========================================================
   Dashboard shell
   ========================================================= */
.dash-body{ margin:0; background:var(--paper); color:var(--ink); font-family:'IBM Plex Sans', Arial, sans-serif; }
.dash-shell{ display:flex; min-height:100vh; }

.dash-sidebar{
  width:250px; flex:0 0 250px;
  background:var(--ink); color:#E9F2F2;
  display:flex; flex-direction:column; padding:22px 16px;
  position:sticky; top:0; height:100vh;
}
.dash-sidebar .brand{ display:flex; align-items:center; gap:10px; padding:0 8px 22px; text-decoration:none; }
.sidebar-close{ display:none; }
.dash-sidebar .brand img{ height:26px; }
.dash-nav{ display:flex; flex-direction:column; gap:3px; flex:1; }
.dash-nav a{
  display:flex; align-items:center; gap:11px;
  padding:10px 12px; border-radius:9px; color:#B9CBCC;
  text-decoration:none; font-size:13.5px; font-weight:600;
  transition:background .15s ease, color .15s ease;
}
.dash-nav a:hover{ background:rgba(255,255,255,.06); color:#fff; }
.dash-nav a.active{ background:var(--blue); color:#fff; }
.dash-nav .nav-icon{ font-size:16px; width:20px; text-align:center; }
.dash-sidebar .sidebar-foot{ padding-top:16px; border-top:1px solid rgba(255,255,255,.1); font-size:12px; color:#7E9C9F; }
.dash-sidebar .sidebar-foot a{ color:#B9CBCC; }

.dash-main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.dash-topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 28px; border-bottom:1px solid var(--line); background:var(--surface);
  position:sticky; top:0; z-index:10;
}
.dash-topbar h1{ font:700 18px/1.3 'Sora', Arial, sans-serif; margin:0; }
.dash-topbar .crumb{ font-size:12.5px; color:var(--ink-soft); font-family:'IBM Plex Mono',monospace; }
.dash-content{ padding:26px 28px 60px; }

/* ---------- botón de menú (hamburguesa) para móvil ---------- */
.topbar-left{ display:flex; align-items:center; gap:12px; min-width:0; }
.menu-toggle{
  display:none; flex-direction:column; justify-content:center; gap:4px;
  width:38px; height:38px; flex:0 0 38px; border-radius:9px;
  border:1px solid var(--line); background:var(--surface); cursor:pointer; padding:0;
}
.menu-toggle span{ display:block; width:18px; height:2px; margin:0 auto; background:var(--ink); border-radius:2px; }

.dash-backdrop{ display:none; }

@media (max-width: 860px){
  .dash-sidebar{ position:fixed; left:0; top:0; z-index:50; transform:translateX(-100%); transition:transform .2s ease; box-shadow:0 0 40px rgba(0,0,0,.3); }
  .dash-sidebar.open{ transform:translateX(0); }
  .dash-content{ padding:18px; }
  .dash-topbar{ padding:14px 16px; }
  .menu-toggle{ display:flex; }
  .sidebar-close{ display:flex; align-items:center; justify-content:center; margin-left:auto; width:30px; height:30px; border-radius:8px; border:1px solid rgba(255,255,255,.15); background:transparent; color:#E9F2F2; font-size:16px; cursor:pointer; }
  .dash-sidebar .brand{ display:flex; justify-content:space-between; }
  .dash-backdrop{
    display:block; position:fixed; inset:0; background:rgba(9,20,22,.45); z-index:40;
    opacity:0; pointer-events:none; transition:opacity .2s ease;
  }
  .dash-backdrop.open{ opacity:1; pointer-events:auto; }
}

.tiles{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:16px; }
.tile{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px; text-decoration:none; color:var(--ink); box-shadow:var(--shadow);
  transition:transform .15s ease, border-color .15s ease;
}
.tile:hover{ transform:translateY(-2px); border-color:var(--blue); }
.tile .tile-icon{ font-size:26px; margin-bottom:10px; }
.tile h3{ margin:0 0 6px; font:700 15.5px 'Sora', Arial, sans-serif; }
.tile p{ margin:0; font-size:13px; color:var(--ink-soft); line-height:1.5; }

.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.card-pad{ padding:22px; }
.card-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--line); flex-wrap:wrap; gap:10px; }
.card-head h2{ margin:0; font:700 16px 'Sora', Arial, sans-serif; }

table.data-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.data-table th{ text-align:left; font:600 11.5px 'IBM Plex Mono', monospace; text-transform:uppercase; letter-spacing:.02em; color:var(--ink-soft); padding:12px 14px; border-bottom:2px solid var(--line); white-space:nowrap; }
.data-table td{ padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:top; }
.data-table tbody tr:hover{ background:var(--surface-2); }
.table-scroll{ overflow-x:auto; }

.badge{ display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px; font:600 11.5px 'IBM Plex Mono', monospace; text-transform:uppercase; letter-spacing:.02em; }
.badge-pendiente{ background:rgba(242,134,33,.14); color:#B4620C; }
.badge-aprobado{ background:rgba(31,174,88,.14); color:#146C39; }
.badge-rechazado{ background:rgba(209,67,67,.12); color:#B23A3A; }
.badge-deshabilitado{ background:rgba(75,100,105,.14); color:var(--ink-soft); }
.badge-admin{ background:rgba(27,107,137,.14); color:var(--blue-dark); }
.badge-colaborador{ background:rgba(242,134,33,.1); color:#B4620C; }

.chip-toggle{ display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:999px; border:1px solid var(--line); background:var(--surface); font-size:12.5px; font-weight:600; cursor:pointer; }
.chip-toggle.on{ background:rgba(27,107,137,.1); border-color:var(--blue); color:var(--blue-dark); }

.btn-sm{ padding:7px 13px; font-size:12.5px; border-radius:8px; }
.btn-danger{ background:#D14343; color:#fff; }
.btn-danger:hover{ filter:brightness(1.05); }

.toolbar{ display:flex; gap:10px; flex-wrap:wrap; align-items:end; margin-bottom:18px; }
.toolbar .field{ margin-bottom:0; min-width:160px; }

.empty-state{ text-align:center; padding:50px 20px; color:var(--ink-soft); }
.empty-state .status-icon{ opacity:.5; }

.totales-row td{ font-weight:700; background:var(--surface-2); }

/* ---------- header login button: keep the action row from overflowing on phones ---------- */
@media (max-width:480px){
  .head-actions{ gap:8px; }
  .head-actions .btn{ padding:9px 12px; font-size:13px; }
  .head-actions .user-chip{ padding:7px 10px; font-size:12.5px; }
  .head-actions .user-chip .avatar{ width:20px; height:20px; }
}
@media (max-width:380px){
  .head-actions .user-chip span:last-child{ display:none; }
}

/* =========================================================
   Portal de pagos: instrucciones plegables, tarjetas, cobro automático
   ========================================================= */

/* ---------- "Leer instrucciones" (texto de ayuda que no ocupa la pantalla) ---------- */
.leer-ins{ margin:0 0 18px; }
.leer-ins > summary{ list-style:none; cursor:pointer; display:inline-block; }
.leer-ins > summary::-webkit-details-marker{ display:none; }
.leer-ins-btn{
  display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px;
  border:1px solid var(--line); background:var(--surface); color:var(--blue-dark);
  font:600 12.5px 'IBM Plex Sans', Arial, sans-serif; transition:border-color .15s ease, background .15s ease;
}
.leer-ins > summary:hover .leer-ins-btn{ border-color:var(--blue); }
.leer-ins[open] .leer-ins-btn{ background:rgba(27,107,137,.1); border-color:var(--blue); }
.leer-ins .txt-cerrar{ display:none; }
.leer-ins[open] .txt-abrir{ display:none; }
.leer-ins[open] .txt-cerrar{ display:inline; }
.leer-ins-body{
  margin-top:10px; padding:14px 18px; border-left:3px solid var(--blue); background:var(--surface-2);
  border-radius:0 12px 12px 0; font-size:13.5px; line-height:1.65; color:var(--ink-soft); max-width:760px;
}
.leer-ins-body p{ margin:0 0 8px; }
.leer-ins-body p:last-child{ margin-bottom:0; }

/* ---------- Encabezado de sección ---------- */
.sec-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:6px 0 14px; }
.sec-head h2{ margin:0; font:700 17px 'Sora', Arial, sans-serif; }
.sec-head .sec-sub{ font-size:12.5px; color:var(--ink-soft); }
.sec{ margin-bottom:28px; }

/* ---------- Tarjetas del usuario ---------- */
.tarjetas-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:18px; }
.tj-wrap{ display:flex; flex-direction:column; gap:10px; }
.tj{
  position:relative; overflow:hidden; border-radius:18px; padding:20px 22px; color:#fff; min-height:168px;
  background:linear-gradient(135deg, #0F3A4B 0%, #1B6B89 100%);
  box-shadow:0 14px 28px -16px rgba(17,67,86,.7);
  display:flex; flex-direction:column; justify-content:space-between;
}
.tj::after{
  content:''; position:absolute; right:-40px; top:-60px; width:190px; height:190px; border-radius:50%;
  background:rgba(255,255,255,.08);
}
.tj.predeterminada{ box-shadow:0 0 0 3px var(--orange), 0 14px 28px -16px rgba(17,67,86,.7); }
.tj-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; position:relative; z-index:1; }
.tj-marca{ font:600 12.5px 'IBM Plex Mono', monospace; letter-spacing:.08em; text-transform:uppercase; opacity:.92; }
.tj-pill{ background:var(--orange); color:#fff; padding:4px 10px; border-radius:999px; font:700 10.5px 'IBM Plex Mono', monospace; letter-spacing:.04em; text-transform:uppercase; }
.tj-num{ font:500 21px 'IBM Plex Mono', monospace; letter-spacing:.14em; position:relative; z-index:1; margin:14px 0; }
.tj-bottom{ display:flex; justify-content:space-between; align-items:flex-end; font-size:12px; opacity:.88; position:relative; z-index:1; }
.tj-bottom strong{ display:block; font:600 14px 'IBM Plex Mono', monospace; }
.tj-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.tj-actions form{ margin:0; }

.tj-add{
  min-height:168px; border-radius:18px; border:2px dashed var(--line); background:var(--surface);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; cursor:pointer;
  color:var(--blue-dark); font:600 14px 'IBM Plex Sans', Arial, sans-serif; width:100%;
  transition:border-color .15s ease, background .15s ease, transform .15s ease;
}
.tj-add:hover{ border-color:var(--blue); background:rgba(27,107,137,.06); transform:translateY(-2px); }
.tj-add .mas{ font-size:30px; line-height:1; color:var(--blue); }
.tj-add small{ font-weight:500; color:var(--ink-soft); font-size:12px; }

/* ---------- Estado vacío y panel para agregar tarjeta ---------- */
.hero-card{
  display:flex; align-items:center; gap:22px; flex-wrap:wrap; padding:28px; border-radius:var(--radius);
  background:linear-gradient(135deg, rgba(27,107,137,.10), rgba(242,134,33,.08)); border:1px solid var(--line);
}
.hero-card .hero-icon{ font-size:44px; }
.hero-card h3{ margin:0 0 4px; font:700 18px 'Sora', Arial, sans-serif; }
.hero-card p{ margin:0; color:var(--ink-soft); font-size:14px; max-width:520px; line-height:1.55; }
.hero-card .hero-body{ flex:1; min-width:240px; }

.trust-row{ display:flex; flex-wrap:wrap; gap:8px 16px; font-size:12.5px; color:var(--ink-soft); }
.trust-row span{ display:inline-flex; align-items:center; gap:6px; }

.add-panel{ border-radius:var(--radius); border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow); overflow:hidden; }
.add-panel-head{ padding:18px 22px; border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:8px; }
.add-panel-head h3{ margin:0; font:700 16px 'Sora', Arial, sans-serif; }
.add-panel-body{ padding:18px 22px 8px; background:var(--surface-2); }
.add-panel iframe{ width:100%; min-height:600px; border:0; border-radius:12px; background:#fff; display:block; }
.add-panel-foot{ padding:12px 22px 16px; background:var(--surface-2); font-size:12.5px; color:var(--ink-soft); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.add-panel-foot a{ color:var(--blue); font-weight:600; text-decoration:none; }

/* ---------- Cobro automático mensual ---------- */
.auto-card{ border-radius:var(--radius); border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow); padding:22px; }
.auto-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.auto-head h2{ margin:0; font:700 17px 'Sora', Arial, sans-serif; }
.stats{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:12px; }
.stat{ background:var(--surface-2); border-radius:12px; padding:14px 16px; }
.stat .k{ font:600 11px 'IBM Plex Mono', monospace; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); }
.stat .v{ font:700 20px 'Sora', Arial, sans-serif; margin-top:4px; }
.stat .s{ font-size:12px; color:var(--ink-soft); margin-top:2px; }
.accept-row{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  margin-top:16px; padding:14px 16px; border:1px solid var(--line); border-radius:12px;
}
.accept-row label{ display:flex; align-items:center; gap:10px; font-size:14px; cursor:pointer; flex:1; min-width:240px; }
.accept-row input[type=checkbox]{ width:19px; height:19px; accent-color:var(--blue); flex:0 0 auto; }
.link-btn{ background:none; border:0; padding:0; color:var(--blue); font:600 14px 'IBM Plex Sans', Arial, sans-serif; text-decoration:underline; cursor:pointer; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

dialog.contrato-dlg{
  border:0; border-radius:16px; padding:0; width:calc(100% - 32px); max-width:640px;
  background:var(--surface); color:var(--ink); box-shadow:0 30px 70px -20px rgba(0,0,0,.55);
}
dialog.contrato-dlg::backdrop{ background:rgba(9,20,22,.55); }
.dlg-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--line); }
.dlg-head h3{ margin:0; font:700 16px 'Sora', Arial, sans-serif; }
.dlg-body{ padding:6px 22px 4px; max-height:58vh; overflow:auto; font-size:14px; line-height:1.65; }
.dlg-body p{ margin:12px 0; }
.dlg-foot{ padding:14px 22px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; }

/* ---------- Historial de cobros ---------- */
.tabla-hist{ width:100%; border-collapse:separate; border-spacing:0; font-size:13.5px; }
.tabla-hist th{ text-align:left; font:600 11px 'IBM Plex Mono', monospace; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); padding:10px 14px; background:var(--surface-2); white-space:nowrap; }
.tabla-hist th:first-child{ border-radius:10px 0 0 10px; }
.tabla-hist th:last-child{ border-radius:0 10px 10px 0; }
.tabla-hist td{ padding:14px; border-bottom:1px solid var(--line); vertical-align:middle; }
.tabla-hist tbody tr:last-child td{ border-bottom:0; }
.tabla-hist .monto{ font:600 14px 'IBM Plex Mono', monospace; white-space:nowrap; }
.tabla-hist .meta{ font-size:12px; color:var(--ink-soft); margin-top:3px; }
.tabla-hist .fecha{ white-space:nowrap; }

/* ---------- Administración: una tarjeta por usuario ---------- */
.usr-list{ display:flex; flex-direction:column; gap:18px; }
.usr{ border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow); overflow:hidden; }
.usr-top{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; padding:16px 22px; border-bottom:1px solid var(--line); background:var(--surface-2); }
.usr-id{ display:flex; align-items:center; gap:14px; min-width:0; }
.usr-avatar{ width:42px; height:42px; border-radius:50%; background:var(--blue); color:#fff; display:flex; align-items:center; justify-content:center; font:700 15px 'Sora', Arial, sans-serif; flex:0 0 42px; }
.usr-nombre{ font:700 15.5px 'Sora', Arial, sans-serif; }
.usr-mail{ font-size:12.5px; color:var(--ink-soft); }
.usr-acciones{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.usr-acciones form{ margin:0; }
.usr-body{ display:grid; grid-template-columns:minmax(250px, 1fr) minmax(340px, 1.7fr); }
.usr-col{ padding:20px 22px; }
.usr-col + .usr-col{ border-left:1px solid var(--line); }
.usr-col h4{ margin:0 0 12px; font:600 11.5px 'IBM Plex Mono', monospace; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); }
.usr-linea{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px; font-size:13.5px; }
.cfg-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px 14px; }
.cfg-grid .field{ margin:0; }
.cfg-grid .field label{ font-size:11px; }
.cfg-grid .field input, .cfg-grid .field select{ padding:9px 11px; }
.cfg-checks{ display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:16px; font-size:13.5px; }
.cfg-checks label{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; }
.cfg-checks input{ width:17px; height:17px; accent-color:var(--blue); }
.cfg-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:18px; }
.usr-tools{ border-top:1px solid var(--line); padding:0 22px; }
.usr-tools > summary{ list-style:none; cursor:pointer; padding:12px 0; font:600 12.5px 'IBM Plex Sans', Arial, sans-serif; color:var(--ink-soft); }
.usr-tools > summary::-webkit-details-marker{ display:none; }
.usr-tools > summary::before{ content:'▸ '; }
.usr-tools[open] > summary::before{ content:'▾ '; }
.usr-tools-body{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; padding:0 0 18px; }
.usr-tools-body form{ display:flex; gap:8px; align-items:center; margin:0; }
.usr-tools-body input[type=text]{ width:90px; padding:8px 10px; border-radius:8px; border:1px solid var(--line); background:var(--paper); color:var(--ink); }

@media (max-width:760px){
  .usr-body{ grid-template-columns:1fr; }
  .usr-col + .usr-col{ border-left:0; border-top:1px solid var(--line); }
}

/* =========================================================
   Adaptación a celular y tableta (todo el proyecto)
   Puntos de corte: 1100 (tableta horizontal), 860 (tableta vertical: el menú pasa a ser cajón),
   720 (celular grande: tablas como tarjetas), 480 (celular chico).
   ========================================================= */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
img, video, svg{ max-width:100%; }
.dash-content{ padding-bottom:calc(60px + env(safe-area-inset-bottom, 0px)); }
.dash-sidebar{ height:100vh; height:100dvh; overflow-y:auto; }
.dash-main{ min-width:0; }

/* Cuadrículas que nunca fuerzan un ancho mayor que la pantalla */
.tarjetas-grid{ grid-template-columns:repeat(auto-fill, minmax(min(100%, 270px), 1fr)); }
.cfg-grid{ grid-template-columns:repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.stats{ grid-template-columns:repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.tiles{ grid-template-columns:repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.usr-body{ grid-template-columns:minmax(230px, 1fr) minmax(300px, 1.7fr); }
.dash-topbar h1, .dash-topbar .crumb{ overflow-wrap:anywhere; }

/* Tableta vertical y menor: el menú ya es un cajón (ver 860 arriba). La sombra solo se ve con el menú abierto. */
@media (max-width:860px){
  .dash-sidebar{ box-shadow:none; }
  .dash-sidebar.open{ box-shadow:0 0 40px rgba(0,0,0,.35); }
  .dash-topbar .user-chip{ max-width:46vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .usr-body{ grid-template-columns:1fr; }
  .usr-col + .usr-col{ border-left:0; border-top:1px solid var(--line); }
  .auth-body{ padding:24px 14px; }
}

/* Pantallas táctiles: controles cómodos y sin zoom automático de iOS al escribir */
@media (pointer:coarse), (max-width:860px){
  .field input, .field select, .field textarea,
  .toolbar select, .toolbar input,
  .usr-tools-body input[type=text], .cfg-grid input, .cfg-grid select{ font-size:16px; }
  .btn{ min-height:44px; justify-content:center; }
  .btn-sm{ min-height:40px; }
  .menu-toggle{ width:44px; height:44px; flex-basis:44px; }
  .leer-ins-btn{ min-height:40px; }
  .cfg-checks input, .accept-row input[type=checkbox]{ width:22px; height:22px; }
  .tj-actions .btn{ min-height:40px; }
}

/* Celular y tableta vertical: las tablas se vuelven una tarjeta por fila (cada dato con su título) */
@media (max-width:820px){
  .table-scroll{ overflow-x:visible; }
  table.stack-sm, .stack-sm tbody, .stack-sm tfoot, .stack-sm tr, .stack-sm td{ display:block; width:100%; box-sizing:border-box; }
  .stack-sm thead{ display:none; }
  .stack-sm tbody tr{
    border:1px solid var(--line); border-radius:14px; margin:0 0 12px; padding:4px 14px; background:var(--surface);
    box-shadow:0 1px 0 rgba(0,0,0,.02);
  }
  .stack-sm tbody tr:hover{ background:var(--surface); }
  .stack-sm td, .tabla-hist.stack-sm td{
    display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
    padding:10px 0; border-bottom:1px dashed var(--line); text-align:right; white-space:normal !important;
    overflow-wrap:anywhere;
  }
  .stack-sm td:last-child{ border-bottom:0; }
  .stack-sm td::before{
    content:attr(data-label); flex:0 0 34%; max-width:34%; text-align:left;
    font:600 10.5px 'IBM Plex Mono', monospace; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); padding-top:2px;
  }
  .stack-sm td[data-label=""]::before{ display:none; }
  .stack-sm td > div, .stack-sm td > form{ text-align:right; }
  .stack-sm td .meta{ text-align:right; }
  .stack-sm td[data-label="Acciones"], .stack-sm td[data-label=""]{ justify-content:flex-end; }
  .stack-sm td[data-label="Acciones"] > div{ justify-content:flex-end; }
  .tabla-hist.stack-sm .fecha{ white-space:normal; }
  /* Totales (actividades): una línea por concepto, sin celdas vacías */
  .stack-sm tfoot{ padding:4px 2px; }
  .stack-sm tfoot tr{ display:flex; justify-content:space-between; gap:12px; padding:6px 4px; }
  .stack-sm tfoot td{ display:block; width:auto; padding:0; border:0; text-align:right; font-size:14px; }
  .stack-sm tfoot td.vacia{ display:none; }
  .stack-sm tfoot td::before{ display:none; }
  .stack-sm tfoot td:first-of-type{ text-align:left; }

  .card-head{ padding:14px 16px; }
  .toolbar .field{ flex:1 1 100%; min-width:0; }
  .toolbar .field[style*="margin-left:auto"]{ margin-left:0 !important; }
  .toolbar .field .btn{ width:100%; }
  .accept-row{ padding:14px; }
  .accept-row .btn{ width:100%; }
  .hero-card{ padding:22px 18px; gap:16px; }
  .hero-card form, .hero-card .btn{ width:100%; }
  .add-panel-head, .add-panel-body, .add-panel-foot{ padding-left:14px; padding-right:14px; }
  .add-panel iframe{ min-height:640px; }
  .auto-card{ padding:18px 16px; }
  .usr-top{ padding:14px 16px; }
  .usr-col{ padding:16px; }
  .usr-tools{ padding:0 16px; }
  .cfg-foot .btn{ width:100%; }
  .usr-tools-body form{ flex-wrap:wrap; }
}

/* Ventana del contrato como hoja que sube desde abajo en celular */
@media (max-width:600px){
  dialog.contrato-dlg{ width:100%; max-width:none; margin:auto 0 0; border-radius:18px 18px 0 0; max-height:92vh; }
  .dlg-body{ max-height:62vh; }
  .dlg-foot .btn{ width:100%; }
}

/* Celular chico */
@media (max-width:480px){
  .dash-content{ padding:14px 12px calc(60px + env(safe-area-inset-bottom, 0px)); }
  .dash-topbar{ padding:10px 12px; gap:8px; }
  .dash-topbar h1{ font-size:16px; }
  .dash-topbar .crumb{ font-size:10.5px; }
  .dash-topbar .user-chip{ font-size:0; padding:5px; gap:0; max-width:none; }
  .dash-topbar .user-chip .avatar{ font-size:11px; width:30px; height:30px; }
  .dash-topbar .user-chip.user-chip-nombre{ display:none; }
  .auth-card{ padding:24px 18px; }
  .tj{ min-height:156px; padding:18px; }
  .tj-num{ font-size:19px; }
  .stat .v{ font-size:18px; }
  .tabla-hist td, .data-table td{ font-size:13.5px; }
  .tiles{ gap:12px; }
}

/* Teléfono en horizontal: la barra superior no se pega para no tapar el contenido */
@media (max-height:480px) and (orientation:landscape){
  .dash-topbar{ position:static; }
}

/* Encabezado del sitio público (con o sin sesión iniciada) */
@media (max-width:560px){
  .nav-wrap{ gap:8px; }
  .brand img{ height:26px; }
  .head-actions{ gap:8px; }
  .head-actions .btn-primary{ display:none; }
  .head-actions .btn{ padding:9px 12px; font-size:13px; }
  .lang-toggle button{ padding:5px 9px; }
}

/* Las reglas de la página pública (site.css) no deben filtrarse al panel: secciones sin relleno enorme y tarjetas sin el relleno de la landing */
.dash-body section{ padding-block:0; }
.dash-body .card:not(.card-pad){ display:block; padding:0; gap:0; }
.dash-body .card:not(.card-pad) > p{ margin:0; padding:18px 22px; }
.dash-body .card:not(.card-pad) > .table-scroll{ padding:4px 10px 10px; }
.dash-body .card:not(.card-pad) > .empty-state{ padding:40px 20px; }
@media (max-width:820px){
  .dash-body .card:not(.card-pad) > .table-scroll{ padding:12px; }
  .dash-body .card:not(.card-pad) > p{ padding:16px; }
  .stack-sm td[data-label="Acciones"]{ flex-direction:column; align-items:stretch; text-align:left; gap:8px; }
  .stack-sm td[data-label="Acciones"]::before{ max-width:none; flex:0 0 auto; }
  .stack-sm td[data-label="Acciones"] .cv > div{ display:flex; flex-wrap:wrap; gap:8px; justify-content:stretch; }
  .stack-sm td[data-label="Acciones"] form{ flex:1 1 140px; }
  .stack-sm td[data-label="Acciones"] .btn{ width:100%; }
  .stack-sm .cv{ flex:1 1 0; min-width:0; text-align:right; overflow-wrap:anywhere; }
  .stack-sm td[data-label=""] .cv{ display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
}

/* Tableta vertical: las tarjetas de las tablas van en dos columnas */
@media (min-width:600px) and (max-width:820px){
  .stack-sm tbody{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .stack-sm tbody tr{ margin:0; }
}

/* Formularios en dos columnas que pasan a una sola en celular */
.form-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-grid-2 > .field{ min-width:0; }
.form-actions{ display:flex; gap:10px; margin-top:10px; flex-wrap:wrap; }
@media (max-width:560px){
  .form-grid-2{ grid-template-columns:1fr; gap:0; }
  .form-actions .btn{ flex:1 1 140px; }
}