/*
 * brand.css — WetosLabs CMMS Design System (Etapa 5)
 * =====================================================
 * Paleta WetosLabs:
 *   Azul profundo tecnológico : #0D1F3C
 *   Azul eléctrico (primario) : #1565C0
 *   Azul cian                 : #0288D1
 *   Naranja energético        : #F57C00
 *   Gris oscuro metálico      : #37474F
 *   Blanco limpio             : #F5F7FA
 *
 * Filosofía: SaaS industrial profesional.
 * Sin gradientes excesivos. Sin efectos exagerados.
 * Limpio, denso en información, legible.
 */

/* ══════════════════════════════════════════════════════════════════
   1. VARIABLES (Design Tokens)
   ══════════════════════════════════════════════════════════════════ */
:root {
  /* Marca */
  --wl-deep:    #0D1F3C;   /* azul profundo — navbar, headers */
  --wl-primary: #1565C0;   /* azul eléctrico — botones, links activos */
  --wl-cyan:    #0288D1;   /* azul cian — acento secundario */
  --wl-orange:  #F57C00;   /* naranja — alertas, badges importantes */
  --wl-metal:   #37474F;   /* gris metálico — texto secundario */
  --wl-light:   #F5F7FA;   /* fondo de página */
  --wl-white:   #FFFFFF;

  /* Semánticos */
  --wl-success: #2E7D32;
  --wl-warning: #E65100;
  --wl-danger:  #C62828;
  --wl-info:    var(--wl-cyan);

  /* Bordes y superficies */
  --wl-border:       #DEE2E6;
  --wl-card-shadow:  0 1px 4px rgba(13, 31, 60, 0.10);
  --wl-card-radius:  8px;

  /* Tipografía */
  --wl-font:    'Inter', 'Segoe UI', system-ui, sans-serif;
  --wl-fs-base: 0.9rem;
  --wl-fs-sm:   0.8rem;
  --wl-fs-xs:   0.72rem;

  /* Transiciones */
  --wl-transition: 0.15s ease-in-out;

  /* Compatibilidad con brand-color genérico */
  --brand-color: var(--wl-primary);
}

/* ══════════════════════════════════════════════════════════════════
   2. RESET Y BASE
   ══════════════════════════════════════════════════════════════════ */
body {
  font-family: var(--wl-font);
  font-size: var(--wl-fs-base);
  background: var(--wl-light);
  color: #212529;
  padding-top: 0;          /* navbar es sticky — no necesita padding-top */
}

a {
  color: var(--wl-primary);
  text-decoration: none;
}
a:hover {
  color: var(--wl-cyan);
  text-decoration: underline;
}

/* Thumbnails de fotos OT */
.thumb {
  max-height: 120px;
  border-radius: 6px;
  margin-right: 8px;
  border: 1px solid var(--wl-border);
}

/* ══════════════════════════════════════════════════════════════════
   3. NAVBAR — WetosLabs deep blue
   ══════════════════════════════════════════════════════════════════ */
.navbar.bg-brand,
.bg-brand {
  background-color: var(--wl-deep) !important;
  border-bottom: 2px solid var(--wl-primary);
}

.navbar-brand {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.3px;
  color: #fff !important;
}
.navbar-brand:hover { color: rgba(255,255,255,0.85) !important; }

/* Nav links */
.navbar-dark .navbar-nav .nav-link {
  font-size: var(--wl-fs-sm);
  font-weight: 500;
  color: rgba(255,255,255,0.82);
  padding: 0.45rem 0.75rem;
  border-radius: 4px;
  transition: background var(--wl-transition), color var(--wl-transition);
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
  background: rgba(255,255,255,0.08);
  color: #fff;
  text-decoration: none;
}
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link.show {
  color: #fff;
  background: rgba(21, 101, 192, 0.35);
  border-bottom: 2px solid var(--wl-cyan);
}

