/* ==========================================================================
   theme.css — Re-skin moderno del dashboard (2026-08)
   Fuente de verdad del look. Se carga DESPUÉS de style.css/post.css/app.css
   y los sobreescribe por especificidad. No recompilar con gulp/scss: la
   carpeta scss/ está desincronizada; este archivo es el que manda.
   Paleta de marca original conservada (ver spec).
   ========================================================================== */

:root {
  /* Marca */
  --brand-dark: #032942;
  --brand-sidebar: #d4e9ff;
  --brand-teal: #0e465f;
  --brand-navy: #0b275c;
  --brand-primary: #20a8d8;
  --brand-primary-dark: #1a8cb8;
  --brand-text: #2c3141;

  /* Tintes */
  --brand-tint-1: #e8f3ff;
  --brand-tint-2: #c2def9;
  --table-header-bg: #f0f7fd;
  --input-border: #d5dee8;

  /* Semáforo */
  --success: #4dbd74;
  --info: #63c2de;
  --warning: #f8cb00;
  --danger: #f86c6b;

  /* Sombras (base azul marca) */
  --shadow-sm: 0 1px 3px rgba(3, 41, 66, .08);
  --shadow-md: 0 4px 12px rgba(3, 41, 66, .10);
  --shadow-lg: 0 12px 32px rgba(3, 41, 66, .14);

  /* Radios */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-card: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  /* Movimiento */
  --transition: all .18s ease;
}

/* ---------- Base (modo claro) ---------- */
/* Fondo del contenido: gris azulado suave para que las cards blancas
   "floten". El modo oscuro lo pisa con su propio body más abajo. */
body {
  background-color: #eef3f8;
}

/* ---------- Botones ---------- */
.btn {
  border: none;
  border-radius: var(--radius-md);
  font-weight: 600;
  letter-spacing: .01em;
  transition: var(--transition);
}
.btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}
.btn:focus,
.btn.focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(32, 168, 216, .35);
}
.btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}
.btn-primary {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
}
.btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #23b4e8, var(--brand-primary-dark));
}
.btn-secondary {
  background: #e4ebf2;
  color: var(--brand-teal);
}
.btn-secondary:hover:not(:disabled) {
  background: #d3dfec;
  color: var(--brand-teal);
}

