/* ── Paleta principal ─────────────────────────────────────────────────────── */
:root {
  --gc-primary-rgb:   3 105 161;

  --color-primary:    #0369a1;
  --color-accent:     #0891b2;
  --color-surface:    #f8fafc;
  --color-cta:        #0369a1;
  --color-danger:     #dc2626;

  --color-sidebar:    #0c4a6e;
  --color-text-muted: #475569;
  --color-accent-2:   #38bdf8;
  --color-border:     #e2e8f0;
  --color-bg:         #f8fafc;
}

/* ── Topbar ───────────────────────────────────────────────────────────────── */
.gc-topbar {
  background: #0369a1;
}

/* Íconos dentro del topbar siempre blancos */
.gc-topbar .fas,
.gc-topbar .fa-solid,
.gc-topbar i {
  color: #fff;
}

/* ── Iconos Font Awesome — color primario por defecto ─────────────────────── */
.fas,
.fa-solid,
.far,
.fab {
  color: #0369a1;
}

/* El estado vencido debe conservar su color aunque el icono sea Font Awesome. */
.fas.license-expired-icon,
.fa-solid.license-expired-icon {
  color: #b91c1c;
}

/* Contraste del check sobre el botón azul de verificación de matrícula. */
.fas.license-verification-submit-icon,
.fa-solid.license-verification-submit-icon {
  color: #bae6fd;
}

/* Excepciones: dentro del topbar ya se maneja arriba */
/* Dentro de sidebar activo */
aside a.active .fas,
aside a.active i { color: #0369a1; }

/* Íconos en texto blanco (botones primarios, héros, badges) */
.fas.text-white,
a[style*="color:#fff"] .fas,
button[style*="color:#fff"] .fas,
span[style*="color:#fff"] .fas,
[style*="color:rgba(255,255,255"] .fas {
  color: inherit;
}

/* ── Títulos — gris oscuro, no negro ──────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  color: #1e293b;
}

.text-gray-900 { color: #1e293b !important; }
.text-gray-800 { color: #334155 !important; }

/* ── Botones y fondos principales ─────────────────────────────────────────── */
.bg-primary {
  background-color: #0369a1;
}
.hover\:bg-primary-dark:hover {
  background-color: #025f91;
}
.bg-primary:active,
.hover\:bg-primary-dark:active {
  background-color: #024f78;
}

.text-primary {
  color: #0369a1;
}
.text-primary:hover {
  color: #025f91;
}

.border-primary {
  border-color: #0369a1;
}

.focus\:ring-primary:focus {
  --tw-ring-color: rgba(3, 105, 161, 0.35);
}

/* ── Sidebar — ítem activo ────────────────────────────────────────────────── */
aside a.bg-gray-100 {
  background-color: #eff6ff !important;
  color: #0369a1 !important;
  font-weight: 600;
}
aside a.bg-gray-100 .fas,
aside a.bg-gray-100 i {
  color: #0369a1;
}

/* ── border-radius unificado ──────────────────────────────────────────────── */
.rounded,
.rounded-sm,
.rounded-md,
.rounded-xl,
.rounded-2xl,
.rounded-3xl {
  border-radius: 0.5rem !important;
}

/* ── Tooltip vía data-tooltip ─────────────────────────────────────────────── */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #1e293b;
  color: #f8fafc;
  font-size: 0.7rem;
  font-weight: 500;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 0.375rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 50;
}
[data-tooltip]:hover::after { opacity: 1; }

/* ── Botones de acción en tablas ──────────────────────────────────────────── */
.btn-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  font-size: 0.9rem;
  transition: background-color 0.15s, color 0.15s;
  cursor: pointer;
  border: none;
  background: transparent;
  text-decoration: none;
}

/* ── Inputs globales ──────────────────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
select {
  border-color: #d1d5db;
  border-radius: 8px;
  color: #1e293b;
}
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: #0369a1;
  box-shadow: 0 0 0 3px rgba(3, 105, 161, 0.12);
}

/* ── Checkboxes — native appearance with accent color ─────────────────────── */
/* The @tailwindcss/forms plugin applies appearance:none + SVG background-image.
   Override with native rendering + accent-color for reliable checkmark display. */
input[type="checkbox"] {
  -webkit-appearance: auto;
  -moz-appearance: auto;
  appearance: auto;
  accent-color: #0369a1;
  cursor: pointer;
}

input[type="checkbox"]:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(3, 105, 161, 0.25);
}