/*
 * SIREX — capa de mejoras UX/UI (design tokens + refinamiento de
 * componentes) aplicada sobre AdminLTE 2 / Bootstrap 3, sin tocar la
 * logica de negocio ni el markup estructural existente.
 *
 * Se incluye solo en las pantallas ya renovadas (no en layout/base.twig),
 * asi que estas reglas solo tienen efecto donde este archivo se enlaza —
 * no hace falta una clase contenedora extra para que no afecte al resto
 * del sistema todavia sin revisar.
 */

:root {
  /* Color — se respeta el azul de marca ya usado en style.css (#013274) */
  --sirex-primary: #013274;
  --sirex-primary-dark: #01234f;
  --sirex-primary-light: #2f5c9e;
  --sirex-secondary: #6c757d;
  --sirex-success: #00a65a;
  --sirex-warning: #f39c12;
  --sirex-danger: #dd4b39;
  --sirex-info: #00c0ef;
  --sirex-neutral-50: #f7f8fa;
  --sirex-neutral-100: #eef1f4;
  --sirex-neutral-300: #d5d9da;
  --sirex-neutral-600: #6b7280;
  --sirex-neutral-900: #1f2937;

  /* Espaciado — escala base 8px */
  --sirex-space-1: 4px;
  --sirex-space-2: 8px;
  --sirex-space-3: 16px;
  --sirex-space-4: 24px;
  --sirex-space-5: 32px;

  /* Tipografia */
  --sirex-font-size-sm: 12px;
  --sirex-font-size-lg: 16px;
  --sirex-font-size-h1: 28px;
  --sirex-font-size-h2: 22px;
  --sirex-font-size-h3: 18px;

  /* Forma */
  --sirex-radius: 6px;
  --sirex-radius-lg: 10px;
  --sirex-shadow-sm: 0 1px 3px rgba(1, 50, 116, 0.08), 0 1px 2px rgba(1, 50, 116, 0.06);
  --sirex-shadow-md: 0 4px 10px rgba(1, 50, 116, 0.10), 0 2px 4px rgba(1, 50, 116, 0.08);
  --sirex-focus-ring: 0 0 0 3px rgba(1, 50, 116, 0.35);
}

/* ---------- Accesibilidad: foco visible por teclado ---------- */
/* AdminLTE/Bootstrap 3 no siempre dejan un anillo de foco claro; esto
   garantiza que quien navega con teclado siempre vea donde esta parado
   (WCAG 2.2 - Focus Visible), sin alterar el estilo de mouse/click. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--sirex-focus-ring);
  border-radius: var(--sirex-radius);
}

/* ---------- Breadcrumbs ---------- */
.sirex-breadcrumb {
  font-size: var(--sirex-font-size-sm);
  color: var(--sirex-neutral-600);
  margin-bottom: var(--sirex-space-2);
}
.sirex-breadcrumb a {
  color: var(--sirex-primary);
  text-decoration: none;
}
.sirex-breadcrumb a:hover,
.sirex-breadcrumb a:focus {
  text-decoration: underline;
}
.sirex-breadcrumb .sirex-breadcrumb-sep {
  margin: 0 6px;
  color: var(--sirex-neutral-300);
}
.sirex-breadcrumb .sirex-breadcrumb-current {
  color: var(--sirex-neutral-900);
  font-weight: 600;
}

/* ---------- Cards / boxes (AdminLTE .box) ---------- */
.box {
  border-radius: var(--sirex-radius-lg);
  box-shadow: var(--sirex-shadow-sm);
  border-top-width: 3px;
  transition: box-shadow .15s ease-in-out;
}
.box:hover {
  box-shadow: var(--sirex-shadow-md);
}
.info-box {
  border-radius: var(--sirex-radius-lg);
  box-shadow: var(--sirex-shadow-sm);
  transition: transform .12s ease-in-out, box-shadow .12s ease-in-out;
}
a:hover .info-box {
  transform: translateY(-2px);
  box-shadow: var(--sirex-shadow-md);
}

/* ---------- Jerarquia de botones ---------- */
/* Un solo CTA primario destaca por peso/sombra; el resto se atenua. */
.btn {
  border-radius: var(--sirex-radius);
  font-weight: 500;
}
.btn-primary {
  box-shadow: var(--sirex-shadow-sm);
}
.btn-default {
  border-color: var(--sirex-neutral-300);
  color: var(--sirex-neutral-600);
}
.btn-xs.btn-danger,
.btn-xs.btn-primary {
  box-shadow: none;
}

/* ---------- Formularios ---------- */
label {
  font-weight: 600;
  color: var(--sirex-neutral-900);
}
.help-block,
.sirex-help-text {
  color: var(--sirex-neutral-600);
  font-size: var(--sirex-font-size-sm);
  margin-top: 2px;
}
.sirex-required::after {
  content: " *";
  color: var(--sirex-danger);
}
.form-control {
  border-radius: var(--sirex-radius);
}
.form-group {
  margin-bottom: var(--sirex-space-3);
}

/* ---------- Alertas / avisos ---------- */
.alert {
  border-radius: var(--sirex-radius);
  box-shadow: var(--sirex-shadow-sm);
}

/* ---------- Tablas: evitar scroll horizontal de pagina completa ---------- */
.sirex-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---------- Estado vacio de DataTables ---------- */
td.dataTables_empty {
  padding: var(--sirex-space-5) var(--sirex-space-3) !important;
  color: var(--sirex-neutral-600);
  font-size: var(--sirex-font-size-lg);
}

/* ---------- Skeleton loading (percepcion de velocidad) ---------- */
.sirex-skeleton {
  position: relative;
  overflow: hidden;
  background: var(--sirex-neutral-100);
  border-radius: var(--sirex-radius);
}
.sirex-skeleton::after {
  content: "";
  position: absolute;
  top: 0; left: -150%;
  width: 150%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  animation: sirex-shimmer 1.2s infinite;
}
@keyframes sirex-shimmer {
  100% { left: 150%; }
}
.sirex-skeleton-row { height: 18px; margin-bottom: var(--sirex-space-2); }

/* Botones/acciones con estado de carga (usado en list_temp, admin, etc.) */
.btn:disabled,
.btn[disabled] {
  cursor: progress;
  opacity: .75;
}

/* ---------- Responsive ---------- */
@media (max-width: 767px) {
  .content-header h4 {
    font-size: var(--sirex-font-size-h3);
  }
}