/* Dropdown del navbar */
.dropdown-menu {
  border: 1px solid rgba(13, 31, 60, 0.12);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(13, 31, 60, 0.14);
  font-size: var(--wl-fs-sm);
  padding: 0.4rem 0;
}
.dropdown-menu-dark {
  background-color: #1a2a47;
  border-color: rgba(255,255,255,0.08);
}
.dropdown-menu-dark .dropdown-item {
  color: rgba(255,255,255,0.82);
  padding: 0.45rem 1rem 0.45rem 1.75rem;
  position: relative;
  font-size: var(--wl-fs-sm);
  transition: background var(--wl-transition);
}
.dropdown-menu-dark .dropdown-item::before {
  content: "";
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: transparent;
  transition: background var(--wl-transition);
}
.dropdown-menu-dark .dropdown-item:hover,
.dropdown-menu-dark .dropdown-item:focus {
  background: rgba(21, 101, 192, 0.25);
  color: #fff;
}
.dropdown-menu-dark .dropdown-item:hover::before,
.dropdown-menu-dark .dropdown-item.active::before {
  background: var(--wl-cyan);
}
.dropdown-menu-dark .dropdown-item.active {
  background: var(--wl-primary);
  color: #fff;
}
.dropdown-menu-dark .dropdown-divider {
  border-color: rgba(255,255,255,0.10);
}

/* Badge de rol en navbar */
.badge-brand {
  background: var(--wl-primary) !important;
  color: #fff !important;
}

/* ══════════════════════════════════════════════════════════════════
   4. LAYOUT PRINCIPAL
   ══════════════════════════════════════════════════════════════════ */
.container,
.container-fluid {
  padding-top: 1.25rem;
  padding-bottom: 2rem;
}

/* Page header (título + acciones) */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--wl-border);
}
.page-header h3,
.page-header h4 {
  margin: 0;
  font-weight: 700;
  color: var(--wl-deep);
  font-size: 1.15rem;
}

/* Context banner (empresa/activo) */
.context-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.6rem 1rem;
  background: var(--wl-white);
  border: 1px solid var(--wl-border);
  border-radius: var(--wl-card-radius);
  margin-bottom: 1.25rem;
  box-shadow: var(--wl-card-shadow);
}

/* ══════════════════════════════════════════════════════════════════
   5. CARDS
   ══════════════════════════════════════════════════════════════════ */
.card {
  border: 1px solid var(--wl-border);
  border-radius: var(--wl-card-radius);
  box-shadow: var(--wl-card-shadow);
  background: var(--wl-white);
}
.card-header {
  background: var(--wl-white);
  border-bottom: 1px solid var(--wl-border);
  padding: 0.75rem 1rem;
  font-weight: 600;
  color: var(--wl-deep);
  font-size: var(--wl-fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* KPI cards */
.kpi-card .card-body {
  padding: 1rem 1.1rem 0.8rem;
}
.kpi-card .kpi-label {
  font-size: var(--wl-fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--wl-metal);
  margin-bottom: 0.3rem;
}
.kpi-card .kpi-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--wl-deep);
  line-height: 1;
}
.kpi-card .kpi-sub {
  font-size: var(--wl-fs-xs);
  color: var(--wl-metal);
  margin-top: 0.3rem;
}
.kpi-card:hover {
  box-shadow: 0 3px 12px rgba(13, 31, 60, 0.13);
  transform: translateY(-1px);
  transition: box-shadow var(--wl-transition), transform var(--wl-transition);
}

/* ══════════════════════════════════════════════════════════════════
   6. TABLAS
   ══════════════════════════════════════════════════════════════════ */
.table {
  font-size: var(--wl-fs-sm);
  margin-bottom: 0;
}
.table th {
  font-weight: 600;
  font-size: var(--wl-fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--wl-metal);
  background: #F8F9FB;
  border-bottom: 2px solid var(--wl-border);
  white-space: nowrap;
  padding: 0.55rem 0.75rem;
}
.table td {
  vertical-align: middle;
  padding: 0.55rem 0.75rem;
  border-color: #F0F2F5;
}
.table tbody tr:hover {
  background: rgba(21, 101, 192, 0.035);
}
.table-responsive {
  border-radius: var(--wl-card-radius);
  border: 1px solid var(--wl-border);
}
.table-responsive thead th {
  position: sticky;
  top: 0;
  background: #F8F9FB;
  z-index: 1;
}

