/* ==================================================================================================
   Familia «Hoy, Sistema y Acceso» (rediseño 2026-10-23, Figma página 16 · F15). Se carga con
   `{% block page_css %}` desde ui/*.html, registration/login.html e idempotency_conflict.html, después
   de app.css y desktop.css: a igual especificidad gana esta hoja. Sólo tokens (`var(--…)`), sin hex,
   sin estilos inline. Componentes compartidos (encabezado, pestañas, vacío, alertas): app.css.
   ================================================================================================== */

/* --- Acciones de pie de tarjeta/formulario: a lo ancho en el teléfono, a la derecha desde 900 ------ */
.hsa-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.hsa-actions .btn { flex: 1 1 0; }

/* Etiqueta de grupo dentro de una tarjeta («CUENTAS», Figma Etiqueta/Grupo). */
.hsa-label {
  margin: 18px 0 4px; color: var(--text-muted); font: 600 0.72rem var(--font-ui);
  letter-spacing: 0.1em; text-transform: uppercase;
}

/* --- Hoy (`body.page-dashboard`, Figma 27:43 / 27:527) -------------------------------------------- */
/* Aviso de datos faltantes: texto a lo ancho, «Completar ahora» a la derecha en la misma línea. */
.hsa-setup { flex-wrap: nowrap; gap: 12px; }
.hsa-setup__text { flex: 1 1 auto; min-width: 0; }
.hsa-setup__action { display: inline-flex; align-items: center; flex: 0 0 auto; font-weight: 600; text-decoration: none; padding-inline: 8px; }
.hsa-setup__action:hover { text-decoration: underline; }

/* Badge debajo del detalle de la fila («Pedido web», «Vencido», «N en presupuestos»). */
.hsa-row__badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
/* Stock negativo: en color peligro (Figma «Stock −4»). */
.page-dashboard .hsa-neg { color: var(--danger); }

/* Vacíos dentro de las tarjetas: una línea silenciosa (decisión del lead, no `.empty`). */
.page-dashboard .card > p.muted:not(.small) { margin: 0; }

/* Pedidos web: los dos botones reparten el renglón en el teléfono (44 px). */
.page-dashboard .row--web .actions { gap: 8px; width: 100%; }
.page-dashboard .row--web .actions > * { flex: 1 1 0; min-width: 0; }
.page-dashboard .row--web .actions form .btn { width: 100%; }
/* Presupuestos abiertos: «Cobrar» (secundario) en su propio renglón a lo ancho en el teléfono. */
.hsa-row--quote { flex-wrap: wrap; }
.hsa-row--quote > .btn { flex: 1 0 100%; }

@media (max-width: 899px) {
  /* El importe acompaña al nombre (primera línea), no al centro de un bloque de tres líneas. */
  .page-dashboard .row__amount { align-self: flex-start; }
  /* KPI en 2 × 2: valor 20 px a 390 (Figma) sin desbordar a 320. */
  .page-dashboard .metric__value { font-size: clamp(1rem, 5.2vw, 1.25rem); }
}

@media (min-width: 900px) {
  .hsa-actions { justify-content: flex-end; }
  .hsa-actions .btn { flex: 0 0 auto; }

  .page-dashboard .page-heading { align-items: flex-end; }
  .page-dashboard .hsa-setup { padding-block: 10px; }
  .hsa-setup__action { min-height: 34px; font-size: 13px; }

  /* Filas del tablero con la tipografía de Figma (Título/Fila y Número/Fila 13 px) en las dos columnas. */
  .page-dashboard .dashboard-grid .row__amount,
  .page-dashboard .dashboard-secondary .row__title,
  .page-dashboard .dashboard-secondary .row__amount { font-size: 13px; }
  .page-dashboard .dashboard-secondary .card { background: var(--surface); }
  .page-dashboard .dashboard-grid .row__side { min-width: 120px; justify-content: flex-end; }

  /* Pedidos web: datos arriba, acciones en su propio renglón (Figma 27:43). La primaria es la de
     siempre (vino lleno) y los botones van a 13 px como el resto del escritorio (SPEC §4). */
  .page-dashboard .row--web .actions { width: auto; margin-top: 0; }
  .page-dashboard .row--web .actions > * { flex: 0 0 auto; }
  .page-dashboard .row--web .actions form .btn { width: auto; }

  /* «Cobrar»: botón compacto a la derecha del importe. */
  .hsa-row--quote { flex-wrap: nowrap; }
  .hsa-row--quote > .btn { flex: 0 0 auto; min-height: 34px; padding: 6px 12px; }

  /* «Ver todos»: botón secundario a lo ancho de la tarjeta (Figma), no un enlace con flecha. */
  .page-dashboard .dashboard-more {
    width: 100%; justify-content: center; margin-top: 12px; padding: 8px 13px; min-height: 38px;
    border: 1px solid var(--border); background: var(--surface); color: var(--text);
  }
  .page-dashboard .dashboard-more::after { content: none; }
  .page-dashboard .dashboard-more:hover { background: var(--surface-hover); border-color: var(--border-strong); text-decoration: none; }
}

