/* ============================================================
   sjd-ui.css — Un solo diseño para los 41 módulos
   ============================================================
   Cada módulo se fue armando por su cuenta y quedaron 5 azules,
   3 rojos, 4 grises y 25 definiciones distintas del botón base.
   Este archivo se carga DESPUÉS del <style> de cada módulo, así
   sus variables ganan y los colores se unifican sin tocar 41
   archivos. Para los componentes solo se fijan las cosas que no
   cambian el ancho ni la posición (tipografía, radios, bordes,
   sombras, foco): nada que pueda descuadrar un módulo.

   Para cambiar el diseño de todo el sistema: este archivo.
   ============================================================ */

:root{
  /* ── Colores oficiales (los del logo) ── */
  --azul:#1B3A8C;
  --azul-dark:#0B1F4D;
  --azul-claro:#EEF2FF;
  --rojo:#E2231A;
  --rojo-dark:#B81A12;
  --verde:#166534;
  --verde-claro:#DCFCE7;
  --ambar:#B45309;
  --ambar-claro:#FEF3C7;
  --morado:#5B21B6;
  --morado-claro:#EDE9FE;
  --gris:#6B7280;
  --gris2:#8A93A0;
  --gris3:#94A3B8;
  --bdr:#DFE4EC;
  --bdr2:#CDD5E0;
  --txt:#1A2030;
  /* ── Formas ── */
  --r:8px;
  --r2:10px;
  --r3:14px;
  --sombra:0 1px 3px rgba(11,31,77,.06),0 6px 18px rgba(11,31,77,.06);
  --sombra-modal:0 20px 60px rgba(11,31,77,.22);
  --foco:0 0 0 3px rgba(27,58,140,.18);
  --fuente:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fuente-titulo:'Oswald','Inter',sans-serif;
}

/* ── Base ── */
html{-webkit-text-size-adjust:100%}
body{font-family:var(--fuente);color:var(--txt);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--fuente-titulo);font-weight:600;letter-spacing:.01em}
*:focus-visible{outline:none;box-shadow:var(--foco)}

/* ── Botones: mismo tacto en todos lados ── */
.btn{font-family:var(--fuente-titulo);font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  border-radius:var(--r);border:1px solid var(--bdr2);cursor:pointer;
  transition:background .12s,box-shadow .12s,transform .06s;line-height:1.2}
.btn:hover{box-shadow:0 2px 8px rgba(11,31,77,.12)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.btn-r,.btn-rojo{background:var(--rojo);color:#fff;border-color:var(--rojo)}
.btn-r:hover,.btn-rojo:hover{background:var(--rojo-dark)}
.btn-a,.btn-azul{background:var(--azul);color:#fff;border-color:var(--azul)}
.btn-a:hover,.btn-azul:hover{background:var(--azul-dark)}
.btn-g,.btn-gris{background:#fff;color:var(--txt)}
.btn-g:hover,.btn-gris:hover{background:#F4F6FA}
.btn-ok{background:var(--verde);color:#fff;border-color:var(--verde)}
.btn-no{background:var(--rojo);color:#fff;border-color:var(--rojo)}

/* ── Campos ── */
.fld label{font-size:11px;font-weight:600;color:var(--gris);text-transform:uppercase;letter-spacing:.06em}
.fld input,.fld select,.fld textarea{font-family:var(--fuente);border:1px solid var(--bdr2);border-radius:var(--r);
  color:var(--txt);background:#fff;transition:border-color .12s,box-shadow .12s}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--azul);box-shadow:var(--foco)}
.fld input::placeholder,.fld textarea::placeholder{color:var(--gris3)}
.fld input[readonly],.fld input:disabled{background:#F4F6FA;color:var(--gris)}

/* ── Tarjetas y ventanas ── */
.card{border:1px solid var(--bdr);border-radius:var(--r3);background:#fff;box-shadow:var(--sombra)}
.modal{border-radius:var(--r3);box-shadow:var(--sombra-modal)}
.overlay,.ov{backdrop-filter:blur(2px)}

/* ── Etiquetas de estado ── */
.badge,.st,.chip,.estado{font-weight:700;border-radius:20px;letter-spacing:.02em}

/* ── Tablas ── */
table th{font-family:var(--fuente-titulo);font-weight:600;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--gris)}
table tr:hover td{background:#FAFBFD}

/* ── Avisos flotantes ── */
.toast{border-radius:var(--r2);box-shadow:var(--sombra-modal);font-weight:600}

/* ── Selección de texto ── */
::selection{background:rgba(27,58,140,.18)}

/* ── Impresión: nada de sombras ni fondos ── */
@media print{
  .card,.modal{box-shadow:none}
  .btn{display:none}
}

/* ── Barra de acciones fija en el teléfono ────────────────────────────
   En una ficha larga (una OT, una cotización) el botón de guardar quedaba
   al final de todo: había que bajar hasta abajo y el círculo de ayuda le
   tapaba la esquina. Pegada abajo, el botón está siempre a la vista.
   Los módulos que ya definen su propia .modal-actions en un @media
   mandan sobre esto; aquí se cubre al resto. */
@media(max-width:900px){
  .modal-actions{
    position:sticky;bottom:0;background:#fff;z-index:5;
    padding-top:10px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));
    border-top:1px solid var(--bdr);
    box-shadow:0 -6px 16px rgba(11,31,77,.08)}
  /* El botón principal (rojo) ocupa la fila entera y es el más grande */
  .modal-actions .btn-r,.modal-actions .btn-rojo{
    flex:1 1 100%;min-width:100%;padding:15px 6px;font-size:15px}
  /* El botón flotante de ayuda no puede tapar el de guardar */
  #btn-ayuda-jsa{bottom:calc(84px + env(safe-area-inset-bottom,0px))!important}
  body:has(.overlay.show) #btn-ayuda-jsa,
  body:has(.ov.open) #btn-ayuda-jsa,
  body:has(dialog[open]) #btn-ayuda-jsa{display:none!important}
}

/* ── Barras de desplazamiento siempre visibles (v500) ─────────────────
   En Mac las barras se esconden solas y en tablas o tableros anchos
   (Torre de control, listados) no se notaba que había más hacia el lado. */
*::-webkit-scrollbar{width:11px;height:12px}
*::-webkit-scrollbar-track{background:#eef1f6;border-radius:8px}
*::-webkit-scrollbar-thumb{background:#aeb7c6;border-radius:8px;border:2px solid #eef1f6}
*::-webkit-scrollbar-thumb:hover{background:#8a95a8}
*{scrollbar-width:auto;scrollbar-color:#aeb7c6 #eef1f6}
/* Barra horizontal flotante: aparece abajo de la pantalla cuando el contenido
   ancho sigue más abajo (su propia barra queda fuera de la vista) */
#barra-x-flot{position:fixed;left:0;right:0;bottom:0;height:16px;overflow-x:auto;overflow-y:hidden;z-index:850;background:rgba(238,241,246,.92);
  border-top:1px solid #d5dbe5;display:none;padding-bottom:env(safe-area-inset-bottom,0px)}
#barra-x-flot>div{height:1px}