/* ==========================================================
   KIOSCO DIGITAL ITZ — REDISEÑO VISUAL INSTITUCIONAL
   Solo presentación. No altera rutas, lógica ni controles JS.
   ========================================================== */
:root {
  --itz-950:#071b3a;
  --itz-900:#0b2854;
  --itz-800:#123b75;
  --itz-700:#174f91;
  --itz-600:#1d65b8;
  --itz-500:#287bd4;
  --itz-cyan:#26b6d7;
  --itz-bg:#f2f6fc;
  --itz-surface:#ffffff;
  --itz-ink:#14243b;
  --itz-muted:#61728a;
  --itz-border:#dce5f0;
  --itz-shadow:0 12px 32px rgba(12,43,84,.10);
  --itz-shadow-hover:0 18px 40px rgba(12,43,84,.16);
  --itz-radius:18px;
}
html { scroll-behavior:smooth; }
body {
  color:var(--itz-ink) !important;
  background-color:var(--itz-bg) !important;
  background-image:
    radial-gradient(ellipse at 8% 0%, rgba(38,182,215,.10), transparent 33%),
    radial-gradient(ellipse at 95% 5%, rgba(40,123,212,.10), transparent 30%),
    linear-gradient(180deg,#f7faff 0%,#eef3fa 100%) !important;
  font-family: "Segoe UI", Inter, Roboto, Arial, sans-serif !important;
  -webkit-font-smoothing:antialiased;
}
::selection { background:rgba(38,182,215,.25); color:var(--itz-950); }
a { transition:color .18s ease, opacity .18s ease; }
a:not([class]) { color:var(--itz-700); }
h1,h2,h3,h4,h5,h6 { letter-spacing:-.025em; }
p, label, small { line-height:1.55; }
hr { border-color:var(--itz-border) !important; opacity:1; }

/* Institutional headers and top bars */
.encabezado, .barra-superior, .header-institucional, .header, .navbar,
.chat-header, .encabezado-principal, .barra-encabezado, .header-brand,
header.encabezado, .topbar {
  background:linear-gradient(120deg,var(--itz-950) 0%,var(--itz-800) 58%,var(--itz-600) 100%) !important;
  color:#fff !important;
  box-shadow:0 8px 28px rgba(7,27,58,.20) !important;
  border-color:rgba(255,255,255,.14) !important;
}
.encabezado h1,.encabezado h2,.barra-superior h1,.barra-superior h2,
.header-institucional h1,.header-institucional h2,header h1,header h2,
.navbar-brand,.chat-header h1,.chat-header h2 {
  color:#fff !important;
}
.encabezado a,.barra-superior a,.header-institucional a,.navbar a,
.chat-header a { color:#fff; }
.logo, .logo img, .header-logo img, .logo-institucional img {
  object-fit:contain;
}

/* Surface panels: retain layout, upgrade finish */
.card, .tarjeta, .service-card, .servicio-card, .panel, .panel-contenido,
.contenedor-formulario, .formulario-card, .form-card, .admin-card,
.stat-card, .estadistica-card, .seccion-card, .contenido-card,
.card-body, .modal-content, .table-responsive, .tabla-contenedor,
.login-card, .login-container .card, .kiosco-card {
  border-color:var(--itz-border) !important;
  border-radius:var(--itz-radius) !important;
}
.card, .tarjeta, .service-card, .servicio-card, .panel, .panel-contenido,
.contenedor-formulario, .formulario-card, .form-card, .admin-card,
.stat-card, .estadistica-card, .seccion-card, .contenido-card,
.login-card, .kiosco-card {
  box-shadow:var(--itz-shadow) !important;
  background-color:rgba(255,255,255,.96);
}
.card:hover, .tarjeta:hover, .service-card:hover, .servicio-card:hover,
.admin-card:hover, .stat-card:hover {
  box-shadow:var(--itz-shadow-hover) !important;
  transition:box-shadow .2s ease, transform .2s ease;
}
.card:hover, .tarjeta:hover, .service-card:hover, .servicio-card:hover {
  transform:translateY(-2px);
}

/* Buttons */
button, .btn, input[type="button"], input[type="submit"], input[type="reset"] {
  border-radius:11px !important;
  font-weight:650 !important;
  letter-spacing:.005em;
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.btn-primary, button.btn-primary, input[type="submit"], .boton-principal,
.btn-success, .btn-info {
  box-shadow:0 5px 14px rgba(23,79,145,.16);
}
.btn-primary, .boton-principal {
  background:linear-gradient(135deg,var(--itz-700),var(--itz-500)) !important;
  border-color:transparent !important;
}
.btn:hover, button:hover, input[type="button"]:hover, input[type="submit"]:hover {
  filter:brightness(1.035);
}
.btn:active, button:active { transform:translateY(1px); }
.btn:focus-visible, button:focus-visible, a:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline:3px solid rgba(38,182,215,.45) !important;
  outline-offset:2px;
}

/* Form controls */
.form-control, .form-select, input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]):not([type=file]),
select, textarea {
  border:1px solid #d5e0ed !important;
  border-radius:10px !important;
  background-color:#fff !important;
  color:var(--itz-ink) !important;
  box-shadow:0 1px 2px rgba(12,43,84,.025);
}
.form-control:focus, .form-select:focus, input:focus, select:focus, textarea:focus {
  border-color:#66a6e8 !important;
  box-shadow:0 0 0 4px rgba(40,123,212,.12) !important;
}
input[type=checkbox], input[type=radio] { accent-color:var(--itz-600); }
input[type=file] { max-width:100%; }

