/* =============================================================
   TURNERO BANCARIO - Estilos Institucionales
   Colores: Alcaldía de Palmira · palmira.gov.co
   ============================================================= */

/* ── Google Fonts: Montserrat + Source Sans Pro ────────────── */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&family=Source+Sans+3:wght@400;600&display=swap');

:root {
  /* Paleta institucional Alcaldía de Palmira */
  --palmira-blue:       #3366CC;   /* Azul corporativo principal  */
  --palmira-blue-dark:  #004884;   /* Azul oscuro / hover         */
  --palmira-blue-btn:   #0170B9;   /* Azul botones y enlaces      */
  --palmira-gold:       #ECC31F;   /* Dorado institucional        */
  --palmira-gold-dark:  #C9A415;   /* Dorado hover                */
  --palmira-gray-dark:  #3A3A3A;   /* Texto encabezados           */
  --palmira-gray-mid:   #4B4F58;   /* Texto cuerpo                */
  --palmira-gray-light: #F5F5F5;   /* Fondos secundarios          */
  --palmira-white:      #FFFFFF;

  --sidebar-w: 230px;
}

/* ── Tipografía global ────────────────────────────────────── */
body {
  font-family: 'Source Sans 3', 'Segoe UI', sans-serif;
  color: var(--palmira-gray-mid);
}

h1, h2, h3, h4, h5, h6,
.navbar-brand, .fw-bold, .fw-semibold {
  font-family: 'Montserrat', 'Segoe UI', sans-serif;
}

/* ── Colores de marca ─────────────────────────────────────── */
.bg-banco {
  background: linear-gradient(135deg, var(--palmira-blue) 0%, var(--palmira-blue-btn) 100%);
}
.bg-banco-primary {
  background-color: var(--palmira-blue) !important;
}
.btn-banco-primary {
  background-color: var(--palmira-blue-btn);
  border-color:     var(--palmira-blue-btn);
  color:            var(--palmira-white);
  font-family:      'Montserrat', sans-serif;
  font-weight:      600;
  letter-spacing:   .03em;
}
.btn-banco-primary:hover,
.btn-banco-primary:focus {
  background-color: var(--palmira-blue-dark);
  border-color:     var(--palmira-blue-dark);
  color:            var(--palmira-white);
}
.text-banco-primary { color: var(--palmira-blue) !important; }

/* ── Logo institucional ───────────────────────────────────── */
/* Sobre fondo azul/oscuro: el PNG se muestra tal cual (asume fondo transparente) */
.logo-palmira-nav    { height: 56px;  width: auto; object-fit: contain; display: block; }
.logo-palmira-header { height: 80px;  width: auto; object-fit: contain; display: block; }
.logo-palmira-login  { height: 110px; width: auto; object-fit: contain; display: block; margin-inline: auto; }
.logo-palmira-ticket { height: 52px;  width: auto; object-fit: contain; display: block; }

@media (max-width: 575px) {
  .logo-palmira-header { height: 56px; }
  .logo-palmira-nav    { height: 44px; }
}

/* ══════════════════════════════════════════════════════════
   KIOSKO — Pantalla táctil responsive
   ══════════════════════════════════════════════════════════ */

/* Fondo y body */
.kiosko-body {
  background: linear-gradient(160deg, #dce8fb 0%, #f0f4ff 60%, #f5f5f5 100%);
  /* Deshabilitar selección de texto en toda la pantalla táctil */
  -webkit-user-select: none;
  user-select: none;
  /* Acelerar respuesta en táctil */
  touch-action: manipulation;
}

/* ── Header ─────────────────────────────────────────────── */
.kiosko-header {
  background:    linear-gradient(135deg, var(--palmira-blue) 0%, var(--palmira-blue-btn) 100%);
  border-bottom: 4px solid var(--palmira-gold);
  padding-top:    env(safe-area-inset-top, 12px);
}

.kiosko-escudo   { flex-shrink: 0; }
.kiosko-subtitulo{ font-size: .65rem; letter-spacing: .08em; }
.kiosko-titulo   { font-size: 1rem; font-family: 'Montserrat', sans-serif; letter-spacing: .03em; }
.kiosko-reloj-hora  { font-size: 1.3rem; letter-spacing: .04em; }
.kiosko-reloj-fecha { font-size: .7rem; }
.kiosko-instruccion { font-size: .9rem; }

@media (min-width: 576px) {
  .kiosko-escudo    { height: 48px; }
  .kiosko-subtitulo { font-size: .75rem; }
  .kiosko-titulo    { font-size: 1.4rem; }
  .kiosko-reloj-hora  { font-size: 1.7rem; }
  .kiosko-instruccion { font-size: 1rem; }
}
@media (min-width: 992px) {
  .kiosko-escudo    { height: 60px; }
  .kiosko-titulo    { font-size: 1.8rem; }
  .kiosko-reloj-hora  { font-size: 2rem; }
  .kiosko-instruccion { font-size: 1.1rem; }
}

.kiosko-divider-gold {
  width: 70px; height: 3px;
  background: var(--palmira-gold);
  border-radius: 2px;
}

/* ── Grid de servicios ──────────────────────────────────── */
.kiosko-grid {
  display: grid;
  gap: 1rem;
  /* Móvil: 2 columnas fijas; tablet+: auto-fit */
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
}
@media (min-width: 576px) {
  .kiosko-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.25rem;
  }
}

