/* ==========================================================================
   ParFer Confecciones — Hoja de estilos del sistema
   Es el diseño de la maqueta del equipo de front (repo Parfer-confecciones,
   frontend/assets/css/estilos.css) adaptado a las vistas Blade de este repo.
   Reemplaza a Bootstrap: el layout la carga y no hace falta otra hoja.

   Secciones:
     1. Tokens de diseño (claro y oscuro)
     2. Reset y base
     3. Layout (sidebar, topbar, contenido)
     4. Componentes
     5. Módulos (KPI, tablas, pedidos, clientes, producción, reportes, config)
     6. Modales
     7. Inicio de sesión
     8. Responsive
     9. Foco visible
    10. Panel "Hoy"
    11. Estados de carga y error
    12. Adaptación a las pantallas de este repo (encabezados, paginación,
        formularios en grilla, renglones del pedido, historial, fichas…)

   Del 1 al 11 es el diseño original con dos cambios: las etiquetas de estado
   usan los estados de este backend (sección 4) y se quitaron las piezas del
   balanceo con HAProxy, que acá no existe. Lo nuevo está todo en la 12.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS DE DISEÑO
   ========================================================================== */
:root{
  --bg: #EAF1FA;
  --surface: #FFFFFF;
  --surface-2: #F3F8FD;
  --text: #0B1F3A;
  --text-muted: #4C6382;
  --border: #CFDFF1;
  --primary: #1F4E8C;
  --primary-dark: #123A6B;
  --primary-light: #3E77B5;
  --primary-tint: #DCE9F8;
  --accent: #B9872E;

  /* Estados de pedido — texto y su fondo.
     Todos verificados con contraste >= 4.5:1 (WCAG AA). */
  --e-presupuesto:      #4A5565;  --e-presupuesto-bg: #E8EAEE;
  --e-confirmado:       #17549B;  --e-confirmado-bg:  #DCE9F8;
  --e-corte:            #5B3BAF;  --e-corte-bg:       #E8E2F8;
  --e-confeccion:       #7A5310;  --e-confeccion-bg:  #F5EBD6;
  --e-calidad:          #8A4A12;  --e-calidad-bg:     #F7E8DA;
  --e-listo:            #1A6353;  --e-listo-bg:       #DCEFE9;
  --e-entregado:        #14563B;  --e-entregado-bg:   #DDEFE4;
  --e-atrasado:         #93302A;  --e-atrasado-bg:    #F6E2E0;

  --ok: #1A6353;
  --danger: #93302A;
  --danger-tint: #F6E2E0;

  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 16px;
  --shadow: 0 1px 2px rgba(11,31,58,.06), 0 6px 20px rgba(11,31,58,.06);

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --sidebar-w: 248px;
  --header-h: 68px;
}

[data-theme="dark"]{
  --bg: #0A1830;
  --surface: #112445;
  --surface-2: #0E1F3B;
  --text: #EAF1FA;
  --text-muted: #97B0D2;
  --border: #1E3A63;
  --primary: #5B9BD9;
  --primary-dark: #3E77B5;
  --primary-light: #8FB8E0;
  --primary-tint: #16305A;
  --accent: #D9AF61;

  --e-presupuesto:      #B6C0CE;  --e-presupuesto-bg: #232C3A;
  --e-confirmado:       #8FB8E0;  --e-confirmado-bg:  #16305A;
  --e-corte:            #BFA8F0;  --e-corte-bg:       #2A2150;
  --e-confeccion:       #D9AF61;  --e-confeccion-bg:  #3A2F14;
  --e-calidad:          #E0A878;  --e-calidad-bg:     #3D2A18;
  --e-listo:            #5FB39D;  --e-listo-bg:       #123527;
  --e-entregado:        #6FC49A;  --e-entregado-bg:   #0F3323;
  --e-atrasado:         #DE8B83;  --e-atrasado-bg:    #3A1917;

  --ok: #5FB39D;
  --danger: #DE8B83;
  --danger-tint: #3A1917;
  --shadow: 0 1px 2px rgba(0,0,0,.25), 0 10px 24px rgba(0,0,0,.35);
}

/* ==========================================================================
   2. RESET Y BASE
   ========================================================================== */
*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  transition: background .2s ease, color .2s ease;
}
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}
h1,h2,h3{ font-family: var(--font-display); margin: 0; font-weight: 600; }
p{ margin: 0; }
button{ font-family: inherit; }
:focus-visible{ outline: 2px solid var(--primary-light); outline-offset: 2px; border-radius: 4px; }

/* motivo recurrente: "puntada" — línea discontinua tipo hilván */
.stitch{ border: none; border-top: 1.5px dashed var(--border); margin: 0; }

/* solo para lectores de pantalla */
.sr-only{
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* primer elemento tabulable de la página */
.skip-link{
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--primary); color: #fff;
  padding: 10px 16px; border-radius: 0 0 var(--radius-m) 0;
  font-size: 13.5px; font-weight: 600;
}
.skip-link:focus{ left: 0; }

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */
.app{ min-height: 100vh; }

/* evita el parpadeo de las plantillas antes de que arranque Alpine */
[x-cloak]{ display: none !important; }

