/* =====================================================================
   Horas AGSCh — estilos de la aplicación
   Principal: azul institucional · Acentos y secundarios: amarillo institucional
   (los colores base se pueden cambiar en config.php → app.color_*)
   ===================================================================== */

:root {
  --agsch-azul: #001558;
  --agsch-azul-2: #0a2a7a;
  --agsch-amarillo: #feb135;
  --agsch-amarillo-2: #eda925;
  --app-bg: #f6f8ff;
  --app-card: #ffffff;
  --app-muted: #6b7489;
  --app-borde: #e3e7f0;
  --app-reloj: var(--agsch-azul);
  --app-verde: #1f9d55;
  --app-rojo: #d62f3f;
  --bs-primary: var(--agsch-azul);
  --bs-primary-rgb: 0, 21, 88;
  --bs-link-color: var(--agsch-azul-2);
  --bs-link-color-rgb: 10, 42, 122;
  --bs-link-hover-color: var(--agsch-azul);
}
[data-bs-theme="dark"] {
  --app-bg: #0b1020;
  --app-card: #141a2e;
  --app-muted: #9aa3ba;
  --app-borde: #263055;
  --app-reloj: #ffffff;
  --bs-primary: #6f8fff;
  --bs-primary-rgb: 111, 143, 255;
  --bs-link-color: #9db2ff;
  --bs-link-color-rgb: 157, 178, 255;
  --bs-body-bg: #0b1020;
}

body {
  background: var(--app-bg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding-bottom: calc(68px + env(safe-area-inset-bottom));
}
@media (min-width: 992px) { body { padding-bottom: 0; } }

.card { background: var(--app-card); border-color: var(--app-borde); border-radius: 1rem; }
.text-muted, .form-text { color: var(--app-muted) !important; }
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- Botones ---------- */
.btn-primary {
  --bs-btn-bg: var(--agsch-azul); --bs-btn-border-color: var(--agsch-azul); --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--agsch-azul-2); --bs-btn-hover-border-color: var(--agsch-azul-2); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #000d38; --bs-btn-active-border-color: #000d38;
  --bs-btn-disabled-bg: var(--agsch-azul); --bs-btn-disabled-border-color: var(--agsch-azul);
  --bs-btn-focus-shadow-rgb: 254, 177, 53;
}
.btn-warning {
  --bs-btn-bg: var(--agsch-amarillo); --bs-btn-border-color: var(--agsch-amarillo); --bs-btn-color: var(--agsch-azul);
  --bs-btn-hover-bg: var(--agsch-amarillo-2); --bs-btn-hover-border-color: var(--agsch-amarillo-2); --bs-btn-hover-color: var(--agsch-azul);
  --bs-btn-active-bg: var(--agsch-amarillo-2); --bs-btn-active-color: var(--agsch-azul);
}
.btn-outline-primary {
  --bs-btn-color: var(--agsch-azul); --bs-btn-border-color: var(--agsch-amarillo);
  --bs-btn-hover-bg: var(--agsch-amarillo); --bs-btn-hover-border-color: var(--agsch-amarillo); --bs-btn-hover-color: var(--agsch-azul);
  --bs-btn-active-bg: var(--agsch-amarillo-2); --bs-btn-active-border-color: var(--agsch-amarillo-2); --bs-btn-active-color: var(--agsch-azul);
  --bs-btn-focus-shadow-rgb: 254, 177, 53;
  border-width: 2px; font-weight: 600;
}
[data-bs-theme="dark"] .btn-primary { --bs-btn-bg: #2a4bc0; --bs-btn-border-color: #2a4bc0; --bs-btn-hover-bg: #3a5bd0; --bs-btn-hover-border-color: #3a5bd0; }
[data-bs-theme="dark"] .btn-outline-primary { --bs-btn-color: var(--agsch-amarillo); }

.text-bg-primary { background-color: var(--agsch-azul) !important; }
.text-primary { color: var(--bs-primary) !important; }
.form-check-input:checked { background-color: var(--agsch-azul); border-color: var(--agsch-azul); }
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--agsch-amarillo); box-shadow: 0 0 0 .2rem rgba(254, 177, 53, .3);
}
.nav-tabs .nav-link { color: var(--app-muted); }
.nav-tabs .nav-link.active { color: var(--bs-primary); font-weight: 600; border-bottom: 3px solid var(--agsch-amarillo); }
.text-warning-emphasis { color: #b37400 !important; }
[data-bs-theme="dark"] .text-warning-emphasis { color: var(--agsch-amarillo) !important; }

/* ---------- Encabezado ---------- */
.app-header { background: var(--agsch-azul); position: relative; z-index: 1030; }
.app-header .nav-link { color: rgba(255, 255, 255, .75); border-radius: .5rem; }
.app-header .nav-link:hover, .app-header .nav-link.active { color: #fff; background: rgba(255, 255, 255, .1); }
.avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--agsch-amarillo); color: var(--agsch-azul);
  font-weight: 700; font-size: .85rem;
  display: inline-flex; align-items: center; justify-content: center;
}

