/* =========================================================================
   RYTEROP · DESIGN SYSTEM
   Capa de tokens + componentes modernos. No reemplaza los CSS por módulo:
   se carga ANTES que ellos y les da una base consistente (tipografía,
   color, sombras, radios, foco, estados). Los CSS de cada página siguen
   funcionando; muchos de sus valores ahora heredan de estas variables.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
  /* Marca (se mantienen los tonos originales de RyterOP) */
  --ry-green:      #159a3a;
  --ry-green-dark: #0f7f30;
  --ry-green-soft: #e7f7ec;
  --ry-blue:       #003f68;
  --ry-blue-dark:  #07172d;
  --ry-blue-soft:  #eaf2f8;
  --ry-orange:     #f28c28;
  --ry-red:        #d93025;
  --ry-red-soft:   #fdecec;

  /* Neutros */
  --ry-ink:        #0b1626;
  --ry-muted:      #5b6b7d;
  --ry-line:       #e4e9ef;
  --ry-bg:         #f4f7fa;
  --ry-surface:    #ffffff;

  /* Tipografía */
  --ry-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Espaciado */
  --ry-space-1: 4px;
  --ry-space-2: 8px;
  --ry-space-3: 12px;
  --ry-space-4: 16px;
  --ry-space-5: 24px;
  --ry-space-6: 32px;

  /* Radios y sombras */
  --ry-radius-sm: 8px;
  --ry-radius-md: 14px;
  --ry-radius-lg: 20px;
  --ry-shadow-sm: 0 1px 2px rgba(11,22,38,.06);
  --ry-shadow-md: 0 8px 24px rgba(11,22,38,.08);
  --ry-shadow-lg: 0 20px 45px rgba(11,22,38,.14);

  --ry-transition: 160ms ease;
}

*{ box-sizing: border-box; }

html, body{
  background: var(--ry-bg);
  color: var(--ry-ink);
  font-family: var(--ry-font);
  -webkit-font-smoothing: antialiased;
}

/* Tipografía general: hereda sin pelear con los !important existentes */
body, input, select, textarea, button{
  font-family: var(--ry-font);
}

h1, h2, h3, .page-title{
  color: var(--ry-blue-dark);
  font-weight: 800;
  letter-spacing: -0.01em;
}

a{ color: var(--ry-blue); }

/* ---------- Cards ---------------------------------------------------- */
.card, .report-card{
  background: var(--ry-surface);
  border-radius: var(--ry-radius-lg);
  box-shadow: var(--ry-shadow-md);
  border-top: 4px solid var(--ry-green);
  transition: box-shadow var(--ry-transition), transform var(--ry-transition);
}

.card:hover, .report-card:hover{
  box-shadow: var(--ry-shadow-lg);
}

/* ---------- Botones ---------------------------------------------------- */
button, .btn{
  font-family: var(--ry-font);
  transition: transform var(--ry-transition), box-shadow var(--ry-transition), background var(--ry-transition);
}

button:active, .btn:active{ transform: translateY(1px); }

.btn-primary, .btn-abrir{
  background: var(--ry-green);
  box-shadow: 0 6px 16px rgba(21,154,58,.25);
}
.btn-primary:hover, .btn-abrir:hover{ background: var(--ry-green-dark); }

.btn-secondary, .btn-enviar{
  background: var(--ry-blue);
  box-shadow: 0 6px 16px rgba(0,63,104,.22);
}

.btn-pdf{ background: var(--ry-orange); box-shadow: 0 6px 16px rgba(242,140,40,.25); }
.btn-eliminar{ background: var(--ry-red); box-shadow: 0 6px 16px rgba(217,48,37,.22); }

.btn-light{
  background: var(--ry-blue-soft);
  color: var(--ry-blue-dark);
}
.btn-light:hover{ background: #dfeaf3; }

/* ---------- Inputs ------------------------------------------------------ */
input, select, textarea{
  border: 1px solid var(--ry-line) !important;
  border-radius: var(--ry-radius-sm) !important;
  transition: border-color var(--ry-transition), box-shadow var(--ry-transition);
}

input:focus, select:focus, textarea:focus{
  outline: none;
  border-color: var(--ry-green) !important;
  box-shadow: 0 0 0 3px rgba(21,154,58,.15);
}

label{ color: var(--ry-blue-dark); }

/* ---------- Tablas ------------------------------------------------------ */
table{ border-radius: var(--ry-radius-sm); overflow: hidden; }
th{
  background: var(--ry-blue);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .02em;
  text-transform: uppercase;
}
tbody tr{ transition: background var(--ry-transition); }
tbody tr:hover{ background: var(--ry-blue-soft); }
td{ border-bottom: 1px solid var(--ry-line); }

/* ---------- Estados / pills ---------------------------------------------- */
.status-pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.status-ok{ background: var(--ry-green-soft); color: var(--ry-green-dark); }
.status-warn{ background: #fff4e0; color: #b06a00; }
.status-danger{ background: var(--ry-red-soft); color: var(--ry-red); }

.msg.ok{ background: var(--ry-green-soft); color: var(--ry-green-dark); border-radius: var(--ry-radius-sm); }
.msg.err{ background: var(--ry-red-soft); color: var(--ry-red); border-radius: var(--ry-radius-sm); }

/* ---------- KPIs ---------------------------------------------------------- */
.kpi{
  border-radius: var(--ry-radius-lg);
  box-shadow: var(--ry-shadow-md);
}

/* Reemplazo del parpadeo agresivo rojo por un estado con foco de atención
   más profesional (menos "alarma de incendio", igual de visible). */
.row-danger-blink{
  animation: ryPulseDanger 1.8s ease-in-out infinite;
}
@keyframes ryPulseDanger{
  0%, 100%{ background: var(--ry-red-soft); }
  50%{ background: #ffffff; }
}

/* ---------- Scrollbars (opt-in, no rompe nada si el navegador no soporta) - */
*::-webkit-scrollbar{ height: 10px; width: 10px; }
*::-webkit-scrollbar-thumb{ background: #c6d2dd; border-radius: 999px; }
*::-webkit-scrollbar-track{ background: transparent; }

/* ---------- Utilidades de foco accesible ---------------------------------- */
a:focus-visible, button:focus-visible, .btn:focus-visible{
  outline: 2px solid var(--ry-green);
  outline-offset: 2px;
}