/* Panel del distribuidor: escritorio primero, escala de 16 px (tokens de ARCHITECT en /assets/design-tokens.css). */
body { font-size: var(--fs-sm); background: var(--bg); }
.marca { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); }
.marca-sub { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-muted); margin-left: var(--sp-2); }

/* acceso */
.acceso { min-height: 100dvh; display: grid; place-items: center; padding: var(--sp-6); background: var(--bg-elev); overflow-x: hidden; }
.acceso-caja { width: 100%; max-width: var(--container-narrow); padding: var(--sp-8); }
@media (max-width: 30rem) { .acceso-caja { padding: var(--sp-5); } .acceso { padding: var(--sp-4); } }
.acceso h1 { font-size: var(--fs-xl); margin: var(--sp-4) 0 var(--sp-6); }
.acceso-alt { margin: var(--sp-4) 0 0; text-align: center; }
.form { display: grid; gap: var(--sp-4); }
.campo { display: grid; gap: var(--sp-1); }
.campo .input, .campo select.input, .campo textarea.input { min-height: var(--control-h-sm); font-size: var(--fs-sm); }
.error { margin: 0; color: var(--danger); font-weight: var(--fw-semibold); }

/* barra */
/* QA #3: barra en rejilla; la navegación va en una sola fila con desplazamiento horizontal */
.barra { position: sticky; top: 0; z-index: var(--z-sticky); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-4); padding: var(--sp-2) var(--sp-6); background: var(--surface); border-bottom: var(--border-w) solid var(--border); }
.nav { display: flex; gap: var(--sp-1); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.nav::-webkit-scrollbar { display: none; }
.nav a { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--sp-3); border-radius: var(--radius-md); color: var(--text); text-decoration: none; font-weight: var(--fw-semibold); font-size: var(--fs-xs); border: var(--border-w) solid transparent; }
.nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.barra-usuario { display: flex; align-items: center; gap: var(--sp-3); }
.usuario { color: var(--text-muted); font-size: var(--fs-xs); }

/* contenido */
.contenido { max-width: var(--container); margin: 0 auto; padding: var(--sp-6); display: grid; gap: var(--sp-6); }
.contenido > * { min-width: 0; } /* QA #1: las tablas se desplazan dentro de su tarjeta, no ensanchan la página */
.encabezado { display: flex; align-items: end; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.encabezado h1 { margin: 0; font-size: var(--fs-xl); }
.encabezado p { margin: var(--sp-1) 0 0; color: var(--text-muted); }
.acciones { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.acciones .input { width: auto; min-height: var(--control-h-sm); font-size: var(--fs-sm); display: inline-block; }
.btn { min-height: var(--control-h-sm); font-size: var(--fs-sm); }
.btn-sm { min-height: 2.5rem; font-size: var(--fs-xs); padding: 0 var(--sp-3); }

.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--sp-4); }
.tarjeta { display: grid; gap: var(--sp-1); min-width: 0; }
.tarjeta > * { min-width: 0; overflow-wrap: anywhere; }
.tarjeta .label { font-size: var(--fs-2xs); }
.tarjeta .valor { font-size: var(--fs-2xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); font-variant-numeric: tabular-nums; }
.tarjeta .valor.cero { color: var(--text-faint); }
.tarjeta .detalle { color: var(--text-muted); font-size: var(--fs-xs); }

.table { font-size: var(--fs-xs); }
.table th, .table td { padding: var(--sp-2) var(--sp-3); }
.table tr[data-fila] { cursor: pointer; }
.table tr[data-fila]:hover td { background: var(--surface-2); }
.subtabla { margin: var(--sp-2) 0 0; padding-left: var(--sp-4); color: var(--text-muted); font-size: var(--fs-2xs); }
.vacio { padding: var(--sp-8); text-align: center; color: var(--text-muted); border: var(--border-w) dashed var(--border); border-radius: var(--radius-lg); }

/* barra de cobertura: color + texto */
.barra-pct { display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 9rem; }
.barra-pct i { display: block; height: 0.75rem; flex: 1; background: var(--surface-3); border-radius: var(--radius-full); overflow: hidden; }
.barra-pct i b { display: block; height: 100%; background: var(--accent); }
.barra-pct[data-nivel="bajo"] i b { background: var(--danger); }
.barra-pct[data-nivel="medio"] i b { background: var(--warning); }
.barra-pct[data-nivel="alto"] i b { background: var(--success); }

.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
.dos-columnas > * { min-width: 0; }
@media (max-width: 60rem) { .dos-columnas { grid-template-columns: 1fr; } }
.card h2 { margin: 0 0 var(--sp-3); font-size: var(--fs-md); }
.card h3 { margin: var(--sp-4) 0 var(--sp-2); font-size: var(--fs-sm); }
.lista-simple { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-2); }
.lista-simple li { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; min-width: 0; }
.lista-simple .badge { white-space: normal; text-align: center; }
.lista-simple li:last-child { border-bottom: 0; }
.lista-simple code { overflow-wrap: anywhere; }

/* conversación whatsapp */
.chat { display: grid; gap: var(--sp-2); max-height: 32rem; overflow: auto; padding: var(--sp-2); }
.burbuja { max-width: 80%; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-lg); border: var(--border-w) solid var(--border); white-space: pre-wrap; font-size: var(--fs-xs); }
.burbuja[data-dir="in"] { justify-self: start; background: var(--surface-2); }
.burbuja[data-dir="out"] { justify-self: end; background: var(--accent-soft); border-color: var(--accent); }
.burbuja small { display: block; color: var(--text-muted); margin-top: var(--sp-1); font-size: var(--fs-2xs); }
pre.json { margin: 0; padding: var(--sp-3); background: var(--surface-2); border-radius: var(--radius-md); font-size: var(--fs-2xs); overflow: auto; max-height: 20rem; }