/* Tables */
table { border-color:var(--itz-border) !important; }
.table, table.table {
  --bs-table-color:var(--itz-ink);
  --bs-table-border-color:var(--itz-border);
  --bs-table-striped-bg:#f5f8fd;
  vertical-align:middle;
}
.table thead th, table thead th, th {
  background-color:#eaf1fa !important;
  color:var(--itz-900) !important;
  font-weight:750 !important;
  border-bottom:1px solid #d2deed !important;
}
.table tbody tr:hover, table tbody tr:hover { background-color:#edf6ff !important; }
.table-responsive, .tabla-contenedor { overflow-x:auto; }

/* Badges, alerts, icons */
.badge { border-radius:999px !important; padding:.45em .72em; font-weight:700; }
.alert { border-radius:13px !important; border-width:1px; }
.icono, .service-icon, .icon-container, .icono-servicio {
  border-radius:15px;
}
footer, .pie-pagina, .footer-institucional {
  color:var(--itz-muted);
}

/* Kiosk service tiles and landing page */
.servicios-grid, .grid-servicios, .contenedor-servicios, .tarjetas-servicios {
  gap:clamp(14px,2vw,24px);
}
.service-card, .servicio-card, .tarjeta-servicio, .card-servicio {
  overflow:hidden;
}
.service-card h2, .service-card h3, .servicio-card h2, .servicio-card h3,
.tarjeta-servicio h2, .tarjeta-servicio h3 { color:var(--itz-900); }
.service-card p, .servicio-card p, .tarjeta-servicio p { color:var(--itz-muted); }

/* Camera and face-recognition regions: styling only, no sizing assumptions */
video, canvas, .video-container, .camara-container, .camera-container,
.contenedor-camara, .marco-camara, .camera-frame {
  border-radius:14px;
}
video, .video-container video, .camara-container video, .camera-container video {
  background:#08172b;
  box-shadow:0 8px 22px rgba(7,27,58,.15);
}
canvas { max-width:100%; }
pre, code { border-radius:8px; }

/* Chat interface */
.kiosco-container, #kiosco-main {
  border:1px solid rgba(220,229,240,.95);
  box-shadow:var(--itz-shadow);
}
.header-sugerencias { color:var(--itz-700); font-weight:750; }

