/* Identidad visual BIARO (02/09/2026, pedido por Ari): antes la app usaba
   una paleta verde oliva/crema heredada de cuando se llamaba "AG Manager"
   -- completamente distinta del azul-violeta/navy ya usado en los
   documentos comerciales (ficha, presentación, guía de onboarding,
   términos, planes y precios). Ari pidió unificarlo: no dejar el logo
   nuevo conviviendo a medias con los colores viejos. Se cambian acá los
   colores base y unos pocos valores puntuales más abajo que estaban
   escritos a mano en vez de usar una variable (quedan comentados en el
   lugar). No se tocó ningún radio, tipografía, espaciado ni estructura. */
:root{
  --color-bg:#f4f6fd;
  --color-surface:#fff;
  --color-border:#dde1f3;
  --color-text:#0f172a;
  --color-muted:#5a6478;
  --color-muted-2:#7c8398;
  --color-brand:#2a5cff;
  --color-brand-dark:#0b1024;
  --color-danger:#a85c5c;
  --color-warning-today:#c98a3a;
  --color-warning-upcoming:#b99b3a;
  --color-success:#2f6f4e;
  --radius-sm:8px;
  --radius-md:10px;
  --radius-lg:14px;
}
body{margin:0;font-family:Arial,sans-serif;background:var(--color-bg);color:var(--color-text)}
header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 24px;padding:18px 6%;background:var(--color-surface);border-bottom:1px solid var(--color-border)}
.brand{display:inline-flex;align-items:center;gap:8px;font-size:22px;font-weight:700;color:var(--color-brand);white-space:nowrap}.brand svg{flex:none;display:block}nav{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;flex:1 1 auto}nav a{color:var(--color-text);text-decoration:none;white-space:nowrap}
main{width:min(1100px,88%);margin:40px auto}.subtitle{color:var(--color-muted)}.cards{display:flex;gap:20px;margin:30px 0}
h1{font-size:26px;font-weight:700;margin:0 0 4px;color:var(--color-text)}
h2{font-size:18px;font-weight:700;margin:0 0 14px;color:var(--color-text)}
.panel-header h1,.panel-header h2{margin:0 0 4px}
.card,.panel{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:24px;box-shadow:0 1px 3px rgba(0,0,0,0.06)}.card{min-width:220px}
.card span{display:block;color:var(--color-muted);margin-bottom:10px}.card strong{font-size:34px;color:var(--color-brand)}
.panel{margin-top:20px}.panel-header{display:flex;justify-content:space-between;align-items:center;gap:20px}
.button,button{border:1px solid var(--color-brand);border-radius:var(--radius-sm);padding:10px 16px;background:var(--color-surface);color:var(--color-brand);text-decoration:none;cursor:pointer;font-weight:600}
.button:hover,button:hover{background:var(--color-bg)}
.button-primary,button.button-primary{background:var(--color-brand);color:#fff;border-color:var(--color-brand)}
.button-primary:hover,button.button-primary:hover{background:#1f47cc}
.danger{background:var(--color-danger);color:#fff;border-color:var(--color-danger)}
.danger:hover{background:#95504f}
table{width:100%;border-collapse:collapse}th,td{padding:14px 10px;border-bottom:1px solid var(--color-border);text-align:left}
/* Etapa de pulido funcional, punto 2 (pedido por Ari): tablas densas
   (Stock, Proveedores) usan menos alto por fila y letra un poco más
   chica para aprovechar mejor el espacio horizontal/vertical, sin
   cambiar la tipografía ni los colores del resto del sistema. */
table.table-compact th,table.table-compact td{padding:7px 10px;font-size:13.5px}
/* Reemplaza a la columna "Alerta" que se sacó de Stock (punto 2): la
   fila de un producto con stock bajo se destaca sutilmente entera, en
   vez de necesitar una columna fija que casi siempre dice "-". */
tr.row-stock-bajo{background:#eef1ff}
.form-panel{max-width:600px}form{display:grid;gap:10px}input,textarea{padding:11px;border:1px solid var(--color-border);border-radius:var(--radius-sm);margin-bottom:10px;font-family:inherit;font-size:inherit;width:100%;box-sizing:border-box}.error{color:var(--color-danger)}
.status-flow{display:flex;align-items:flex-start;flex-wrap:wrap;gap:0;margin:10px 0 20px}
.status-step{display:flex;flex-direction:column;align-items:center;text-align:center;width:170px}
.status-step-badge{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--color-bg);border:2px solid var(--color-border);color:var(--color-muted);font-weight:700}
.status-step-label{margin-top:8px;font-weight:700;color:var(--color-muted)}
.status-step-hint{margin-top:4px;font-size:12px;color:var(--color-muted-2);padding:0 6px}
.status-step.done .status-step-badge{background:var(--color-brand);border-color:var(--color-brand);color:#fff}
.status-step.done .status-step-label{color:var(--color-brand)}
.status-step.active .status-step-badge{background:var(--color-surface);border-color:var(--color-brand);color:var(--color-brand)}
.status-step.active .status-step-label{color:var(--color-text)}
.status-step.active .status-step-hint{color:var(--color-brand);font-weight:700}
.status-arrow{width:40px;padding-top:6px;text-align:center;color:var(--color-border);font-size:20px}
.status-cancel-note{margin-top:0}
.status-ok{color:var(--color-brand);font-weight:700}
.nav-divider{width:1px;align-self:stretch;background:var(--color-border);margin:0 4px}
.actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.actions form{display:inline;margin:0}
.actions .button,.actions button{padding:7px 12px;font-size:13px}
.session-info{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0}
.session-info span{color:var(--color-muted);font-size:13px}
.session-info .button,.session-info button{padding:7px 12px;font-size:13px}
.session-info a{color:var(--color-brand);font-size:13px;text-decoration:none}
.notice{color:var(--color-brand);font-weight:700}
.temp-password{background:var(--color-bg);border:1px dashed var(--color-brand);border-radius:var(--radius-sm);padding:14px 18px;display:inline-block}
.temp-password code{font-size:20px;font-weight:700;letter-spacing:1px;color:var(--color-text)}

/* Distinción visual de AG_ADMIN (cirugía estética final, aprobado por
   Ari): la "cuenta madre" debe sentirse visualmente distinta de una
   empresa cliente normal, sin tocar ningún permiso ni lógica. Es
   puramente decorativo: una franja superior de color distinto en el
   header y una etiqueta junto a la marca, visibles solo cuando
   session.get('role') == 'AG_ADMIN' (ver templates/base.html). */
header.header-ag-admin{border-top:4px solid var(--color-brand)}
.badge-ag-admin{display:inline-block;margin-left:10px;padding:3px 10px;border-radius:999px;
  background:var(--color-text);color:#fff;font-size:11px;font-weight:700;letter-spacing:.04em;
  vertical-align:middle}

/* Presentación del login (cirugía estética final, aprobado por Ari):
   mismo flujo/campos/validación, solo un contenedor más chico y
   centrado en la pantalla en vez de un formulario ancho genérico. */
.login-shell{min-height:100vh;box-sizing:border-box;padding:40px 0;display:flex;align-items:center;justify-content:center}
.login-panel{max-width:380px;width:100%;text-align:center}
.login-panel h1{margin-bottom:4px}
.login-panel .form-panel{max-width:none;text-align:left;margin-top:20px}

/* Distinción visual mínima entre las 4 páginas de error (cirugía
   estética final, aprobado por Ari): mismo template y mismo status code
   HTTP de siempre, solo un acento de color/ícono según el tipo de error
   (condicionado en templates/error.html por el "title" que ya pasan los
   helpers de services.py, sin tocar services.py). */
.error-panel{border-left:4px solid var(--color-border)}
.error-panel .error-icon{font-size:34px;line-height:1;display:block;margin-bottom:10px}
.error-panel-not_found{border-left-color:var(--color-muted-2)}
.error-panel-forbidden{border-left-color:var(--color-danger)}
.error-panel-bad_request{border-left-color:var(--color-warning-today)}
.error-panel-server_error{border-left-color:var(--color-danger)}

/* Mejora de UX aprobada por Ari: botón "mostrar/ocultar contraseña"
   (ícono de ojo) en los campos de contraseña. Puramente visual, ver
   static/js/password_toggle.js. */
.password-field{position:relative;margin-bottom:10px}
.password-field input{width:100%;box-sizing:border-box;padding-right:42px;margin-bottom:0}
.password-toggle{position:absolute;top:0;right:0;bottom:0;width:40px;background:none;border:0;padding:0;
  display:flex;align-items:center;justify-content:center;color:var(--color-muted);cursor:pointer}
.password-toggle:hover{color:var(--color-brand)}
.password-toggle .icon-eye-off{display:none}
.password-toggle.is-visible .icon-eye{display:none}
.password-toggle.is-visible .icon-eye-off{display:block}
.password-toggle svg{width:20px;height:20px}

/* Mejora de usabilidad aprobada por Ari: botón "Copiar contraseña" junto
   a una contraseña temporal generada (templates/new_user.html). Puramente
   visual, ver static/js/copy_password.js. */
.temp-password-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.temp-password-row .temp-password{margin:0}
.temp-password-row button.is-copied{background:var(--color-success);color:#fff;border-color:var(--color-success)}

/* Última tanda funcional V1, Bloque 1 (aprobado por Ari): impresión/PDF
   por CSS, sin librería de servidor. La salida impresa oculta todo lo
   interactivo (menú, botones, formularios) y deja solo el contenido:
   títulos, tarjetas de resumen y tablas. No modifica ninguna lógica de
   datos, es puramente visual. El usuario imprime o guarda como PDF desde
   el diálogo de impresión del navegador. */
@media print{
  header,form,.button,.danger,.no-print{display:none!important}
  body{background:#fff}
  main{width:100%;margin:0;padding:0 3%}
  .panel,.card{border:none;padding:0 0 10px;border-radius:0;box-shadow:none}
  .cards{gap:14px}
  table{font-size:12px}
  th,td{padding:6px 8px}
  a{color:#000;text-decoration:none}
}

/* Última tanda funcional V1, Bloque 2 (Agenda/Calendario, aprobado por
   Ari): grilla mensual armada en el servidor, sin ninguna librería JS.
   Mismos colores y bordes que el resto de la interfaz (.panel, .button). */
table.calendar{table-layout:fixed}
table.calendar th{text-align:center;background:var(--color-bg)}
.calendar-day{vertical-align:top;height:112px;padding:6px!important;overflow:hidden}
.calendar-day-muted{color:#bbb;background:#f8f9fd}
.calendar-day-today{background:#e9edff}
.calendar-day-number{font-weight:700;margin-bottom:4px}
.calendar-event{font-size:12px;border-radius:6px;padding:2px 6px;margin-bottom:3px;
  background:var(--color-brand);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.calendar-event a{color:#fff;text-decoration:none;display:block}
.calendar-event-completado{background:#98a2c9}
.calendar-event-cancelado{background:#bbb}

/* Última tanda funcional V1, Bloque 4 (Avisos/Alertas, aprobado por Ari):
   avisos agrupados por urgencia (vencido / vence hoy / próximo), cada uno
   con un link directo a la pantalla donde se resuelve. Sin tabla de datos
   ni contadores sueltos: tarjetas de una línea, priorizadas por color.
   Mismos colores base que el resto de la interfaz (.error usa --color-danger). */
.alert-group{margin-bottom:22px}
.alert-group h2{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.alert-item{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:12px 16px;border-radius:var(--radius-md);margin-bottom:8px;background:#f6f7fc;
  border-left:4px solid var(--color-border)}
.alert-item-overdue{border-left-color:var(--color-danger);background:#fbf1f1}
.alert-item-today{border-left-color:var(--color-warning-today);background:#fdf5ea}
.alert-item-upcoming{border-left-color:var(--color-warning-upcoming);background:#fbf8ea}
.alert-item-text strong{display:block}
.alert-item-text span{color:var(--color-muted);font-size:13px}
.alert-empty-state{color:var(--color-brand);font-weight:700;padding:20px 0}
.alerts-summary-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.alerts-summary-list li{padding:8px 14px;border-radius:var(--radius-sm);background:#f6f7fc}