/* ---------- Sidebar ---------- */
.sidebar{
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: fixed;
  top: 0; left: 0;
  width: var(--sidebar-w);
  height: 100vh;
  z-index: 30;
}
.brand{ display: flex; align-items: center; gap: 10px; padding: 4px 6px 12px; }
.brand-mark{
  width: 34px; height: 34px;
  border-radius: 9px;
  background: linear-gradient(160deg, var(--primary), var(--primary-dark));
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.brand-mark svg{ width: 18px; height: 18px; }
.brand-text h1{ font-size: 16px; line-height: 1.15; }
.brand-text span{ font-size: 11.5px; color: var(--text-muted); }

.nav{ display: flex; flex-direction: column; gap: 2px; margin-top: 4px; overflow-y: auto; }
.nav-label{
  font-size: 11px;
  color: var(--text-muted);
  padding: 14px 12px 4px;
  font-weight: 600;
}
.nav-btn{
  all: unset;
  cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-s);
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
}
.nav-btn svg{ width: 17px; height: 17px; flex-shrink: 0; color: var(--text-muted); }
.nav-btn:hover{ background: var(--surface-2); }
.nav-btn[aria-current="page"]{ background: var(--primary-tint); color: var(--primary-dark); font-weight: 600; }
[data-theme="dark"] .nav-btn[aria-current="page"]{ color: var(--primary-light); }
.nav-btn[aria-current="page"] svg{ color: currentColor; }
.nav-count{
  margin-left: auto;
  background: var(--primary);
  color: #fff;
  font-size: 11px; font-weight: 700;
  min-width: 20px; text-align: center;
  padding: 1px 6px;
  border-radius: 100px;
}

.sidebar-foot{ margin-top: auto; padding-top: 14px; }
.user-chip{
  display: flex; align-items: center; gap: 9px;
  padding: 8px;
  border-radius: var(--radius-m);
  background: var(--surface-2);
}
.avatar{
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--primary-light); color: #fff;
  font-size: 12.5px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.user-chip .who{ line-height: 1.15; flex: 1; min-width: 0; }
.user-chip .who p{ font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chip .who span{ font-size: 11.5px; color: var(--text-muted); }
.logout-btn{
  all: unset; cursor: pointer;
  width: 26px; height: 26px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-s);
  color: var(--text-muted);
}
.logout-btn:hover{ background: var(--danger-tint); color: var(--danger); }
.logout-btn svg{ width: 15px; height: 15px; }

/* fondo oscuro detrás de la sidebar en móvil */
.sidebar-backdrop{
  position: fixed; inset: 0;
  background: rgba(11,31,58,.45);
  z-index: 25;
}