@media (min-width: 1200px) {
  /* desktop.css pone la fila web en una sola línea con botones de 11 px y la primaria en tinte: Figma
     la dibuja en dos renglones con los botones de siempre. */
  .page-dashboard .dashboard-primary .row--web { display: flex; gap: 8px 20px; }
  .page-dashboard .dashboard-primary .row--web .actions { flex: 1 0 100%; flex-wrap: wrap; gap: 8px; }
  .page-dashboard .dashboard-primary .row--web .btn { font-size: 13px; padding-inline: 16px; }
  .page-dashboard .dashboard-grid .row .btn--primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
  .page-dashboard .dashboard-grid .row .btn--primary:hover { background: var(--primary-hover); }
  .page-dashboard .metric__value { font-size: clamp(18px, 1.8vw, 26px); }
}

/* --- Configuración (Figma 31:22738 / 31:23265) ------------------------------------------------------ */
/* Ayuda de la plantilla: un recuadro aparte, no cuatro renglones sueltos. */
.hsa-note {
  display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; padding: 12px;
  background: var(--surface-subtle); border: 1px solid var(--border); border-radius: 7px;
}
.hsa-note > p { margin: 0; }

@media (min-width: 900px) {
  /* Datos del negocio: dos columnas; a lo ancho los textos largos, las casillas, el logo, la ayuda,
     los errores generales y la fila de acciones. Email queda solo en su fila, como en Figma. */
  .hsa-settings-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; align-items: start; }
  .hsa-settings-form > :is(.alert, .checks, .hsa-note, .hsa-actions),
  .hsa-settings-form > .field:has(textarea, input[type="file"]) { grid-column: 1 / -1; }
  .hsa-settings-form > .checks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 16px; }
  .hsa-settings-form > .checks > :is(legend, .muted, .field__err) { grid-column: 1 / -1; }
  .hsa-settings-form > .checks > legend { float: left; width: 100%; }
  .hsa-settings-form > .checks .field--check { min-height: 40px; }

  /* Cuenta: Nombre | Tipo (240) | Activa (140) en una fila, alineados abajo. */
  .hsa-account-form { display: grid; grid-template-columns: minmax(0, 1fr) 240px 140px; column-gap: 16px; align-items: end; }
  .hsa-account-form > :is(.alert, .hsa-actions) { grid-column: 1 / -1; }
  .hsa-account-form > .field { margin-bottom: 14px; }
  .hsa-account-form > .field--check { min-height: 40px; }

  /* Usuarios: campos de hasta 460 px. */
  .hsa-password-form > .field { max-width: 460px; }
}

/* Casillas de los formularios de Configuración: marcadas en vino (Figma «Casilla»), casilla antes del texto. */
:is(.hsa-settings-form, .hsa-account-form) .field--check input { accent-color: var(--primary); }
.hsa-account-form .field--check > input { order: -1; }
.hsa-account-form .field--check > .field__label { margin: 0; }

/* --- Numeración (Figma 31:23974 / 31:24273) ---------------------------------------------------------- */
.hsa-sequences__head { display: none; }
.hsa-row-errors { display: block; }
/* Teléfono: el campo y «Guardar» en la misma línea (Figma 31:24273 «Campo y acción»). */
@media (max-width: 899px) {
  .hsa-sequences > .row--stack > form { align-self: stretch; flex-wrap: nowrap; align-items: flex-end; margin: 0; }
  .hsa-sequences .toolbar .field--grow { flex: 1 1 auto; min-width: 0; }
  .hsa-sequences .toolbar .btn { flex: 0 0 auto; }
}
@media (min-width: 900px) {
  /* Tabla Serie | Próximo número (160) | Guardar (110): el form ocupa las dos columnas de la derecha. */
  .hsa-sequences > .row { display: grid; grid-template-columns: minmax(0, 1fr) 286px; align-items: center; gap: 16px; }
  .hsa-sequences > .hsa-sequences__head {
    display: grid; min-height: 0; padding: 8px 0; color: var(--text-muted); font-size: 12px; font-weight: 500;
    grid-template-columns: minmax(0, 1fr) 160px 110px;
  }
  .hsa-sequences .toolbar { display: grid; grid-template-columns: 160px 110px; gap: 16px; align-items: start; margin: 0; }
  .hsa-sequences .toolbar .field { margin: 0; }
  .hsa-sequences .toolbar .field__label {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .hsa-sequences .toolbar input[type="number"] { text-align: right; font-variant-numeric: tabular-nums; }
  .hsa-sequences .toolbar .btn { justify-self: end; align-self: start; min-height: 34px; padding: 6px 12px; margin-top: 2px; }
}

/* --- Usuarios: «Cerrar todas las sesiones» a lo ancho en el teléfono, a la izquierda en escritorio -- */
.hsa-sessions-form .btn { width: 100%; }
@media (min-width: 900px) { .hsa-sessions-form .btn { width: auto; } }

/* --- Sin conexión y conflicto 409: tarjeta angosta con la salida a la derecha ----------------------- */
.hsa-narrow > p { margin-top: 0; }
.hsa-narrow > .alert { margin-bottom: 14px; }
@media (min-width: 900px) { .hsa-narrow { max-width: 640px; } }

/* --- Entrar (Figma 31:24729 / 31:24766 / R22 31:24803) --------------------------------------------- */
.card--auth { margin-top: 20px; }
.card--auth .alert p { margin: 0; font-weight: 600; }
.card--auth .field--check input { accent-color: var(--primary); }
@media (min-width: 900px) { .card--auth { margin-top: 32px; padding: 20px; } }