.badge-notif { position: absolute; top: 0; right: -2px; font-size: .6rem; color: var(--agsch-azul) !important; }
.centro-notificaciones { width: min(360px, calc(100vw - 32px)); max-height: 70vh; overflow: auto; }
.centro-notificaciones .no-leida { background: rgba(254, 177, 53, .12); }

/* ---------- Bienvenida (instalar y notificaciones) ---------- */
.beneficio i { color: var(--agsch-amarillo-2); font-size: 1.15rem; }
.banner-aviso { background: rgba(254, 177, 53, .18); border: 1px solid rgba(254, 177, 53, .5); border-radius: .75rem; }
.paso { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--agsch-azul); color: #fff; font-size: .8rem; display: inline-flex; align-items: center; justify-content: center; flex: none; }
[data-bs-theme="dark"] .paso { background: var(--agsch-amarillo); color: var(--agsch-azul); }

/* ---------- Navegación inferior (móvil) ---------- */
.nav-inferior { background: var(--app-card); border-top: 1px solid var(--app-borde); padding-bottom: env(safe-area-inset-bottom); }
.nav-inferior a { color: var(--app-muted); text-decoration: none; font-size: .7rem; flex: 1; text-align: center; padding: .45rem 0; }
.nav-inferior a i { font-size: 1.35rem; display: block; }
.nav-inferior a.active { color: var(--bs-primary); font-weight: 600; }

/* ---------- Páginas sin sesión (login) ---------- */
.pagina-simple { padding-bottom: 0; min-height: 100vh; display: flex; align-items: center; }
.contenedor-simple { width: 100%; max-width: 420px; margin: 0 auto; padding: 2rem 16px; }

/* ---------- Requisitos de contraseña ---------- */
.requisitos-clave li { color: var(--app-muted); }
.requisitos-clave li.cumple { color: var(--app-verde); }

.clave-temporal {
  font-family: ui-monospace, Consolas, monospace; font-size: 1.6rem; font-weight: 700; letter-spacing: .08em;
  background: rgba(254, 177, 53, .18); border: 2px dashed var(--agsch-amarillo); border-radius: .75rem; padding: .6rem 1rem;
}

/* ---------- Matriz de permisos ---------- */
.permiso-fila { border-bottom: 1px solid var(--app-borde); }
.permiso-fila:last-child { border-bottom: 0; }