/* ── Botón de servicio ──────────────────────────────────── */
.kiosko-btn-servicio {
  background-color: var(--color-servicio, #3366CC);
  border: none;
  border-radius: 1rem;
  color: #fff;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  /* Altura fija cómoda para dedo en móvil */
  min-height: 130px;
  padding: 1rem .75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
  transition: transform .1s ease, box-shadow .1s ease, filter .1s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(255,255,255,.2);
  /* Evitar desborde de texto */
  overflow: hidden;
  word-break: break-word;
}
@media (min-width: 576px) {
  .kiosko-btn-servicio {
    min-height: 160px;
    border-radius: 1.25rem;
    padding: 1.25rem 1rem;
  }
}
@media (min-width: 992px) {
  .kiosko-btn-servicio { min-height: 200px; }
}

/* Feedback táctil */
.kiosko-btn-servicio:active {
  transform: scale(.95);
  box-shadow: 0 2px 8px rgba(0,0,0,.22);
  filter: brightness(.88);
}
@media (hover: hover) {
  .kiosko-btn-servicio:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(0,0,0,.22);
    filter: brightness(1.05);
  }
}

/* Tamaños de texto del botón — fijos por breakpoint, sin vw */
.kiosko-btn-icon   { font-size: 2rem; }
.kiosko-btn-nombre { font-size: .95rem; font-weight: 700; text-align: center; line-height: 1.2; }
.kiosko-btn-prefijo{ font-size: .72rem; opacity: .8; }

@media (min-width: 576px) {
  .kiosko-btn-icon   { font-size: 2.6rem; }
  .kiosko-btn-nombre { font-size: 1.15rem; }
  .kiosko-btn-prefijo{ font-size: .8rem; }
}
@media (min-width: 992px) {
  .kiosko-btn-icon   { font-size: 3.2rem; }
  .kiosko-btn-nombre { font-size: 1.4rem; }
  .kiosko-btn-prefijo{ font-size: .88rem; }
}

/* ── Toggle preferencial ────────────────────────────────── */
.kiosko-preferencial-wrap {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  width: 100%;
  max-width: 560px;
}

.kiosko-preferencial {
  display: flex;
  align-items: center;
  flex-wrap: wrap;           /* evita desborde en móvil */
  gap: .6rem .9rem;
  background: #fff;
  border: 2px solid #dee2e6;
  border-radius: 1rem;
  padding: .85rem 1rem;
  font-size: .92rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  color: var(--palmira-gray-dark);
  box-shadow: 0 2px 8px rgba(0,0,0,.07);
  transition: border-color .2s, background .2s;
}
.kiosko-preferencial.activo {
  border-color: #e74c3c;
  background: #fff5f5;
}
/* El texto principal y el subtexto comparten el mismo espacio */
.kiosko-preferencial .pref-texto {
  flex: 1;
  min-width: 0;
}
.kiosko-preferencial .pref-texto small {
  display: block;
  font-weight: 400;
  font-size: .72rem;
  color: #6c757d;
  white-space: normal;
}