/* Accessibility and responsive fit */
img { max-width:100%; }
@media (max-width:768px) {
  body { background-image:linear-gradient(180deg,#f7faff,#eef3fa) !important; }
  .card, .tarjeta, .panel, .panel-contenido { border-radius:14px !important; }
  .btn, button { max-width:100%; }
  table { font-size:.92rem; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}


/* ==========================================================
   PALETA MULTICOLOR INSTITUCIONAL — KIOSCO DIGITAL ITZ
   Capa exclusivamente visual. No cambia lógica ni controles.
   ========================================================== */
:root {
  --itz-navy: #102a43;
  --itz-blue: #1769aa;
  --itz-cyan: #16a6c9;
  --itz-teal: #148a8a;
  --itz-purple: #7356bf;
  --itz-orange: #e58b2a;
  --itz-rose: #d95776;
  --itz-green: #23845b;
  --itz-paper: #f4f7fb;
}

/* Fondo institucional con profundidad, sin saturar toda la pantalla */
body {
  background-color: var(--itz-paper) !important;
  background-image:
    radial-gradient(circle at 4% 2%, rgba(22,166,201,.12), transparent 27%),
    radial-gradient(circle at 96% 8%, rgba(115,86,191,.10), transparent 25%),
    linear-gradient(180deg, #f9fbff 0%, #edf3f9 100%) !important;
}

/* Encabezados con azul institucional y acento cian */
.encabezado, .barra-superior, .header-institucional, .header,
.encabezado-principal, .barra-encabezado, .header-brand, .topbar,
header.encabezado, .main-header {
  background: linear-gradient(112deg, #102a43 0%, #174f83 55%, #167d9a 100%) !important;
  color: #fff !important;
  border-bottom: 4px solid #21b6cb !important;
  box-shadow: 0 10px 28px rgba(16,42,67,.19) !important;
}

/* Tarjetas más limpias, con una línea de color superior */
.card, .tarjeta, .panel, .panel-contenido, .bienvenida,
.admin-card, .stat-card, .estadistica-card, .seccion-card,
.contenido-card, .kiosco-card, .tarjeta-blanca {
  background-color: rgba(255,255,255,.98) !important;
  border: 1px solid #dce5ef !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 26px rgba(24,54,84,.09) !important;
}
.card-header, .panel-header, .tarjeta-header {
  background: linear-gradient(90deg, #edf5fc, #f5f8fd) !important;
  color: #173e63 !important;
  border-bottom: 1px solid #dce7f1 !important;
}

/* Inicio: cada servicio se distingue con su propio acento */
.tarjeta.registro { border-top: 5px solid var(--itz-cyan) !important; }
.tarjeta.constancias { border-top: 5px solid var(--itz-blue) !important; }
.tarjeta.escolares { border-top: 5px solid var(--itz-purple) !important; }
.tarjeta.chatbot { border-top: 5px solid var(--itz-orange) !important; }
.tarjeta.administrador { border-top: 5px solid var(--itz-rose) !important; }
.tarjeta .icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 18px !important;
  background: linear-gradient(135deg, #e2f7fb, #d7eaff) !important;
  color: #1769aa !important;
}
.tarjeta.registro .icono { background: #def7fb !important; color: #087f95 !important; }
.tarjeta.constancias .icono { background: #e1edff !important; color: #1769aa !important; }
.tarjeta.escolares .icono { background: #eee7ff !important; color: #7356bf !important; }
.tarjeta.chatbot .icono { background: #fff0dd !important; color: #b86b10 !important; }
.tarjeta.administrador .icono { background: #ffe6ed !important; color: #b63b5c !important; }

/* Botones: colores diferenciados según su función */
.btn-primary, .boton-principal, .boton, .btn-regresar-inicio {
  background: linear-gradient(135deg, #1769aa, #1689b5) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 5px 14px rgba(23,105,170,.20) !important;
}
.btn-info, .accion-azul { background: linear-gradient(135deg,#168bb5,#22b6cb) !important; color:#fff !important; border-color:transparent !important; }
.btn-success, .accion-verde { background: linear-gradient(135deg,#23845b,#31a879) !important; color:#fff !important; border-color:transparent !important; }
.btn-warning, .accion-amarillo { background: linear-gradient(135deg,#e58b2a,#f2b544) !important; color:#25364a !important; border-color:transparent !important; }
.btn-danger, .accion-roja { background: linear-gradient(135deg,#c83e59,#e56c78) !important; color:#fff !important; border-color:transparent !important; }
.accion-morado { background: linear-gradient(135deg,#7356bf,#9277d8) !important; color:#fff !important; border-color:transparent !important; }
.btn-secondary { background: linear-gradient(135deg,#64748b,#8493a7) !important; color:#fff !important; border-color:transparent !important; }
.btn-outline-primary { color:#1769aa !important; border-color:#1769aa !important; background:#fff !important; }
.btn-outline-secondary { color:#475569 !important; border-color:#cbd5e1 !important; background:#fff !important; }
.btn:hover, button:hover, .accion:hover, .admin-btn:hover {
  filter: brightness(1.04) saturate(1.06);
  box-shadow: 0 8px 18px rgba(16,42,67,.15) !important;
}

/* Acciones del módulo de Servicios Escolares: bloques de varios colores */
.acciones .accion {
  border: 0 !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 18px rgba(16,42,67,.12) !important;
  color: #fff !important;
}
.acciones .accion-verde { background: linear-gradient(140deg,#18794e,#2ca878) !important; }
.acciones .accion-azul { background: linear-gradient(140deg,#1769aa,#25a8c8) !important; }
.acciones .accion-morado { background: linear-gradient(140deg,#6246a8,#9475d8) !important; }
.acciones .accion-amarillo { background: linear-gradient(140deg,#d9831f,#f3b943) !important; color:#263548 !important; }

/* Estadísticas: códigos visuales fáciles de distinguir */
.estadistica.verde, .estadistica .verde { border-left: 5px solid #23845b !important; }
.estadistica.azul, .estadistica .azul { border-left: 5px solid #1769aa !important; }
.estadistica.amarilla, .estadistica .amarilla { border-left: 5px solid #e58b2a !important; }
.estadistica.roja, .estadistica .roja { border-left: 5px solid #d95776 !important; }
.estadistica .icono-estadistica { border-radius: 14px !important; }

/* Tablas, formularios y estados */
.table thead th, table thead th, th {
  background: linear-gradient(90deg,#e5eff9,#edf5fb) !important;
  color: #173e63 !important;
}
.table tbody tr:nth-child(even), table tbody tr:nth-child(even) { background-color: #f8fbff; }
.table tbody tr:hover, table tbody tr:hover { background-color: #eaf6ff !important; }
.form-control:focus, .form-select:focus, input:focus, select:focus, textarea:focus {
  border-color: #27a9c5 !important;
  box-shadow: 0 0 0 4px rgba(22,166,201,.15) !important;
}
.alert-success { border-left: 5px solid #23845b !important; }
.alert-info { border-left: 5px solid #16a6c9 !important; }
.alert-warning { border-left: 5px solid #e58b2a !important; }
.alert-danger { border-left: 5px solid #d95776 !important; }
.badge.bg-success { background-color: #23845b !important; }
.badge.bg-info { background-color: #168bb5 !important; }
.badge.bg-warning { background-color: #f2b544 !important; color: #263548 !important; }
.badge.bg-danger { background-color: #c83e59 !important; }

/* Accesibilidad: conservar contraste y reducir movimiento si se solicita */
:focus-visible { outline: 3px solid rgba(22,166,201,.5) !important; outline-offset: 2px; }
@media (max-width: 768px) {
  .encabezado-contenido, .barra-contenido { padding-left: 16px !important; padding-right: 16px !important; }
  .card, .tarjeta, .panel, .bienvenida { border-radius: 14px !important; }
}