/* ---------- Topbar ---------- */
.main{ display: flex; flex-direction: column; min-width: 0; margin-left: var(--sidebar-w); }
.topbar{
  min-height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 0 28px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 20;
}
.topbar-left{ display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar-title p.eyebrow{ font-size: 12px; color: var(--text-muted); margin-bottom: 2px; }
.topbar-title h2{ font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-actions{ display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.icon-btn{
  all: unset;
  cursor: pointer;
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
  color: var(--text-muted);
  flex-shrink: 0;
}
.icon-btn:hover{ background: var(--surface-2); color: var(--text); }
.icon-btn svg{ width: 18px; height: 18px; }
.theme-toggle .sun{ display: none; }
[data-theme="dark"] .theme-toggle .moon{ display: none; }
[data-theme="dark"] .theme-toggle .sun{ display: block; }

/* botón hamburguesa: solo en móvil */
.menu-btn{ display: none; }

/* ---------- Contenido ---------- */
.content{ padding: 26px 28px 60px; flex: 1; }

.section-head{ margin-bottom: 18px; }
.section-head h2{ font-size: 22px; }
.section-head p{ color: var(--text-muted); font-size: 13.5px; margin-top: 4px; }

/* ==========================================================================
   4. COMPONENTES
   ========================================================================== */
.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow);
}
.card-head{
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 18px 20px 4px;
}
.card-head h3{ font-size: 15px; }
.card-head span{ font-size: 12px; color: var(--text-muted); }

/* --- Botones --- */
.btn-primary{
  all: unset; cursor: pointer;
  background: var(--primary); color: #fff;
  font-size: 13.5px; font-weight: 600;
  padding: 9px 16px;
  border-radius: var(--radius-s);
  text-align: center;
  white-space: nowrap;
}
.btn-primary:hover{ background: var(--primary-dark); }
[data-theme="dark"] .btn-primary{ color: #08172E; }

.btn-ghost{
  all: unset; cursor: pointer;
  font-size: 13.5px; font-weight: 600;
  padding: 9px 16px;
  border-radius: var(--radius-s);
  color: var(--text-muted);
  text-align: center;
}
.btn-ghost:hover{ background: var(--surface-2); }

.btn-outline{
  all: unset; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border);
  font-size: 13px; font-weight: 600;
  padding: 9px 14px;
  border-radius: var(--radius-s);
}
.btn-outline:hover{ background: var(--primary-tint); }
.btn-outline svg{ width: 15px; height: 15px; }

.btn-mini{
  all: unset; cursor: pointer;
  font-size: 12px; font-weight: 600;
  color: var(--primary-dark);
  padding: 4px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  white-space: nowrap;
}
[data-theme="dark"] .btn-mini{ color: var(--primary-light); }
.btn-mini:hover{ background: var(--primary-tint); }

/* --- Etiquetas de estado ---
   Una clase por cada valor de "estado" que devuelve la API (EstadoPedido).
   En el diseño original "En producción" estaba dividido en corte, confección
   y calidad; acá es una sola etapa y toma el color de "confección".
   Cancelado se ve como "anulado" en el diseño: gris, porque ya no pide nada.
   El rojo queda reservado para lo atrasado. */
.tag{
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600;
  padding: 3px 9px;
  border-radius: 100px;
  white-space: nowrap;
}
.tag::before{ content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.tag.presupuesto  { background: var(--e-presupuesto-bg); color: var(--e-presupuesto); }
.tag.confirmado   { background: var(--e-confirmado-bg);  color: var(--e-confirmado); }
.tag.en_produccion{ background: var(--e-confeccion-bg);  color: var(--e-confeccion); }
.tag.listo        { background: var(--e-listo-bg);       color: var(--e-listo); }
.tag.entregado    { background: var(--e-entregado-bg);   color: var(--e-entregado); }
.tag.cancelado    { background: var(--e-presupuesto-bg); color: var(--e-presupuesto); }
.tag.atrasado     { background: var(--e-atrasado-bg);    color: var(--e-atrasado); }
.tag.tipo       { background: var(--surface-2); color: var(--text-muted); }
.tag.tipo::before{ display: none; }

/* --- Barra de progreso --- */
.progress{
  width: 90px; height: 6px; border-radius: 100px;
  background: var(--border);
  overflow: hidden;
}
.progress > i{ display: block; height: 100%; background: var(--primary); }

/* --- Barra de herramientas y buscador --- */
.toolbar{
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  gap: 12px;
  flex-wrap: wrap;
}
.search{
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  padding: 8px 12px;
  flex: 1; min-width: 180px; max-width: 300px;
}
.search svg{ width: 15px; height: 15px; color: var(--text-muted); flex-shrink: 0; }
.search input{
  border: none; background: transparent; outline: none;
  font-size: 13.5px; color: var(--text); width: 100%;
  font-family: inherit;
}
.filtros{ display: flex; gap: 6px; flex-wrap: wrap; }
.filtro{
  all: unset; cursor: pointer;
  padding: 6px 13px;
  font-size: 12.5px; font-weight: 600;
  border-radius: 100px;
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.filtro[aria-pressed="true"]{ background: var(--primary); color: #fff; border-color: var(--primary); }
[data-theme="dark"] .filtro[aria-pressed="true"]{ color: #08172E; }

/* --- Tablas --- */
/* position: relative hace que los textos .sr-only (que son position:absolute)
   queden recortados por el scroll de la tabla. Sin esto, en el celular se
   escapaban y agrandaban la página entera, generando scroll horizontal. */
.table-wrap{ overflow-x: auto; position: relative; }
table{ width: 100%; border-collapse: collapse; font-size: 13.5px; }
thead th{
  text-align: left;
  font-size: 11.5px;
  color: var(--text-muted);
  font-weight: 600;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
tbody td{
  padding: 13px 20px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  white-space: nowrap;
}
tbody tr:last-child td{ border-bottom: none; }
tbody tr:hover{ background: var(--surface-2); }
.cell-strong{ font-weight: 600; }
.cell-muted{ color: var(--text-muted); }
.cell-num{ text-align: right; font-variant-numeric: tabular-nums; }
th.cell-num{ text-align: right; }

/* --- Estado vacío --- */
.empty{
  padding: 40px 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13.5px;
}
.empty strong{ display: block; color: var(--text); font-size: 15px; margin-bottom: 6px; font-family: var(--font-display); }

/* ==========================================================================
   5. MÓDULOS
   ========================================================================== */

/* --- KPIs --- */
.kpi-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
.kpi{ padding: 18px; }
.kpi .label{ font-size: 12.5px; color: var(--text-muted); font-weight: 500; }
.kpi .value{ font-family: var(--font-display); font-size: 28px; margin: 6px 0 4px; font-variant-numeric: tabular-nums; }
.kpi .delta{ font-size: 12px; font-weight: 600; }
.kpi .delta.up{ color: var(--ok); }
.kpi .delta.down{ color: var(--danger); }

/* --- Grilla del panel --- */
.dash-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

/* --- Gráfico de barras --- */
.bars{
  display: flex; align-items: flex-end; gap: 10px;
  height: 150px;
  padding: 16px 20px 8px;
}
.bar-col{ flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.bar{
  width: 100%; max-width: 26px;
  border-radius: 5px 5px 2px 2px;
  background: linear-gradient(180deg, var(--primary-light), var(--primary));
}
.bar-col span{ font-size: 11px; color: var(--text-muted); }

/* --- Lista de filas (próximas entregas) --- */
.stat-list{ padding: 6px 8px 14px; }
.stat-row{
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-s);
}
.stat-row:hover{ background: var(--surface-2); }
.stat-row .name{ font-size: 13.5px; font-weight: 500; }
.stat-row .sub{ font-size: 11.5px; color: var(--text-muted); }

/* --- Ficha de cliente / detalle de pedido --- */
.detalle-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px 20px;
  padding: 4px 0 8px;
}
.dato .k{ font-size: 11.5px; color: var(--text-muted); font-weight: 600; }
.dato .v{ font-size: 14px; margin-top: 2px; }

.medidas-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.medida{
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  padding: 9px 11px;
}
.medida .k{ font-size: 11px; color: var(--text-muted); font-weight: 600; }
.medida .v{ font-size: 15px; font-family: var(--font-display); margin-top: 2px; }

/* --- Tablero de producción --- */
.tablero{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}
.columna{ background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-m); padding: 12px; }
.columna h3{ font-size: 13.5px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.columna h3 .cuenta{ font-family: var(--font-body); font-size: 11.5px; color: var(--text-muted); font-weight: 600; }
.tarjeta-op{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  padding: 11px 12px;
  margin-bottom: 9px;
}
.tarjeta-op:last-child{ margin-bottom: 0; }
.tarjeta-op .cod{ font-size: 11.5px; color: var(--text-muted); font-weight: 600; }
.tarjeta-op .tit{ font-size: 13.5px; font-weight: 600; margin: 2px 0 7px; }
.tarjeta-op .pie{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; margin-top: 8px; }
/* en columnas angostas el botón baja de renglón en vez de salirse de la tarjeta */
.tarjeta-op .pie .btn-mini{ margin-left: auto; }
.tarjeta-op .pie small{ font-size: 11px; color: var(--text-muted); }

/* --- Reportes --- */
.report-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.report-card{ padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.report-card .top{ display: flex; align-items: flex-start; gap: 12px; }
.report-icon{
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: var(--radius-s);
  background: var(--primary-tint);
  color: var(--primary-dark);
  display: flex; align-items: center; justify-content: center;
}
[data-theme="dark"] .report-icon{ color: var(--primary-light); }
.report-icon svg{ width: 19px; height: 19px; }
.report-card h3{ font-size: 15px; }
.report-card p{ font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.report-meta{ font-size: 12px; color: var(--text-muted); }
.report-meta strong{ color: var(--text); font-weight: 600; }
.report-actions{ display: flex; gap: 8px; margin-top: auto; }
.report-actions > *{ flex: 1; }
.report-subtitle{ font-size: 12.5px; font-weight: 600; color: var(--text-muted); padding: 12px 16px 4px; }

/* --- Configuración --- */
.config-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.config-card{ padding: 20px; }
.config-card .top{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.config-card h3{ font-size: 15px; }
.config-card p{ font-size: 13px; color: var(--text-muted); margin-top: 4px; line-height: 1.5; }
.soon{
  font-size: 10.5px; font-weight: 600;
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 3px 8px;
  border-radius: 100px;
  white-space: nowrap;
}
.switch-row{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; }
.switch-row .lbl{ font-size: 13.5px; font-weight: 500; }
.switch-row .lbl small{ display: block; font-size: 11.5px; color: var(--text-muted); font-weight: 400; margin-top: 2px; }
.switch{
  position: relative;
  width: 42px; height: 24px;
  background: var(--border);
  border-radius: 100px;
  cursor: pointer; flex-shrink: 0;
  border: none; padding: 0;
}
.switch i{
  position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff;
  transition: transform .18s ease;
}
.switch.on{ background: var(--primary); }
.switch.on i{ transform: translateX(18px); }

.theme-options{ display: flex; gap: 8px; margin-top: 12px; }
.theme-opt{
  all: unset; cursor: pointer;
  flex: 1; text-align: center;
  padding: 10px 8px;
  border-radius: var(--radius-s);
  border: 1.5px solid var(--border);
  font-size: 12.5px; font-weight: 500;
}
.theme-opt[aria-pressed="true"]{ border-color: var(--primary); color: var(--primary-dark); background: var(--primary-tint); }
[data-theme="dark"] .theme-opt[aria-pressed="true"]{ color: var(--primary-light); }

/* ==========================================================================
   6. MODALES
   ========================================================================== */
.modal-overlay{
  display: flex;
  position: fixed; inset: 0;
  background: rgba(11,31,58,.45);
  align-items: center; justify-content: center;
  z-index: 50;
  padding: 16px;
}
.modal{
  background: var(--surface);
  border-radius: var(--radius-l);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  width: 100%; max-width: 460px;
  max-height: 92vh;
  overflow-y: auto;
  padding: 22px 24px 24px;
}
.modal-lg{ max-width: 780px; }
.modal-head{ display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.modal-head h3{ font-size: 17px; }
.modal-close{
  all: unset; cursor: pointer; color: var(--text-muted);
  width: 26px; height: 26px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.modal-close:hover{ background: var(--surface-2); }
.modal-body{ border: 1px solid var(--border); border-radius: var(--radius-m); overflow: auto; max-height: 55vh; }
.modal-body thead th{ position: sticky; top: 0; background: var(--surface-2); }

.field{ margin-bottom: 13px; }
.field label{ display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 5px; color: var(--text-muted); }
.field input, .field select, .field textarea{
  width: 100%;
  font-family: inherit; font-size: 13.5px; color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  padding: 9px 11px;
}
.field textarea{ resize: vertical; min-height: 64px; }
.field input:focus, .field select:focus, .field textarea:focus{ outline: 2px solid var(--primary-light); outline-offset: 1px; }
.field-row{ display: flex; gap: 10px; }
.field-row .field{ flex: 1; min-width: 0; }
.field-error{ font-size: 11.5px; color: var(--danger); margin-top: 4px; display: none; }
.field.invalid input, .field.invalid select, .field.invalid textarea{ border-color: var(--danger); }
.field.invalid .field-error{ display: block; }
/* el bloque de prendas del pedido también marca su error (antes quedaba oculto) */
.lineas.invalid{ border-color: var(--danger); }
.lineas.invalid > .field-error{ display: block; margin-top: 8px; }
.modal-actions{ display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; flex-wrap: wrap; }

/* líneas del pedido dentro del modal */
.lineas{ border: 1px solid var(--border); border-radius: var(--radius-s); padding: 10px; margin-bottom: 13px; }
.lineas-head{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.lineas-head .k{ font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.linea{ display: grid; grid-template-columns: 1fr 70px 80px 100px 28px; gap: 7px; align-items: center; margin-bottom: 7px; }
.linea input, .linea select{
  font-family: inherit; font-size: 12.5px; color: var(--text); width: 100%;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-s); padding: 7px 8px;
}
.linea-del{
  all: unset; cursor: pointer; text-align: center;
  color: var(--text-muted); border-radius: var(--radius-s);
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
}
.linea-del:hover{ background: var(--danger-tint); color: var(--danger); }
.lineas-total{ display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; padding-top: 8px; border-top: 1px dashed var(--border); }

/* aviso dentro de un modal o vista */
.aviso{
  font-size: 12.5px;
  background: var(--surface-2);
  border: 1px dashed var(--border);
  border-radius: var(--radius-s);
  padding: 9px 11px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

/* ==========================================================================
   7. INICIO DE SESIÓN
   ========================================================================== */
.login-screen{
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  padding: 20px;
}
.login-card{
  width: 100%; max-width: 380px;
  padding: 32px 30px 28px;
  text-align: center;
}
.login-card .brand-mark{ margin: 0 auto 14px; }
.login-card h2{ font-size: 21px; margin-bottom: 4px; }
.login-card > p{ font-size: 13.5px; color: var(--text-muted); margin-bottom: 22px; }
.login-card form{ text-align: left; }
/* sin display:none acá: lo maneja x-show. Con display:none en el CSS,
   x-show no lograba mostrarlo y el error del login nunca aparecía. */
.login-error{
  font-size: 12.5px; color: var(--danger);
  background: var(--danger-tint);
  border-radius: var(--radius-s);
  padding: 8px 11px;
  margin-bottom: 14px;
}
.login-error.show{ display: block; }
.login-hint{
  margin-top: 16px;
  font-size: 11.5px; color: var(--text-muted);
  border-top: 1px dashed var(--border);
  padding-top: 12px;
}
.login-card .btn-primary{ display: block; width: 100%; padding: 10px; margin-top: 4px; }

/* ==========================================================================
   8. RESPONSIVE
   Tres cortes: 1100px (tablet ancha), 860px (tablet/móvil) y 560px (móvil).
   ========================================================================== */
@media (max-width: 1240px){
  .tablero{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1100px){
  .kpi-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-grid{ grid-template-columns: minmax(0, 1fr); }
  .report-grid,
  .config-grid{ grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px){
  /* La sidebar sale del flujo y se abre con el botón hamburguesa */
  .sidebar{
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: none;
  }
  .sidebar.abierta{ transform: translateX(0); box-shadow: 0 0 40px rgba(11,31,58,.25); }

  .main{ margin-left: 0; }
  .menu-btn{ display: flex; }
  .content{ padding: 20px 16px 48px; }
  .topbar{ padding: 0 16px; }
  .section-head h2{ font-size: 19px; }
}

@media (max-width: 560px){
  .kpi-grid{ grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .tablero{ grid-template-columns: minmax(0, 1fr); }
  .toolbar{ flex-direction: column; align-items: stretch; }
  .search{ max-width: none; }
  .toolbar .btn-primary{ width: 100%; }
  .field-row{ flex-direction: column; gap: 0; }
  .linea{ grid-template-columns: 1fr 1fr; }
  .modal-actions{ flex-direction: column-reverse; }
  .modal-actions > *{ width: 100%; }
  .report-actions{ flex-direction: column; }
  .topbar-title p.eyebrow{ display: none; }
}

/* ==========================================================================
   9. FOCO VISIBLE — corrección
   Los botones usan "all: unset", que también borraba el contorno de foco
   del teclado: quien navega con Tab no veía dónde estaba parado.
   Este selector tiene más especificidad (0,1,1) que ".nav-btn" (0,1,0),
   así que el contorno vuelve a aparecer en todos los elementos.
   ========================================================================== */
body :focus-visible{
  outline: 2px solid var(--primary-light);
  outline-offset: 2px;
}

/* ==========================================================================
   10. PANEL "HOY"
   La pantalla de inicio muestra qué hacer, no solo cuántos hay.
   ========================================================================== */
.hoy-encabezado{
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
}
.hoy-encabezado .section-head{ margin-bottom: 0; }
.hoy-subtitulo{ color: var(--text); font-weight: 600; }
.btn-nuevo{ padding: 11px 18px; font-size: 14px; }

/* --- resumen en chico --- */
.resumen-strip{
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 0 18px; padding: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m);
  overflow: hidden;
}
.resumen-strip > div{
  display: flex; flex-direction: column-reverse;   /* el número arriba, la etiqueta abajo */
  padding: 11px 16px; border-right: 1px solid var(--border);
}
.resumen-strip > div:last-child{ border-right: none; }
.resumen-strip .n{ margin: 0; font-family: var(--font-display); font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.resumen-strip .t{ font-size: 12px; color: var(--text-muted); }

.hoy-grid{ display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.hoy-lateral{ display: flex; flex-direction: column; gap: 16px; }

/* --- lista de acciones --- */
.acciones{ list-style: none; margin: 0; padding: 8px 12px 12px; display: flex; flex-direction: column; gap: 10px; }
.accion{
  display: grid; grid-template-columns: 5px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  border: 1px solid var(--border); border-radius: var(--radius-m);
  padding: 13px 14px 13px 0; background: var(--surface);
}
.accion .barra{ align-self: stretch; border-radius: 0 4px 4px 0; }
.accion.urgente .barra{ background: var(--e-atrasado); }
.accion.hoy .barra{ background: var(--e-confeccion); }
.accion.listo .barra{ background: var(--e-listo); }
.accion.espera .barra{ background: var(--e-confirmado); }
.accion .linea1{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.accion .linea1 strong{ font-size: 14.5px; }
.accion .cod{ font-size: 12px; color: var(--text-muted); font-weight: 600; }
.accion .linea2{ font-size: 13px; color: var(--text-muted); margin-top: 3px; }
.accion .progress{ width: 160px; margin-top: 8px; }
.accion .botones{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.accion .btn-primary, .accion .btn-outline, .accion .btn-ghost, .accion .btn-danger{ padding: 8px 13px; font-size: 13px; }
.accion a.btn-outline{ text-decoration: none; }
.accion .confirmacion span{ font-size: 13px; font-weight: 600; }
.tag.pendiente{ background: var(--e-confirmado-bg); color: var(--e-confirmado); }

.btn-danger{
  all: unset; cursor: pointer;
  font-size: 13.5px; font-weight: 600;
  padding: 9px 16px;
  border-radius: var(--radius-s);
  color: var(--danger);
  border: 1px solid currentColor;
  text-align: center;
}
.btn-danger:hover{ background: var(--danger-tint); }

.todo-ok{
  margin: 2px 12px 14px; padding: 10px 12px;
  background: var(--e-listo-bg); color: var(--e-listo);
  border-radius: var(--radius-s); font-size: 13px; font-weight: 600;
}

/* --- agenda --- */
.agenda{ list-style: none; margin: 0; padding: 4px 16px 10px; }
.dia{ display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--border); }
.dia:last-child{ border-bottom: none; }
.dia .fecha{ text-align: center; align-self: start; padding: 3px 0; }
.dia .fecha .d{ font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); font-weight: 700; }
.dia .fecha .num{ font-family: var(--font-display); font-size: 22px; font-weight: 600; line-height: 1.1; }
.dia.hoy .fecha{ background: var(--primary); color: #fff; border-radius: var(--radius-s); }
.dia.hoy .fecha .d{ color: inherit; opacity: .9; }
[data-theme="dark"] .dia.hoy .fecha{ color: #08172E; }
.dia .items{ display: flex; flex-direction: column; gap: 6px; justify-content: center; min-width: 0; }
.dia .item{
  all: unset; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 13px; padding: 4px 6px; margin: 0 -6px; border-radius: var(--radius-s);
}
.dia .item:hover{ background: var(--surface-2); }
.dia .item b{ font-weight: 600; }
.dia .vacio{ font-size: 12.5px; color: var(--text-muted); align-self: flex-start; padding-top: 6px; }

/* --- carga del taller --- */
.carga{ padding: 4px 16px 16px; }
.carga-barra{ display: flex; height: 14px; border-radius: 100px; overflow: hidden; margin: 8px 0 10px; gap: 2px; background: var(--surface-2); }
.carga-barra span{ display: block; }
.leyenda{ display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--text-muted); }
.leyenda i{ display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }

/* --- aviso breve con "Deshacer" --- */
.toast-zona{
  position: fixed; right: 18px; bottom: 18px; z-index: 80;
  max-width: min(420px, calc(100vw - 36px));
}
.toast{
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--text); color: var(--surface);
  padding: 11px 14px 11px 16px; border-radius: var(--radius-m);
  box-shadow: var(--shadow); font-size: 13.5px;
}
.toast-accion{
  all: unset; cursor: pointer;
  font-weight: 700; font-size: 13px;
  color: var(--primary-tint);
  padding: 4px 8px; border-radius: var(--radius-s);
}
.toast-accion:hover{ background: rgba(255,255,255,.12); }

/* --- responsive del panel --- */
@media (max-width: 1100px){
  .hoy-grid{ grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px){
  .resumen-strip{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .resumen-strip > div:nth-child(2){ border-right: none; }
  .resumen-strip > div:nth-child(-n+2){ border-bottom: 1px solid var(--border); }
  .accion{ grid-template-columns: 5px minmax(0, 1fr); row-gap: 10px; }
  .accion .botones{ grid-column: 2; justify-content: flex-start; }
  .accion .progress{ width: 100%; }
  .btn-nuevo{ width: 100%; text-align: center; }
}
/* .dia .item usa "all: unset" con más especificidad que "body :focus-visible": se repone el contorno */
.dia .item:focus-visible{ outline: 2px solid var(--primary-light); outline-offset: 2px; }

/* ==========================================================================
   11. CONEXIÓN CON LA API
   Estados de carga y error y errores de validación del servidor.
   ========================================================================== */
.spinner{
  display: inline-block; width: 16px; height: 16px; flex-shrink: 0;
  border: 2px solid var(--primary-tint); border-top-color: var(--primary);
  border-radius: 50%;
  animation: girar .8s linear infinite;
}
@keyframes girar{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .spinner{ animation-duration: 2.4s; } }

.estado-carga{
  display: flex; align-items: center; gap: 10px;
  padding: 18px 20px; margin-bottom: 18px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-m); color: var(--text-muted); font-size: 14px;
}

.error-box{
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 16px 18px; margin-bottom: 18px;
  background: var(--danger-tint); color: var(--danger);
  border: 1px solid currentColor; border-radius: var(--radius-m);
  font-size: 14px;
}
.error-box strong{ display: block; margin-bottom: 2px; }

.error-form{
  background: var(--danger-tint); color: var(--danger);
  border-radius: var(--radius-s);
  padding: 10px 12px; margin-bottom: 14px;
  font-size: 13px;
}
.error-form ul{ margin: 4px 0 0; padding-left: 18px; }

.login-info{
  font-size: 12.5px; color: var(--primary-dark);
  background: var(--primary-tint);
  border-radius: var(--radius-s);
  padding: 8px 11px; margin-bottom: 14px;
}
[data-theme="dark"] .login-info{ color: var(--primary-light); }

.btn-primary:disabled, .btn-mini:disabled{ opacity: .6; cursor: progress; }

.toast.error{ background: var(--danger); color: #fff; }
[data-theme="dark"] .toast.error{ color: #1A0A09; }

/* ==========================================================================
   12. ADAPTACIÓN A LAS PANTALLAS DE ESTE REPO
   Lo que la maqueta no tenía y las vistas Blade necesitan: cada pantalla es
   una página con su URL (no una vista dentro de una sola página), hay
   paginación, formularios largos, historial del pedido y fichas de medidas.
   Usa solo los tokens de la sección 1: anda igual en tema claro y oscuro.
   ========================================================================== */

/* calendario, barras de desplazamiento y demás controles nativos en el tema activo */
:root{ color-scheme: light; }
[data-theme="dark"]{ color-scheme: dark; }

/* "ParFer Confecciones" es apenas más ancho que el nombre de la maqueta: así entra en una línea */
.brand-text h1{ font-size: 15.5px; }

/* --- Enlaces y textos ---
   Solo los enlaces de texto (sin clase). Los que tienen clase —botones como <a class="btn-primary">,
   el menú, las celdas del panel— usan sus propios colores: si no, al pasar el mouse el texto del
   botón tomaba el color de enlace, igual al de su fondo, y no se leía. */
a:not([class]){ color: var(--primary); text-underline-offset: 2px; }
a:not([class]):hover{ color: var(--primary-dark); }
[data-theme="dark"] a:not([class]):hover{ color: var(--primary-light); }
code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 6px;
}
.texto-muted{ color: var(--text-muted); }
.texto-peligro{ color: var(--danger); font-weight: 600; }
.texto-ok{ color: var(--ok); font-weight: 600; }
.chico{ font-size: 12.5px; }

/* --- Botones ---
   En la maqueta siempre estaban dentro de un contenedor flex. Acá también
   aparecen sueltos y como enlaces (<a href>), así que llevan su propio display. */
.btn-primary, .btn-ghost, .btn-danger, .btn-mini{
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.btn-outline{ display: inline-flex; }
/* "all: unset" también les quitaba el border-box: con width:100% (celular, login) se salían
   de la tarjeta por el ancho del relleno */
.btn-primary, .btn-ghost, .btn-danger, .btn-mini, .btn-outline{ box-sizing: border-box; }
.btn-outline:disabled, .btn-ghost:disabled, .btn-danger:disabled{ opacity: .5; cursor: default; }
/* en tema oscuro el texto del botón es oscuro: al pasar el mouse el fondo se aclara en vez de
   oscurecerse, así el contraste sube (de 3,8:1 a 8,6:1) en lugar de bajar */
[data-theme="dark"] .btn-primary:hover{ background: var(--primary-light); }
.btn-mini.peligro,
[data-theme="dark"] .btn-mini.peligro{ color: var(--danger); }
.btn-mini.peligro:hover{ background: var(--danger-tint); }
.btn-grande{ width: 100%; padding: 13px 16px; font-size: 15px; }   /* ~44 px de alto: cómodo con el pulgar */

/* --- Etiquetas que no son estados de pedido --- */
.tag.ok     { background: var(--e-entregado-bg);   color: var(--e-entregado); }
.tag.info   { background: var(--e-confirmado-bg);  color: var(--e-confirmado); }
.tag.alerta { background: var(--e-confeccion-bg);  color: var(--e-confeccion); }
.tag.peligro{ background: var(--e-atrasado-bg);    color: var(--e-atrasado); }
.tag.neutro { background: var(--e-presupuesto-bg); color: var(--e-presupuesto); }
/* marca las pantallas que usan mocks.js porque el endpoint todavía no existe */
.tag.ejemplo{
  background: var(--e-confeccion-bg); color: var(--e-confeccion);
  font-family: var(--font-body); font-size: 11px; vertical-align: middle;
}
.tag.ejemplo::before{ display: none; }
/* dentro de un título, la etiqueta conserva la letra del texto */
h2 .tag, h3 .tag{ font-family: var(--font-body); }
/* varias etiquetas juntas (estado + "Atrasado") */
.tags{ display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* --- Encabezado de página: título a la izquierda, acciones a la derecha --- */
.encabezado{
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.encabezado .section-head{ margin-bottom: 0; min-width: 0; }
.encabezado .section-head h2{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.encabezado-acciones{ display: flex; gap: 8px; flex-wrap: wrap; }
.volver{
  display: inline-block; margin-bottom: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--text-muted); text-decoration: none;
}
.volver:hover{ color: var(--primary); }

/* --- Distribución --- */
.pila{ display: flex; flex-direction: column; gap: 16px; }
.columnas{ display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 16px; align-items: start; }

/* --- Tarjetas: cuerpo, pie y encabezado con botón --- */
.card-body{ padding: 12px 20px 20px; }
.card-body.separado{ border-top: 1px solid var(--border); padding-top: 16px; }
.card-head.con-boton{ align-items: center; padding-bottom: 10px; }
.card .estado-carga{ border: none; background: none; margin: 0; }
.paginacion{
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 20px; border-top: 1px solid var(--border);
  font-size: 13px; color: var(--text-muted);
}

/* muchos filtros (pedidos): van en su propio renglón, debajo del buscador y el botón */
.toolbar .filtros.abajo{ order: 3; flex-basis: 100%; }

/* --- Tablas --- */
tbody tr.clicable{ cursor: pointer; }
td a:not([class]){ font-weight: 600; text-decoration: none; }
td a:not([class]):hover{ text-decoration: underline; }
td.cell-wrap{ white-space: normal; min-width: 180px; }
td .sub{ display: block; font-size: 11.5px; color: var(--text-muted); font-weight: 400; }
tfoot td{ padding: 13px 20px; border-top: 1px solid var(--border); font-weight: 600; }
tr.inactivo td{ color: var(--text-muted); }
.acciones-celda{ display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.persona{ display: flex; align-items: center; gap: 10px; }

/* --- Formularios --- */
.form-grid{
  display: grid; gap: 0 16px;
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
}
.form-grid .ancho{ grid-column: 1 / -1; }
.field .ayuda{ display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 4px; }
.field-check{
  display: flex; align-items: center; gap: 8px; min-height: 38px; margin-bottom: 13px;
  font-size: 13.5px; font-weight: 500; cursor: pointer;
}
.field-check input{ width: 16px; height: 16px; accent-color: var(--primary); }
.form-acciones{ display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 6px; }

/* confirmación en la misma pantalla, en vez de una ventana emergente */
.confirmar{
  display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap;
  padding: 12px 14px; margin-bottom: 16px;
  background: var(--danger-tint); color: var(--danger);
  border: 1px solid currentColor; border-radius: var(--radius-m);
  font-size: 13.5px; font-weight: 600;
}
.confirmar .botones{ display: flex; gap: 8px; flex-wrap: wrap; }

/* aviso amarillo: insumos por debajo del mínimo */
.aviso-atencion{
  padding: 12px 14px; margin-bottom: 16px;
  background: var(--e-confeccion-bg); color: var(--e-confeccion);
  border-radius: var(--radius-m); font-size: 13.5px;
}

/* --- Panel: el resumen en chico con enlaces y la lista de estados --- */
.resumen-strip > a{
  display: flex; flex-direction: column-reverse;   /* el número arriba, la etiqueta abajo */
  padding: 11px 16px; border-right: 1px solid var(--border);
  color: inherit; text-decoration: none;
}
.resumen-strip > a:last-child{ border-right: none; }
.resumen-strip > a:hover{ background: var(--surface-2); }
.resumen-strip .n.peligro{ color: var(--danger); }
ul.stat-list{ list-style: none; margin: 0; }
a.stat-row{ color: inherit; text-decoration: none; }
.cifra{ font-family: var(--font-display); font-size: 26px; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; }

/* --- Detalle del pedido: cambio de estado e historial --- */
.cambio-estado{ display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; padding: 6px 20px 18px; }
.cambio-estado .field{ flex: 1 1 260px; margin-bottom: 0; }
.cambio-estado .botones{ display: flex; gap: 8px; flex-wrap: wrap; }

/* línea de tiempo con el motivo de "puntada" (hilván) del diseño */
.historial{ list-style: none; margin: 0; padding: 6px 20px 18px 26px; }
.historial li{ position: relative; padding: 0 0 16px 18px; border-left: 1.5px dashed var(--border); }
.historial li:last-child{ padding-bottom: 2px; border-left-color: transparent; }
.historial li::before{
  content: ""; position: absolute; left: -6px; top: 3px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--primary-light);
}
.historial .linea1{ display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.historial .fecha{ font-size: 11.5px; color: var(--text-muted); }
.historial .quien{ font-size: 12.5px; margin-top: 4px; }
.historial .comentario{ font-size: 12.5px; color: var(--text-muted); font-style: italic; margin-top: 2px; }

/* --- Formulario de pedido: cliente elegido, resultados y renglones --- */
.elegido{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-m);
  background: var(--surface-2);
}
.elegido strong{ display: block; font-size: 14px; }
.elegido span{ font-size: 12.5px; color: var(--text-muted); }
.resultados{ list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-m); overflow: hidden; }
.resultados li + li{ border-top: 1px solid var(--border); }
.resultados button{
  all: unset; cursor: pointer; box-sizing: border-box; width: 100%;
  display: flex; justify-content: space-between; gap: 10px;
  padding: 10px 12px; font-size: 13.5px;
}
.resultados button:hover{ background: var(--surface-2); }
.resultados button:focus-visible{ outline: 2px solid var(--primary-light); outline-offset: -2px; }
.resultados button span{ color: var(--text-muted); font-size: 12.5px; }

.renglon{
  display: grid; gap: 8px 10px; align-items: end;
  grid-template-columns: minmax(0, 2.2fr) 84px 84px minmax(0, 1fr) minmax(0, 1.5fr) auto;
  padding: 10px 0; border-bottom: 1px dashed var(--border);
}
.renglon .field{ margin-bottom: 0; }
.renglon .subtotal{
  display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-height: 38px;
  font-size: 13px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.lineas .lineas-total{ margin-top: 10px; }
.linea-del:disabled{ opacity: .35; cursor: default; }
.linea-del:disabled:hover{ background: none; color: var(--text-muted); }

/* un email o una dirección larga no rompe la grilla de datos */
.dato .v{ overflow-wrap: anywhere; }

/* --- Fichas de medidas del cliente --- */
.fichas{ display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 14px; }
.ficha{ border: 1px solid var(--border); border-radius: var(--radius-m); padding: 14px; background: var(--surface); }
.ficha.historica{ background: var(--surface-2); }
.ficha-head{ display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ficha-head strong{ font-size: 14px; }
.ficha small{ display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.ficha .obs{ font-size: 12px; font-style: italic; color: var(--text-muted); margin-top: 8px; }

/* --- Lista del taller: tablero de dos columnas y tarjetas atrasadas --- */
.tablero.dos{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tarjeta-op.atrasada{ border-color: var(--e-atrasado); box-shadow: inset 4px 0 0 var(--e-atrasado); }
.tarjeta-op .cod a{ color: inherit; }
.tarjeta-op .detalles{ list-style: none; margin: 0; padding: 0; font-size: 12.5px; }
.tarjeta-op .detalles li{ padding: 6px 0; border-top: 1px dashed var(--border); }
.tarjeta-op .detalles .extra{ color: var(--text-muted); }
.tarjeta-op .btn-grande{ margin-top: 10px; }

/* --- Inicio de sesión: usuarios de prueba --- */
.login-hint ul{ margin: 6px 0 0; padding-left: 18px; text-align: left; }
.login-hint li{ margin: 3px 0; }

/* --- Responsive de lo agregado --- */
@media (max-width: 1100px){
  .columnas{ grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px){
  /* renglón del pedido: producto arriba, cantidad/talle/color, observaciones y subtotal */
  .renglon{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .renglon .producto, .renglon .obs, .renglon .subtotal{ grid-column: 1 / -1; }
}
@media (max-width: 720px){
  .ocultar-movil{ display: none; }
  .tablero.dos{ grid-template-columns: minmax(0, 1fr); }
  .resumen-strip > a:nth-child(2){ border-right: none; }
  .resumen-strip > a:nth-child(-n+2){ border-bottom: 1px solid var(--border); }
}
@media (max-width: 560px){
  .encabezado{ align-items: stretch; }
  .encabezado-acciones{ width: 100%; }
  .encabezado-acciones > *{ flex: 1; white-space: nowrap; }
  .card-body{ padding: 12px 16px 16px; }
  .paginacion{ padding: 12px 16px; }
  /* en el celular las tablas se desplazan de costado; con celdas más justas entra más */
  thead th, tbody td, tfoot td{ padding-left: 12px; padding-right: 12px; }
  .cambio-estado{ padding: 6px 16px 16px; }
  .cambio-estado .botones > *{ flex: 1; }
}