/* Tabla compacta */
.table-compact th,
.table-compact td {
  padding: 0.35rem 0.6rem;
  font-size: var(--wl-fs-xs);
}

/* ══════════════════════════════════════════════════════════════════
   7. BOTONES
   ══════════════════════════════════════════════════════════════════ */
.btn {
  font-size: var(--wl-fs-sm);
  font-weight: 500;
  border-radius: 5px;
  padding: 0.38rem 0.85rem;
  transition: all var(--wl-transition);
}
.btn-sm {
  font-size: var(--wl-fs-xs);
  padding: 0.25rem 0.6rem;
}

/* Primario — azul eléctrico */
.btn-primary {
  background: var(--wl-primary);
  border-color: var(--wl-primary);
  color: #fff;
}
.btn-primary:hover {
  background: #1251a3;
  border-color: #1251a3;
  box-shadow: 0 2px 8px rgba(21, 101, 192, 0.3);
}

/* Outline primary */
.btn-outline-primary {
  color: var(--wl-primary);
  border-color: var(--wl-primary);
  border-width: 1.5px;
}
.btn-outline-primary:hover {
  background: var(--wl-primary);
  color: #fff;
  box-shadow: 0 2px 6px rgba(21, 101, 192, 0.25);
}

/* Botón naranja (acento) */
.btn-warning {
  background: var(--wl-orange);
  border-color: var(--wl-orange);
  color: #fff;
}
.btn-warning:hover {
  background: #e65100;
  border-color: #e65100;
  color: #fff;
}
.btn-outline-warning {
  color: var(--wl-orange);
  border-color: var(--wl-orange);
  border-width: 1.5px;
}
.btn-outline-warning:hover {
  background: var(--wl-orange);
  color: #fff;
}