/* ---------- Proyectos ---------- */
.punto { width: .7rem; height: .7rem; border-radius: 50%; display: inline-block; flex: none; }
.proyecto { border-left: 6px solid var(--color, #999); width: 100%; }
.proyecto:hover { border-color: var(--app-borde); border-left-color: var(--color, #999); box-shadow: 0 .25rem .75rem rgba(0, 21, 88, .08) !important; }
.proyecto.seleccionado { box-shadow: 0 0 0 2px var(--agsch-amarillo) !important; }
.muestra-color { width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 0; padding: 0; }
.muestra-color.activa { outline: 3px solid var(--agsch-amarillo); outline-offset: 2px; }
.form-control-color { width: 2.4rem; height: 1.9rem; padding: .15rem; }

/* ---------- Barra fija del cronómetro ---------- */
.barra-crono { background: var(--agsch-azul-2); color: #fff; position: sticky; top: 0; z-index: 1020; }
.punto-vivo { width: .6rem; height: .6rem; border-radius: 50%; background: var(--agsch-amarillo); display: inline-block; flex: none; animation: latido 1.4s infinite; }
@keyframes latido { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .punto-vivo { animation: none; } }

/* ---------- Cronómetro ---------- */
.reloj { font-size: clamp(3rem, 14vw, 4.5rem); font-weight: 700; color: var(--app-reloj); letter-spacing: .02em; line-height: 1; }
.btn-crono {
  width: 104px; height: 104px; border-radius: 50%; font-size: 2.6rem; border: 0; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; transition: transform .1s;
}
.btn-crono:active { transform: scale(.95); }
.btn-crono:disabled { opacity: .6; }
.btn-crono.iniciar { background: var(--app-verde); box-shadow: 0 10px 24px rgba(31, 157, 85, .35); }
.btn-crono.detener { background: var(--app-rojo); box-shadow: 0 10px 24px rgba(214, 47, 63, .35); }
.ts-wrapper.single .ts-control { min-height: 38px; }

/* ---------- Listado de registros ---------- */
.dia-cab { background: rgba(0, 21, 88, .04); border-top: 1px solid var(--app-borde); border-bottom: 1px solid var(--app-borde); }
[data-bs-theme="dark"] .dia-cab { background: rgba(255, 255, 255, .04); }
.periodo { border-bottom: 1px solid var(--app-borde); }
.periodo:last-child { border-bottom: 0; }
.periodo.en-curso { background: rgba(254, 177, 53, .12); }
.min-w-0 { min-width: 0; }

/* ---------- Multiplicadores ---------- */
.origen { font-size: .72rem; border-radius: .4rem; padding: .15rem .45rem; font-weight: 600; white-space: nowrap; }
.o-fu { background: #e8defc; color: #5b2bb5; }
.o-fg { background: #dbe7ff; color: #1c46b8; }
.o-fe { background: #ffe9c7; color: #8a5a00; }
.o-su { background: #d8f3e6; color: #11734a; }
.o-sg { background: #eceef3; color: #4a5267; }
[data-bs-theme="dark"] .origen { filter: brightness(.85) saturate(1.2); }
.list-group-item.active-agsch { border-left: 4px solid var(--agsch-amarillo); font-weight: 600; }

/* ---------- Informes ---------- */
.col-propuesta { background: rgba(254, 177, 53, .14) !important; font-weight: 600; }

/* ---------- Feriados y sistema ---------- */
.zona-subida { border: 2px dashed var(--app-borde); border-radius: 1rem; cursor: pointer; }
.zona-subida:hover { border-color: var(--agsch-amarillo); }
.comando { font-family: ui-monospace, Consolas, monospace; font-size: .78rem; }

/* ---------- Toasts ---------- */
/* Arriba a la derecha, con ancho máximo; la «×» fija en la esquina superior derecha. */
.toastify {
  border-radius: .75rem; font-size: .9rem; line-height: 1.4; box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
  width: auto; max-width: min(360px, calc(100vw - 32px)); padding: 12px 40px 12px 16px;
}
.toastify-right { right: 16px; }
@media (max-width: 360px) {
  .toastify-right { left: auto; right: 16px; margin: 0; }
}
.toastify .toast-close {
  position: absolute; top: 6px; right: 8px; padding: 2px 6px;
  font-size: 1.25rem; line-height: 1; color: inherit; opacity: .7;
}
.toastify .toast-close:hover, .toastify .toast-close:focus { opacity: 1; }
.toast-contenido { display: flex; gap: .55rem; align-items: flex-start; }
.toast-contenido .bi { font-size: 1.1rem; line-height: 1.25; flex: none; }
.toast-exito { background: #1f9d55; color: #fff; }
.toast-error { background: #d62f3f; color: #fff; }
.toast-aviso { background: #feb135; color: #3d2a00; }
.toast-info { background: #1f5fbf; color: #fff; }

/* ---------- SweetAlert2 ---------- */
.swal2-popup { border-radius: 1rem; }
.swal2-styled.swal2-confirm { background: var(--agsch-azul) !important; }
.swal2-styled.swal2-cancel { background: transparent !important; color: var(--agsch-azul) !important; border: 2px solid var(--agsch-amarillo) !important; }