/* Toggle visual personalizado */
.kiosko-toggle {
  width:  52px; height: 28px; flex-shrink: 0;
  background: #dee2e6;
  border-radius: 14px;
  position: relative;
  transition: background .2s;
}
.kiosko-preferencial.activo .kiosko-toggle { background: #e74c3c; }
.kiosko-toggle-thumb {
  position: absolute;
  top: 3px; left: 3px;
  width: 22px; height: 22px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
  transition: left .2s;
}
.kiosko-toggle-thumb.activo { left: 27px; }

/* ── Footer ─────────────────────────────────────────────── */
.kiosko-footer {
  background: var(--palmira-blue);
  border-top: 3px solid var(--palmira-gold);
  color: rgba(255,255,255,.6);
  font-size: clamp(.7rem, 1.5vw, .85rem);
  padding-bottom: env(safe-area-inset-bottom, 8px);
}
.kiosko-footer-link { color: #ECC31F; text-decoration: none; }
.kiosko-footer-link:hover { color: #fff; }

/* ── Modal persona / ticket ─────────────────────────────── */
.kiosko-modal-dialog {
  margin: clamp(.5rem, 3vw, 1.75rem) auto;
  /* En móviles el modal ocupa más pantalla */
  max-width: min(560px, 96vw);
}

.kiosko-modal-content {
  border-radius: clamp(.75rem, 2vw, 1.25rem) !important;
}

.kiosko-modal-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: clamp(.9rem, 3vw, 1.4rem) clamp(1rem, 3vw, 1.5rem);
}
.kiosko-modal-header-icon { font-size: clamp(2rem, 5vw, 2.8rem); opacity: .9; }
.kiosko-modal-titulo  { font-size: clamp(1.1rem, 3vw, 1.35rem); font-family: 'Montserrat', sans-serif; }
.kiosko-modal-servicio{ font-size: clamp(.8rem, 2vw, .95rem); }

.kiosko-modal-body {
  padding: clamp(.9rem, 3vw, 1.5rem);
}
.kiosko-modal-instruccion {
  font-size: clamp(.85rem, 2vw, 1rem);
  color: #6c757d;
  margin-bottom: clamp(.75rem, 2vw, 1.25rem);
}

/* Campos del formulario táctil */
.kiosko-campo { margin-bottom: clamp(.75rem, 2vw, 1.1rem); }

.kiosko-label {
  display: block;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(.85rem, 2vw, .95rem);
  margin-bottom: .4rem;
  color: var(--palmira-gray-dark);
}

.kiosko-input-wrap { position: relative; display: flex; align-items: center; }
.kiosko-input-spinner {
  position: absolute; right: .75rem;
}

/* Input grande y cómodo para teclado táctil */
.kiosko-input {
  width: 100%;
  height: clamp(52px, 8vw, 64px);
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  font-family: 'Source Sans 3', sans-serif;
  padding: .5rem 1rem;
  border: 2px solid #dee2e6;
  border-radius: .6rem;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  background: #fff;
  /* Permitir escritura en táctil */
  -webkit-user-select: text;
  user-select: text;
}
.kiosko-input:focus {
  border-color: var(--palmira-blue);
  box-shadow: 0 0 0 3px rgba(51,102,204,.15);
}
.kiosko-input::placeholder { color: #adb5bd; }

.kiosko-autocomplete-msg {
  margin-top: .35rem;
  font-size: .85rem;
  font-weight: 600;
  color: #198754;
}

.kiosko-alerta {
  background: #fff3f3;
  border: 1px solid #f5c2c7;
  border-radius: .5rem;
  padding: .65rem 1rem;
  font-size: clamp(.85rem, 2vw, .95rem);
  color: #842029;
  margin-top: .5rem;
}

/* Footer del modal */
.kiosko-modal-footer {
  display: flex;
  gap: .75rem;
  padding: clamp(.75rem, 2vw, 1.1rem) clamp(1rem, 3vw, 1.5rem);
  border-top: 1px solid #f0f0f0;
  flex-wrap: wrap;
}

/* Botones del modal — grandes y fáciles de tocar */
.kiosko-btn-cancelar,
.kiosko-btn-confirmar,
.kiosko-btn-imprimir {
  flex: 1;
  min-width: 130px;
  height: clamp(52px, 8vw, 64px);
  font-size: clamp(.95rem, 2vw, 1.1rem);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  border-radius: .6rem;
  border: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: filter .1s, transform .1s;
}
.kiosko-btn-cancelar  { background: #f0f4ff; color: var(--palmira-blue); border: 2px solid #D6E4FF; }
.kiosko-btn-confirmar { color: #fff; }
.kiosko-btn-imprimir  { background: #f8f9fa; color: #495057; border: 2px solid #dee2e6; }

.kiosko-btn-cancelar:active,
.kiosko-btn-confirmar:active,
.kiosko-btn-imprimir:active  { transform: scale(.97); filter: brightness(.93); }

/* ── Contenido del ticket ───────────────────────────────── */
.kiosko-ticket-body       { padding: clamp(1rem, 3vw, 1.75rem); }
.kiosko-ticket-label      { font-size: clamp(.72rem, 1.5vw, .82rem); color: #adb5bd; text-transform: uppercase; letter-spacing: .08em; }
.kiosko-ticket-persona    { font-size: clamp(1.1rem, 3vw, 1.4rem); font-weight: 700; color: var(--palmira-blue); font-family: 'Montserrat', sans-serif; margin-bottom: .75rem; }
.kiosko-ticket-servicio-label { font-size: clamp(.8rem, 2vw, .9rem); color: #6c757d; margin-bottom: .2rem; }
.kiosko-ticket-numero     { font-size: clamp(4rem, 12vw, 6rem); font-weight: 800; color: var(--palmira-blue); font-family: 'Montserrat', sans-serif; letter-spacing: .1em; line-height: 1; }
.kiosko-ticket-dato-val   { font-size: clamp(.95rem, 2vw, 1.05rem); font-weight: 700; }
.kiosko-ticket-dato-key   { font-size: clamp(.65rem, 1.5vw, .75rem); color: #adb5bd; text-transform: uppercase; letter-spacing: .06em; }
.kiosko-ticket-aviso      { background: #FFFBEA; border: 1px solid #ECC31F; border-radius: .5rem; padding: .65rem 1rem; font-size: clamp(.8rem, 2vw, .9rem); color: #6b5200; }

/* ── Impresión ──────────────────────────────────────────── */
@media print {
  body > *:not(#modalTicket) { display: none !important; }
  .kiosko-modal-footer        { display: none !important; }
  .modal-backdrop             { display: none !important; }
}

/* ── Pantalla pública (Display) — fondo claro ─────────────── */
.display-bg {
  background: linear-gradient(160deg, #EEF4FF 0%, #F5F8FF 60%, #EBF2FF 100%);
}

.display-header {
  background:    var(--palmira-blue);
  border-bottom: 4px solid var(--palmira-gold);
  box-shadow:    0 2px 12px rgba(51,102,204,.25);
}

/* Quitar el pseudo-elemento ::after (ya tiene border-bottom real) */
.display-header::after { display: none; }
.display-header { position: relative; }

.display-card-actual {
  background:    #fff;
  border:        1px solid #D6E4FF;
  border-top:    4px solid var(--palmira-blue);
  border-radius: 1.25rem;
  min-height:    350px;
  box-shadow:    0 8px 32px rgba(51,102,204,.12);
}

.display-numero-actual {
  font-size:    clamp(5rem, 12vw, 10rem);
  letter-spacing: .12em;
  font-family:  'Montserrat', sans-serif;
  font-weight:  800;
  color:        var(--palmira-blue);
  text-shadow:  0 4px 24px rgba(51,102,204,.18);
  line-height:  1;
}

.display-servicio-actual {
  font-size:   1.4rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  color:       var(--palmira-gray-mid);
}

.display-modulo-actual {
  background:    var(--palmira-gold);
  border:        none;
  padding:       .45rem 1.8rem;
  border-radius: 2rem;
  font-size:     1.15rem;
  font-family:   'Montserrat', sans-serif;
  font-weight:   700;
  color:         #3A3A3A;
  box-shadow:    0 2px 10px rgba(236,195,31,.40);
}

/* ── Tarjetas en atención (display público) ─────────────── */
.display-atencion-item {
  background:    #fff;
  border:        1px solid #D6E4FF;
  border-radius: 1rem;
  padding:       1rem 1.25rem;
  box-shadow:    0 4px 16px rgba(51,102,204,.10);
  transition:    box-shadow .2s;
  flex-shrink:   0;
}
.display-atencion-item:hover {
  box-shadow: 0 6px 24px rgba(51,102,204,.18);
}
.display-atencion-numero {
  font-size:      clamp(2.5rem, 6vw, 5rem);
  letter-spacing: .08em;
  font-family:    'Montserrat', sans-serif;
  font-weight:    800;
  line-height:    1;
}

/* ── Cola de espera (display público) ────────────────────── */
.cola-item {
  background:  #fff;
  border:      1px solid #D6E4FF;
  box-shadow:  0 1px 4px rgba(51,102,204,.07);
  transition:  box-shadow .2s, background .2s;
}
.cola-item-proximo {
  background:  #FFFBEA;
  border:      1px solid var(--palmira-gold);
  box-shadow:  0 2px 10px rgba(236,195,31,.25);
}

/* ── Tarjetas del historial ───────────────────────────────── */
.historial-item {
  background:    #fff;
  border:        1px solid #D6E4FF;
  border-left:   4px solid var(--palmira-blue);
  border-radius: .6rem;
  padding:       .65rem 1rem;
  display:       flex;
  align-items:   center;
  gap:           1rem;
  box-shadow:    0 1px 4px rgba(51,102,204,.07);
  transition:    box-shadow .2s;
}
.historial-item:hover { box-shadow: 0 3px 10px rgba(51,102,204,.14); }
.historial-numero {
  font-size:   1.4rem;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  min-width:   75px;
}
.historial-modulo { font-size: .82rem; color: #6c757d; }

/* Animación entrada turno */
@keyframes flash-turno {
  0%, 100% { opacity: 1; }
  50%       { opacity: .25; }
}
.flash { animation: flash-turno .5s ease 3; }

/* ── Admin layout ─────────────────────────────────────────── */
.admin-navbar {
  position:   fixed;
  top: 0; left: 0; right: 0;
  z-index:    1040;
  height:     56px;
  border-bottom: 3px solid var(--palmira-gold) !important;
}

.admin-sidebar {
  position:   fixed;
  top:        56px;
  left:       0;
  bottom:     0;
  width:      var(--sidebar-w);
  background: var(--palmira-blue-dark);   /* #004884 */
  overflow-y: auto;
  z-index:    1030;
  border-right: 1px solid rgba(255,255,255,.08);
}

/* Franja dorada en la parte superior del sidebar */
.admin-sidebar::before {
  content:    '';
  display:    block;
  height:     3px;
  background: var(--palmira-gold);
}

.admin-sidebar .nav-link {
  color:         rgba(255,255,255,.70);
  border-radius: .5rem;
  padding:       .55rem .85rem;
  font-size:     .88rem;
  font-family:   'Montserrat', sans-serif;
  font-weight:   600;
  transition:    background .15s, color .15s;
}
.admin-sidebar .nav-link:hover {
  color:      var(--palmira-white);
  background: rgba(255,255,255,.10);
}
.admin-sidebar .nav-link.active {
  color:      var(--palmira-white);
  background: var(--palmira-blue);
  box-shadow: inset 3px 0 0 var(--palmira-gold);
}

.admin-content {
  margin-left: var(--sidebar-w);
  margin-top:  56px;
  padding:     1.75rem;
  min-height:  calc(100vh - 56px);
}

/* Stat icons dashboard */
.stat-icon {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
}

/* ── Panel Asesor ─────────────────────────────────────────── */
.turno-actual-numero {
  font-size:    4rem;
  font-weight:  800;
  font-family:  'Montserrat', sans-serif;
  color:        var(--palmira-blue);
  letter-spacing: .08em;
}

/* ── Login ────────────────────────────────────────────────── */
.card-header.bg-banco-primary {
  border-bottom: 3px solid var(--palmira-gold) !important;
}

/* ── Utilidades ───────────────────────────────────────────── */
.letter-spacing { letter-spacing: .08em; }

/* Acento dorado en badges/highlights */
.badge-palmira-gold {
  background-color: var(--palmira-gold);
  color:            var(--palmira-gray-dark);
  font-family:      'Montserrat', sans-serif;
  font-weight:      700;
}

/* ── Impresión del ticket ─────────────────────────────────── */
@media print {
  body > *:not(#ticketPrint) { display: none !important; }
  #ticketPrint {
    display:     block !important;
    font-family: 'Montserrat', monospace;
    font-size:   14pt;
    text-align:  center;
  }
}

/* ── Responsive sidebar ───────────────────────────────────── */
@media (max-width: 768px) {
  .admin-sidebar  { display: none; }
  .admin-content  { margin-left: 0; }
}