/* diálogo */
.dialogo { border: var(--border-w) solid var(--border-strong); border-radius: var(--radius-lg); padding: 0; width: min(40rem, 92vw); max-height: calc(100dvh - 3rem); }
.dialogo::backdrop { background: var(--overlay); }
.dialogo-cuerpo { padding: var(--sp-6); display: grid; gap: var(--sp-4); }
/* QA #4: acciones siempre visibles; el destructivo a la izquierda, lejos del primario */
.dialogo .pie { position: sticky; bottom: 0; background: var(--surface); margin: 0 calc(-1 * var(--sp-6)) calc(-1 * var(--sp-6)); padding: var(--sp-3) var(--sp-6); border-top: var(--border-w) solid var(--border); flex-wrap: wrap; }
.dialogo .pie .btn-danger { margin-right: auto; }
.dialogo h2 { margin: 0; font-size: var(--fs-lg); }
.fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--sp-3); align-items: end; }
.presentaciones { display: grid; gap: var(--sp-2); }
.presentacion { display: grid; grid-template-columns: 1.2fr 1fr 1fr auto; gap: var(--sp-2); align-items: center; }
.pie { display: flex; justify-content: flex-end; gap: var(--sp-2); }
.enlace-acceso { word-break: break-all; font-family: var(--font-mono); font-size: var(--fs-2xs); background: var(--surface-2); padding: var(--sp-2); border-radius: var(--radius-sm); }
.pin { font-size: var(--fs-3xl); font-weight: var(--fw-bold); letter-spacing: 0.15em; text-align: center; font-variant-numeric: tabular-nums; }

.aviso { position: fixed; left: 50%; bottom: var(--sp-6); transform: translateX(-50%); z-index: var(--z-toast); padding: var(--sp-3) var(--sp-5); border-radius: var(--radius-md); background: var(--text); color: var(--text-inverse); font-weight: var(--fw-semibold); box-shadow: var(--shadow-md); }
.aviso[data-tipo="error"] { background: var(--danger); }
.aviso[data-tipo="ok"] { background: var(--success); }
.filtros { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: end; }
.filtros label { display: grid; gap: 2px; font-size: var(--fs-2xs); color: var(--text-muted); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-wide); flex: 1 1 9rem; min-width: 0; max-width: 14rem; }
.filtros .input { min-height: 2.5rem; font-size: var(--fs-xs); width: 100%; min-width: 0; }
.texto-muted { color: var(--text-muted); }
.chip-dia { font-size: var(--fs-2xs); }
@media (max-width: 48rem) { .contenido { padding: var(--sp-4); } .barra { padding: var(--sp-2) var(--sp-4); grid-template-columns: 1fr auto; } .nav { grid-column: 1 / -1; } .usuario { display: none; } .presentacion { grid-template-columns: 1fr 1fr; } .tarjetas > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
.subtexto { display: block; color: var(--text-muted); font-size: var(--fs-2xs); }
details.plegable summary { cursor: pointer; color: var(--text-muted); font-size: var(--fs-xs); margin: var(--sp-3) 0 var(--sp-2); }

/* avisos de plan (prueba por vencer, límite excedido) */
.avisos-plan { display: grid; gap: 2px; }
.aviso-plan { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-2) var(--sp-4); background: var(--warning-soft); border-bottom: var(--border-w) solid var(--warning); color: var(--text); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.aviso-plan[data-tipo="limite"] { background: var(--danger-soft); border-color: var(--danger); }
/* plan y pago */
.uso { display: grid; gap: var(--sp-3); }
.uso-fila { display: grid; grid-template-columns: 8rem 1fr auto; gap: var(--sp-3); align-items: center; }
.uso-fila i { display: block; height: 0.75rem; background: var(--surface-3); border-radius: var(--radius-full); overflow: hidden; }
.uso-fila i b { display: block; height: 100%; background: var(--accent); }
.uso-fila[data-nivel="alto"] i b { background: var(--warning); }
.uso-fila[data-nivel="excedido"] i b { background: var(--danger); }
.planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--sp-4); }
.plan-tarjeta { display: grid; gap: var(--sp-2); align-content: start; }
.plan-tarjeta[data-actual="1"] { border-color: var(--accent); }
.plan-tarjeta .precio { font-size: var(--fs-2xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); }
.plan-tarjeta .precio small { font-size: var(--fs-xs); font-weight: var(--fw-regular); color: var(--text-muted); }
.plan-tarjeta ul { margin: 0; padding-left: var(--sp-5); color: var(--text-muted); font-size: var(--fs-xs); }
.plan-tarjeta .pie { justify-content: stretch; flex-direction: column; }
.banco { white-space: pre-wrap; background: var(--surface-2); padding: var(--sp-3); border-radius: var(--radius-md); font-size: var(--fs-xs); }
/* asistente de primer uso */
.asistente { border-color: var(--accent); }
.pasos { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-3); counter-reset: paso; }
.paso { display: grid; grid-template-columns: 2.25rem 1fr auto; gap: var(--sp-3); align-items: center; }
.paso .n { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-full); border: var(--border-w) solid var(--border-strong); font-weight: var(--fw-bold); }
.paso[data-hecho="1"] .n { background: var(--success); border-color: var(--success); color: #fff; }
.paso[data-hecho="1"] .t { color: var(--text-muted); text-decoration: line-through; }
@media (max-width: 48rem) { .paso { grid-template-columns: 2.25rem 1fr; } .paso .btn { grid-column: 2; } .uso-fila { grid-template-columns: 6rem 1fr auto; } }