/* ---------- Badges (color sobrio: tinte + texto fuerte) ---------- */
.badge {
  border-radius: 50rem;
  padding: .35em .7em;
  font-weight: 600;
}
.badge-primary { background: #e3f2fa; color: var(--brand-primary-dark); }
.badge-success { background: #e5f6ec; color: #2e7d46; }
.badge-info    { background: #e7f5fa; color: #1a7a96; }
.badge-warning { background: #fdf3d7; color: #8a6d00; }
.badge-danger  { background: #fdeaea; color: #b03232; }
.badge a { color: inherit; }

/* ---------- Formularios ---------- */
.form-control {
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  transition: var(--transition);
}
.form-control:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(32, 168, 216, .18);
  outline: none;
}
.col-form-label,
.form-group label {
  font-weight: 600;
  color: var(--brand-text);
}
.input-group-addon {
  background: var(--brand-tint-1);
  border: 1px solid var(--input-border);
  color: var(--brand-teal);
}
/* ui-select con el mismo look */
.ui-select-bootstrap > .ui-select-match {
  border-radius: var(--radius-sm);
}

/* ---------- Header ---------- */
.app-header.navbar {
  box-shadow: 0 2px 8px rgba(3, 41, 66, .25);
  border-bottom: none;
}
/* Aire para el logo: la caja del brand era 205px con el logo de 200px
   (2.5px por lado). Se ensancha la caja; el logo NO cambia de tamaño.
   En mobile no aplica: la regla responsive de style.css usa !important. */
.app-header.navbar .navbar-brand {
  width: 240px;
  padding: 0.5rem 1.25rem;
}

/* ---------- Breadcrumb ---------- */
.breadcrumb {
  background: transparent;
  border-bottom: 1px solid rgba(3, 41, 66, .06);
}
.breadcrumb a {
  color: var(--brand-primary);
  transition: var(--transition);
}
.breadcrumb a:hover {
  color: var(--brand-primary-dark);
  text-decoration: none;
}

/* ---------- Sidebar ---------- */
/* CoreUI (style.css) declara hover/active con la cadena
   .sidebar .nav .nav-item .nav-link y !important; hay que igualar la
   especificidad y usar !important para ganarle al violeta #d595fa. */
.sidebar .nav .nav-item .nav-link {
  border-radius: var(--radius-md) !important; /* gana al 5px right-radius de style.css en hover/active */
  margin: 2px 8px;
  transition: var(--transition);
}
.sidebar .nav .nav-item .nav-link:hover {
  background: var(--brand-tint-2) !important; /* reemplaza el violeta #d595fa de style.css */
  color: var(--brand-teal) !important;
}
.sidebar .nav .nav-item .nav-link:hover i {
  color: var(--brand-teal) !important;
}
.sidebar .nav .nav-item .nav-link.active {
  background: var(--brand-teal);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.sidebar .nav .nav-item .nav-link.active i {
  color: #fff;
}

/* ---------- Cards ---------- */
/* .main .card empata en especificidad con ".ng-scope>.card{border:none}" de
   style.css:20 y gana por venir después en cascada. */
.main .card {
  /* gris un punto más claro que el fondo de página (#eef3f8): el contenido
     de las secciones no queda en blanco puro */
  background-color: #f7fafc;
  border: 1px solid rgba(3, 41, 66, .07);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
}
.main .card-header {
  background: transparent;
  border-bottom: 1px solid rgba(3, 41, 66, .07);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  font-weight: 600;
  color: var(--brand-teal);
}

/* ---------- Tablas / DataTables ---------- */
.table thead th {
  background: var(--table-header-bg);
  color: var(--brand-teal);
  border-top: none;
  border-bottom: 2px solid var(--brand-tint-2);
  font-weight: 600;
}
.table td {
  border-top: 1px solid rgba(3, 41, 66, .06);
}
.table-hover tbody tr:hover {
  background: var(--brand-tint-1);
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  padding: .35rem .6rem;
}
.dataTables_wrapper .pagination a {
  border: none;
  border-radius: var(--radius-sm);
  margin: 0 2px;
  color: var(--brand-teal);
  transition: var(--transition);
}
.dataTables_wrapper .pagination a:hover {
  background: var(--brand-tint-2);
  color: var(--brand-teal);
}
.dataTables_wrapper .pagination .active a {
  background: var(--brand-primary);
  color: #fff;
}

/* ---------- Modales ---------- */
.modal-content {
  border: none;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}
.modal-header {
  border-bottom: 1px solid rgba(3, 41, 66, .07);
}
.modal-title {
  color: var(--brand-teal);
  font-weight: 600;
}

/* ---------- Tabs de modales -> pills ---------- */
.modal .nav-tabs {
  border-bottom: none;
}
.modal .nav-tabs .nav-link {
  border: none;
  border-radius: 50rem;
  margin-right: 6px;
  color: var(--brand-teal);
  transition: var(--transition);
  cursor: pointer;
}
.modal .nav-tabs .nav-link:hover {
  background: var(--brand-tint-1);
}
.modal .nav-tabs .nav-link.active {
  background: var(--brand-teal);
  color: #fff;
}

/* ---------- Login ---------- */
.login-page {
  background:
    radial-gradient(ellipse at 80% -10%, rgba(32, 168, 216, .35), transparent 55%),
    linear-gradient(135deg, var(--brand-dark) 0%, var(--brand-teal) 60%, #14617f 100%);
  min-height: 100vh;
}
.login-card-group {
  border: none;
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, .97);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: loginIn .45s ease both;
}
@keyframes loginIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.login-form-card {
  border: none;
  background: transparent;
}
.login-title {
  color: var(--brand-dark);
  font-weight: 700;
}
.login-subtitle {
  color: #6b7a8d;
}
.login-card {
  border: none;
  background: #eceff1; /* gris claro: el logo es azul oscuro, sobre gradiente oscuro se perdía */
}
.login-card .card-block {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.login-btn {
  padding: .7rem;
  font-size: 1.05rem;
}

/* ---------- Panel principal (cards de sensores) ---------- */
#mainPage {
  background-color: #f4f8fc !important; /* pisa el inline #eee de main.html */
  border-radius: var(--radius-card);
}
#mainPage .alert-info {
  background: var(--brand-tint-1);
  color: var(--brand-teal);
  border: none;
  border-radius: var(--radius-sm);
}
.card-home {
  border: none;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: var(--transition);
}
.card-home:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}
/* Tiles de sensores: mismos colores, versión gradiente */
.home-item {
  border: none;
  border-radius: var(--radius-card);
  background: linear-gradient(160deg, #25a215, #1c7e0f);
  box-shadow: var(--shadow-sm);
  margin: 2px;
}
.home-item .date {
  background: rgba(0, 0, 0, .18);
  border-radius: var(--radius-sm);
}
.home-alert1 { background: linear-gradient(160deg, #b91f1f, #8f1212); }
.home-alert2 { background: linear-gradient(160deg, #c9a016, #9c7a0e); }
.home-alert3 { background: linear-gradient(160deg, #5a5a59, #3d3d3c); }
.home-alert1 .date,
.home-alert2 .date,
.home-alert3 .date {
  background: rgba(0, 0, 0, .22);
}

/* ---------- Páginas de error ---------- */
.error-page {
  background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand-teal) 100%);
  min-height: 100vh;
}
.error-code {
  font-size: 5rem;
  font-weight: 800;
  color: #fff;
}
.error-text {
  color: var(--brand-tint-2);
  margin-bottom: 1.5rem;
}

/* ---------- Botón de modo oscuro (navbar) ---------- */
#theme-toggle {
  color: #fff;
  background: transparent;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  padding: .5rem .75rem;
}
#theme-toggle:hover {
  color: var(--brand-primary);
}
/* Swap de ícono por CSS (robusto con ng-include: no depende de timing de JS) */
.icon-when-dark {
  display: none;
}
.dark-mode .icon-when-dark {
  display: inline;
}
.dark-mode .icon-when-light {
  display: none;
}

/* ==========================================================================
   Modo oscuro — se activa con la clase .dark-mode en <html> (js/theme-toggle.js)
   Los tokens de tinte se redefinen: las reglas claras que los usan
   (hovers de tabla, sidebar, focus, tabs) flippan solas.
   ========================================================================== */
.dark-mode {
  --brand-tint-1: #16374c;
  --brand-tint-2: #1d4258;
  --table-header-bg: #12303f;
  --input-border: #2b4a5e;
}
.dark-mode body {
  background: #0a2233;
  color: #e3edf4;
}

/* Header / breadcrumb / footer */
.dark-mode .app-header.navbar {
  background: #021d2e;
}
.dark-mode .breadcrumb {
  border-bottom-color: rgba(227, 237, 244, .08);
}
.dark-mode .breadcrumb,
.dark-mode .breadcrumb .active {
  color: #9db8c6;
}
.dark-mode .app-footer {
  background: #0d2836;
  color: #9db8c6;
}

/* Sidebar (hover y active usan las mismas cadenas + !important que la sección clara) */
.dark-mode .sidebar {
  background: #0d2836;
}
.dark-mode .sidebar .nav .nav-item .nav-link {
  color: #c6d9e4;
}
.dark-mode .sidebar .nav .nav-item .nav-link i {
  color: #9db8c6;
}
.dark-mode .sidebar .nav .nav-item .nav-link:hover {
  color: #fff !important;
}
.dark-mode .sidebar .nav .nav-item .nav-link:hover i {
  color: #fff !important;
}
.dark-mode .sidebar .nav .nav-item .nav-link.active {
  background: #14617f;
  color: #fff;
}

/* Cards / tablas / DataTables */
.dark-mode .main .card {
  background: #0f2f44;
  border-color: rgba(227, 237, 244, .08);
  color: #e3edf4;
}
.dark-mode .main .card-header {
  background: #14394e;
  border-bottom-color: rgba(227, 237, 244, .08);
  color: #e3edf4;
}
.dark-mode .table {
  color: #e3edf4;
}
.dark-mode .table thead th {
  color: #9fc3d8;
  border-bottom-color: #1d4258;
}
.dark-mode .table td {
  border-top-color: rgba(227, 237, 244, .07);
}
.dark-mode .dataTables_wrapper {
  color: #c6d9e4;
}
.dark-mode .dataTables_wrapper .pagination a {
  color: #c6d9e4;
}
.dark-mode .dataTables_wrapper .dataTables_filter input,
.dark-mode .dataTables_wrapper .dataTables_length select {
  background: #0a2233;
  border-color: var(--input-border);
  color: #e3edf4;
}

/* Modales / tabs */
.dark-mode .modal-content {
  background: #0f2f44;
  color: #e3edf4;
}
.dark-mode .modal-header {
  border-bottom-color: rgba(227, 237, 244, .08);
}
.dark-mode .modal-title {
  color: #e3edf4;
}
.dark-mode .modal-header .close {
  color: #e3edf4;
  text-shadow: none;
}
.dark-mode .modal-footer {
  border-top-color: rgba(227, 237, 244, .08);
}
.dark-mode .modal .nav-tabs .nav-link {
  color: #9fc3d8;
}

/* Formularios */
.dark-mode .form-control {
  background: #0a2233;
  border-color: var(--input-border);
  color: #e3edf4;
}
.dark-mode .form-control::placeholder {
  color: #6f8a99;
}
.dark-mode select.form-control option {
  background: #0f2f44;
  color: #e3edf4;
}
.dark-mode .input-group-addon {
  background: #14394e;
  border-color: var(--input-border);
  color: #9fc3d8;
}
.dark-mode .col-form-label,
.dark-mode .form-group label {
  color: #c6d9e4;
}
.dark-mode .ui-select-bootstrap > .ui-select-match {
  background: #0a2233;
  border-color: var(--input-border);
  color: #e3edf4;
}

/* Botones */
.dark-mode .btn-secondary {
  background: #1d4258;
  color: #e3edf4;
}
.dark-mode .btn-secondary:hover:not(:disabled) {
  background: #254f68;
  color: #fff;
}

/* Badges: variantes oscuras translúcidas */
.dark-mode .badge-primary { background: rgba(32, 168, 216, .18); color: #6fc8e8; }
.dark-mode .badge-success { background: rgba(77, 189, 116, .18); color: #7ddba0; }
.dark-mode .badge-info    { background: rgba(99, 194, 222, .18); color: #8fd4e8; }
.dark-mode .badge-warning { background: rgba(248, 203, 0, .16); color: #f4d24a; }
.dark-mode .badge-danger  { background: rgba(248, 108, 107, .16); color: #f79c9b; }

/* Panel principal (cards de sensores) */
.dark-mode #mainPage {
  background-color: #0d2836 !important; /* pisa el inline #eee de main.html */
}
.dark-mode #mainPage .alert-info {
  background: #12303f;
  color: #9fc3d8;
}
.dark-mode .card-home {
  background: #0f2f44;
}
.dark-mode .card-home .card-header {
  background: transparent !important; /* pisa el inline white de main.html */
  color: #e3edf4;
}

/* Login: el panel del logo mantiene el gris claro en ambos modos
   (el logo azul oscuro se pierde sobre fondo oscuro — decisión del usuario) */
.dark-mode .login-page {
  background:
    radial-gradient(ellipse at 80% -10%, rgba(32, 168, 216, .18), transparent 55%),
    linear-gradient(135deg, #021d2e 0%, #0a2233 60%, #0d2836 100%);
}
.dark-mode .login-card-group {
  background: #0f2f44;
}
.dark-mode .login-title {
  color: #e3edf4;
}
.dark-mode .login-subtitle {
  color: #9db8c6;
}

/* ---------- Fixes del review final (modo oscuro) ---------- */
/* Tabla striped (Actividad): filas impares #eceff1 de style.css quedaban claras */
.dark-mode .table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(227, 237, 244, .05);
}
/* Headers inline "antiquewhite" del modal de Dispositivos (machines.html) */
.dark-mode .modal-body div[style*="antiquewhite"] {
  background-color: #12303f !important;
}
/* .error-text vive sobre el gradiente oscuro de .error-page en ambos modos:
   el flip de --brand-tint-2 lo dejaba oscuro-sobre-oscuro */
.dark-mode .error-text {
  color: #9db8c6;
}
/* Empates de especificidad que apagaban estados activos en oscuro */
.dark-mode .modal .nav-tabs .nav-link.active {
  color: #fff;
}
.dark-mode .sidebar .nav .nav-item .nav-link.active i {
  color: #fff;
}
.dark-mode .dataTables_wrapper .pagination .active a {
  color: #fff;
}
/* Filtros de la página de Gráficos (charts.html): .card-filter de style.css:45
   tiene fondo claro hardcodeado */
.dark-mode .card-filter {
  background-color: #12303f;
  border-radius: var(--radius-sm);
}