/* Danger */
.btn-danger { background: var(--wl-danger); border-color: var(--wl-danger); }
.btn-danger:hover { background: #b71c1c; border-color: #b71c1c; }

/* Grupo de botones de acción en tablas */
.btn-group-actions {
  display: flex;
  gap: 0.3rem;
  flex-wrap: nowrap;
  align-items: center;
}

/* ══════════════════════════════════════════════════════════════════
   8. BADGES DE ESTADO
   ══════════════════════════════════════════════════════════════════ */
.badge {
  font-size: var(--wl-fs-xs);
  font-weight: 600;
  padding: 0.3em 0.65em;
  border-radius: 4px;
  letter-spacing: 0.3px;
}

/* Estados de OT */
.badge-wo-open      { background: #E3F2FD; color: var(--wl-primary); }
.badge-wo-progress  { background: #FFF3E0; color: #E65100; }
.badge-wo-done      { background: #E8F5E9; color: var(--wl-success); }
.badge-wo-cancelled { background: #ECEFF1; color: #546E7A; }
.badge-wo-overdue   { background: #FFEBEE; color: var(--wl-danger); }

/* Estados de certificados */
.badge-cert-active  { background: #E8F5E9; color: var(--wl-success); }
.badge-cert-expiring{ background: #FFF8E1; color: #F9A825; }
.badge-cert-expired { background: #FFEBEE; color: var(--wl-danger); }

/* Criticidad de equipos */
.badge-crit-alta   { background: #FFEBEE; color: var(--wl-danger); }
.badge-crit-media  { background: #FFF3E0; color: #E65100; }
.badge-crit-baja   { background: #E8F5E9; color: var(--wl-success); }

/* Tipos de OT */
.badge-type-prev   { background: #E3F2FD; color: var(--wl-primary); }
.badge-type-corr   { background: #FCE4EC; color: #C2185B; }
.badge-type-pred   { background: #F3E5F5; color: #7B1FA2; }

/* Roles */
.badge-role-admin  { background: var(--wl-primary); color: #fff; }
.badge-role-sup    { background: #FFF3E0; color: #E65100; }
.badge-role-tech   { background: #E0F7FA; color: #00838F; }

/* ══════════════════════════════════════════════════════════════════
   9. FORMULARIOS
   ══════════════════════════════════════════════════════════════════ */
.form-label {
  font-size: var(--wl-fs-xs);
  font-weight: 600;
  color: var(--wl-metal);
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.form-control,
.form-select {
  font-size: var(--wl-fs-sm);
  border-color: var(--wl-border);
  border-radius: 5px;
  transition: border-color var(--wl-transition), box-shadow var(--wl-transition);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--wl-primary);
  box-shadow: 0 0 0 0.2rem rgba(21, 101, 192, 0.18);
}
.form-control-sm,
.form-select-sm {
  font-size: var(--wl-fs-xs);
}

/* Filter card (barra de filtros) */
.filter-card {
  background: var(--wl-white);
  border: 1px solid var(--wl-border);
  border-radius: var(--wl-card-radius);
  padding: 0.85rem 1rem;
  margin-bottom: 1rem;
  box-shadow: var(--wl-card-shadow);
}

/* ══════════════════════════════════════════════════════════════════
   10. ALERTS / FLASH MESSAGES
   ══════════════════════════════════════════════════════════════════ */
.alert {
  font-size: var(--wl-fs-sm);
  border-radius: 6px;
  padding: 0.65rem 1rem;
  border-width: 1px;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.alert-success {
  background: #E8F5E9;
  border-color: #A5D6A7;
  color: #1B5E20;
}
.alert-danger {
  background: #FFEBEE;
  border-color: #EF9A9A;
  color: #B71C1C;
}
.alert-warning {
  background: #FFF8E1;
  border-color: #FFE082;
  color: #E65100;
}
.alert-info {
  background: #E1F5FE;
  border-color: #81D4FA;
  color: #01579B;
}

/* ══════════════════════════════════════════════════════════════════
   11. SIDEBAR / PANEL DE DETALLE
   ══════════════════════════════════════════════════════════════════ */
.detail-label {
  font-size: var(--wl-fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--wl-metal);
}
.detail-value {
  font-size: var(--wl-fs-sm);
  color: #212529;
}

/* ══════════════════════════════════════════════════════════════════
   12. ACCIONES EN TABLAS (especifico para equipment)
   ══════════════════════════════════════════════════════════════════ */
.actions-compact {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.actions-compact .form-inline {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: nowrap;
}
.actions-compact .hours-input {
  max-width: 120px;
}

/* ══════════════════════════════════════════════════════════════════
   13. EMPTY STATE
   ══════════════════════════════════════════════════════════════════ */
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--wl-metal);
}
.empty-state .empty-icon {
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
  opacity: 0.4;
}
.empty-state p {
  font-size: var(--wl-fs-sm);
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════════
   14. RESPONSIVE
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .kpi-card .kpi-value {
    font-size: 1.4rem;
  }
  .btn-group-actions {
    flex-wrap: wrap;
  }
  .table-responsive .btn-sm {
    padding: 0.2rem 0.45rem;
    font-size: 0.7rem;
  }
  /* Ocultar columnas menos importantes en móvil */
  .hide-mobile {
    display: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   15. UTILIDADES
   ══════════════════════════════════════════════════════════════════ */
.text-brand  { color: var(--wl-primary) !important; }
.bg-brand    { background-color: var(--wl-deep) !important; }
.link-brand  { color: var(--wl-primary); }
.border-brand{ border-color: var(--wl-primary) !important; }

.text-nowrap { white-space: nowrap; }
.fw-600      { font-weight: 600; }
.fs-xs       { font-size: var(--wl-fs-xs); }
.fs-sm       { font-size: var(--wl-fs-sm); }

/* Folio / ID chips */
.folio-chip {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: var(--wl-fs-xs);
  background: #EEF2FF;
  color: var(--wl-primary);
  padding: 0.15em 0.5em;
  border-radius: 3px;
  font-weight: 600;
}