/* ============================================================
   Zetes Brand CSS — Zeus Monitor
   Paleta oficial: #004283 (azul) + #ed6d02 (naranja acento)
   Tipografía: Barlow (sustituto libre de DIN Pro)
   ============================================================ */

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

/* ── Variables de marca ─────────────────────────────────── */
:root {
  --zetes-blue:        #004283;
  --zetes-blue-dark:   #003166;
  --zetes-blue-mid:    #1a5fa0;
  --zetes-blue-light:  #e8f0f9;
  --zetes-orange:      #ed6d02;
  --zetes-orange-dark: #c55a00;
  --zetes-gray-dark:   #333333;
  --zetes-gray-mid:    #6c757d;
  --zetes-gray-light:  #f8f9fa;
  --zetes-border:      #dee2e6;
}

/* ── Tipografía base ─────────────────────────────────────── */
body,
input,
select,
textarea,
button {
  font-family: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

h1, h2, h3, .font-bold, .font-semibold {
  font-family: 'Barlow', system-ui, sans-serif;
}

/* ── Override: colores Tailwind blue-900 → Zetes blue ────── */

/* Fondos */
.bg-blue-900 { background-color: var(--zetes-blue) !important; }
.bg-blue-800 { background-color: var(--zetes-blue-dark) !important; }
.bg-blue-700 { background-color: var(--zetes-blue-mid) !important; }
.bg-blue-100 { background-color: var(--zetes-blue-light) !important; }

/* Hover fondos */
.hover\:bg-blue-900:hover { background-color: var(--zetes-blue) !important; }
.hover\:bg-blue-800:hover { background-color: var(--zetes-blue-dark) !important; }

/* Textos */
.text-blue-900 { color: var(--zetes-blue) !important; }
.text-blue-800 { color: var(--zetes-blue-dark) !important; }
.text-blue-700 { color: var(--zetes-blue-mid) !important; }
.text-blue-600 { color: var(--zetes-blue-mid) !important; }

/* Bordes */
.border-blue-900 { border-color: var(--zetes-blue) !important; }
.border-blue-700 { border-color: var(--zetes-blue-mid) !important; }

/* Selector de idioma activo: bg-white text-blue-900 */
.text-blue-900.font-bold {
  color: var(--zetes-blue) !important;
}

/* ── Header / Footer ────────────────────────────────────── */
header.bg-blue-900 {
  background-color: var(--zetes-blue) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.20);
}

footer.bg-blue-900 {
  background-color: var(--zetes-blue) !important;
}

/* ── Sidebar ─────────────────────────────────────────────── */
#sidebar {
  border-right: 1px solid var(--zetes-border);
}

/* Items de navegación del sidebar */
#sidebar nav a,
#sidebar nav button {
  border-radius: 6px;
  transition: background-color 0.15s ease, color 0.15s ease;
  color: var(--zetes-gray-dark);
}

#sidebar nav a:hover,
#sidebar nav button:hover {
  background-color: var(--zetes-blue-light) !important;
  color: var(--zetes-blue) !important;
}

/* Item activo del sidebar */
.zetes-nav-active {
  background-color: var(--zetes-blue-light) !important;
  color: var(--zetes-blue) !important;
  font-weight: 600;
  border-left: 3px solid var(--zetes-orange);
  padding-left: calc(0.5rem - 3px) !important;
}

/* Títulos de sección del sidebar */
#sidebar .text-blue-700 {
  color: var(--zetes-blue) !important;
  letter-spacing: 0.08em;
}

/* ── Botones ─────────────────────────────────────────────── */

/* Todos los botones bg-blue-900 con estilo Zetes */
button.bg-blue-900,
a.bg-blue-900,
input[type="submit"].bg-blue-900 {
  background-color: var(--zetes-blue) !important;
  border-radius: 30px;
  font-weight: 600;
  letter-spacing: 0.03em;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

button.bg-blue-900:hover,
a.bg-blue-900:hover,
input[type="submit"].bg-blue-900:hover {
  background-color: var(--zetes-blue-dark) !important;
  transform: translateY(-1px);
}

/* Botón naranja Zetes (acento) */
.btn-zetes-orange {
  background-color: var(--zetes-orange);
  color: #fff;
  border-radius: 30px;
  font-weight: 600;
  padding: 0.45rem 1.4rem;
  transition: background-color 0.2s ease, transform 0.1s ease;
  display: inline-block;
  cursor: pointer;
  border: none;
}

.btn-zetes-orange:hover {
  background-color: var(--zetes-orange-dark);
  transform: translateY(-1px);
}

/* ── Cards con borde superior Zetes ──────────────────────── */
.zetes-card {
  border-top: 3px solid var(--zetes-blue);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.zetes-card-orange {
  border-top: 3px solid var(--zetes-orange);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* ── Badges de estado ────────────────────────────────────── */
.badge-ok    { background-color: #198754; color: #fff; border-radius: 12px; padding: 2px 10px; font-size: 0.75rem; font-weight: 600; }
.badge-wa    { background-color: #f59e0b; color: #fff; border-radius: 12px; padding: 2px 10px; font-size: 0.75rem; font-weight: 600; }
.badge-ko    { background-color: #dc3545; color: #fff; border-radius: 12px; padding: 2px 10px; font-size: 0.75rem; font-weight: 600; }

/* ── Modal "Acerca de" ───────────────────────────────────── */
#aboutModal .text-blue-900 {
  color: var(--zetes-blue) !important;
}

#aboutModal .text-blue-700 a {
  color: var(--zetes-blue-mid) !important;
}

/* ── Inputs / Formularios ────────────────────────────────── */
input[type="text"],
input[type="date"],
input[type="email"],
input[type="password"],
select {
  border-radius: 8px;
  border: 1px solid var(--zetes-border);
  transition: border-color 0.2s ease;
}

input[type="text"]:focus,
input[type="date"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
select:focus {
  outline: none;
  border-color: var(--zetes-blue);
  box-shadow: 0 0 0 3px rgba(0, 66, 131, 0.12);
}

/* ── Scrollbar personalizada (webkit) ───────────────────── */
::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: var(--zetes-gray-light); }
::-webkit-scrollbar-thumb { background: var(--zetes-blue); border-radius: 3px; }