/* ============================================================
   Hospital Regional Dr. Luis A. Vargas — Turnos Online
   assets/css/turnos.css
   ============================================================ */
:root {
  --color-primary:   #003e7e;
  --color-accent:    #0d6efd;
  --color-top-bar:   #002d5c;
  --color-primary-dk:#002a5a;
  --color-green:     #198754;
  --color-amber:     #fd7e14;
}
*, *::before, *::after { box-sizing: border-box; }
body { font-family: 'Poppins', sans-serif; background: #f0f6ff; color: #1a1a2e; }

/* ── Topbar ── */
.topbar { background: var(--color-top-bar); border-bottom: 2px solid var(--color-accent); padding: 7px 20px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; }
.topbar-brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.topbar-brand img { height: 38px; width: 38px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.3); }
.topbar-brand .brand-name { font-size: .88rem; font-weight: 600; line-height: 1.2; }
.topbar-brand .brand-sub  { font-size: .72rem; opacity: .75; }
.topbar-nav { display: flex; gap: 6px; }
.topbar-nav a { color: rgba(255,255,255,.85); text-decoration: none; font-size: .82rem; font-weight: 500; padding: 5px 12px; border-radius: 6px; display: flex; align-items: center; gap: 5px; transition: background .2s; }
.topbar-nav a:hover  { background: rgba(255,255,255,.12); color: #fff; }
.topbar-nav a.active { background: var(--color-accent); color: #fff; }

/* ── Hero ── */
.turnos-hero { background: linear-gradient(135deg, var(--color-primary) 0%, #0a5aa0 100%); color: #fff; padding: 28px 20px; text-align: center; border-bottom: 3px solid var(--color-accent); }
.turnos-hero h1 { font-size: clamp(1.1rem, 3vw, 1.5rem); font-weight: 700; margin-bottom: 6px; }
.turnos-hero p  { font-size: .85rem; opacity: .8; margin: 0; }
.hero-pills { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.hero-pill  { background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.25); border-radius: 20px; padding: 4px 14px; font-size: .78rem; display: flex; align-items: center; gap: 5px; }

/* ── Steps ── */
.steps-bar { display: flex; align-items: center; padding: 14px 0; }
.step-item { display: flex; align-items: center; gap: 5px; font-size: .78rem; color: #888; font-weight: 500; white-space: nowrap; }
.step-item.done { color: var(--color-green); }
.step-item.cur  { color: var(--color-primary); font-weight: 700; }
.step-dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #ccc; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex-shrink: 0; }
.step-item.done .step-dot { background: #d1f5e0; border-color: var(--color-green); color: var(--color-green); }
.step-item.cur  .step-dot { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.step-line { flex: 1; height: 1px; background: #dde; margin: 0 6px; min-width: 8px; }

/* ── Cards ── */
.card-section { background: #fff; border: 1px solid #dde8f7; border-radius: 14px; padding: 18px; margin-bottom: 16px; box-shadow: 0 2px 10px rgba(0,62,126,.06); }
.card-section-title { font-size: .95rem; font-weight: 700; color: var(--color-primary); margin-bottom: 14px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }

/* ── Grid especialidades (paso 1) ── */
.espec-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-bottom: 14px; }
.espec-card { background: #f7fbff; border: 1.5px solid #dde8f7; border-radius: 12px; padding: 18px 12px; cursor: pointer; text-align: center; transition: border-color .15s, box-shadow .15s; }
.espec-card:hover   { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(13,110,253,.1); }
.espec-card.selected{ border: 2px solid var(--color-accent); background: #e8f0fe; }
.espec-card .espec-icon { font-size: 2rem; color: var(--color-primary); margin-bottom: 8px; display: block; }
.espec-card .espec-name { font-size: .88rem; font-weight: 700; color: var(--color-primary); margin-bottom: 2px; }
.espec-card .espec-count { font-size: .72rem; color: #666; margin-top: 4px; }

/* ── Grid profesionales (paso 2) ── */
.prof-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-bottom: 14px; }
.prof-card { background: #f7fbff; border: 1.5px solid #dde8f7; border-radius: 12px; padding: 14px 16px; cursor: pointer; display: flex; align-items: center; gap: 14px; transition: border-color .15s, box-shadow .15s; }
.prof-card:hover    { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(13,110,253,.1); }
.prof-card.selected { border: 2px solid var(--color-accent); background: #e8f0fe; }
.prof-avatar { width: 46px; height: 46px; border-radius: 50%; background: #dce8f8; display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 700; color: var(--color-primary); flex-shrink: 0; }
.prof-nombre { font-size: .88rem; font-weight: 700; color: var(--color-primary); margin-bottom: 2px; }
.prof-meta   { font-size: .75rem; color: #555; }
.prof-horario{ font-size: .72rem; color: #888; margin-top: 3px; display: flex; align-items: center; gap: 4px; }

/* ── Info box profesional (paso 3) ── */
.prof-info-box { background: #e8f0fe; border: 1px solid #b8d0f0; border-radius: 10px; padding: 10px 14px; display: flex; align-items: center; gap: 12px; font-size: .82rem; }
.prof-info-box .pib-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--color-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }

/* ── Calendario ── */
.cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cal-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 3px; margin-bottom: 8px; }
.cal-day-lbl { text-align: center; font-size: .7rem; color: #888; font-weight: 600; padding: 3px 0; }
.cal-day { text-align: center; padding: 7px 3px; font-size: .82rem; border-radius: 8px; cursor: pointer; border: 1.5px solid transparent; transition: background .1s; }
.cal-day:hover     { background: #e8f0fe; }
.cal-day.selected  { background: var(--color-primary) !important; color: #fff !important; border-color: var(--color-primary); }
.cal-day.today     { border-color: var(--color-accent); color: var(--color-accent); font-weight: 700; }
.cal-day.today.selected { color: #fff; }
.cal-day.disabled  { color: #ccc; cursor: default; }
.cal-day.nowork    { color: #ccc; cursor: default; background: #f8f9fa; }

/* ── Grilla turnos numéricos ── */
.turno-bloque-titulo { font-size: .78rem; font-weight: 600; color: #555; background: #f0f6ff; border-radius: 8px; padding: 5px 10px; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tgrid { display: grid; grid-template-columns: repeat(5,1fr); gap: 7px; }
.tc { border: 1.5px solid #dde; border-radius: 10px; padding: 9px 4px; text-align: center; cursor: pointer; background: #fff; transition: all .12s; }
.tc:hover:not(.ocu):not(.bloq) { border-color: var(--color-accent); }
.tc.selected { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.tc.ocu  { opacity: .4; cursor: default; }
.tc.bloq { background: #f8f9fa; cursor: default; border-style: dashed; opacity: .65; }
.tc.prog { border-color: var(--color-green); background: #d1f5e0; }
.tc.prog.selected { background: #157347; border-color: #157347; color: #fff; }
.tcn { font-size: 1.1rem; font-weight: 700; line-height: 1; }
.tcl { font-size: .68rem; margin-top: 2px; color: #888; }
.tc.selected .tcl, .tc.prog.selected .tcl { color: rgba(255,255,255,.75); }
.tc.prog .tcl { color: #157347; }

/* ── Tags ── */
.tag { font-size: .7rem; padding: 2px 8px; border-radius: 20px; font-weight: 600; display: inline-block; }
.tag-prog { background: #d1f5e0; color: #0a4022; }
.tag-dem  { background: #cfe2ff; color: #084298; }
.tag-rep  { background: #ffe5cc; color: #7c3400; }
.fs-xs { font-size: .72rem; }

/* ── Avisos ── */
.aviso { border-radius: 10px; padding: 9px 13px; font-size: .8rem; display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px; line-height: 1.5; }
.av-bl { background: #cfe2ff; color: #084298; }
.av-gn { background: #d1f5e0; color: #0a4022; }
.av-am { background: #ffe5cc; color: #7c3400; }
.av-rd { background: #f8d7da; color: #842029; }

/* ── Leyenda ── */
.legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: .72rem; color: #666; }
.legend-item { display: flex; align-items: center; gap: 4px; }
.legend-dot { width: 12px; height: 12px; border-radius: 3px; border: 1.5px solid #ccc; }
.ld-prog { background: #d1f5e0; border-color: #75c98f; }
.ld-dem  { background: #cfe2ff; border-color: #84b0f0; }

/* ── Formularios ── */
.form-label { font-size: .82rem; font-weight: 600; color: var(--color-primary); margin-bottom: 3px; }
.form-control, .form-select { font-size: .85rem; border-color: #bdd0ee; }
.form-control:focus, .form-select:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(13,110,253,.15); }
.form-interno { background: #f0f6ff; border-radius: 12px; padding: 14px; border: 1px solid #bdd0ee; }

/* ── Confirmación ── */
.confirm-box  { background: #d1f5e0; border: 1.5px solid #75c98f; border-radius: 16px; padding: 24px; text-align: center; }
.confirm-icon { width: 56px; height: 56px; background: #fff; border-radius: 50%; border: 2.5px solid var(--color-green); display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; }
.confirm-icon i { font-size: 1.5rem; color: var(--color-green); }
.confirm-num  { font-size: 1.8rem; font-weight: 700; color: #0a4022; }

/* ── WhatsApp preview ── */
.wp-preview { background: #e5f5e0; border-radius: 12px; padding: 12px; margin-top: 14px; border: 1px solid #b8deb4; }
.wp-header  { font-size: .78rem; color: #2d6a4f; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; font-weight: 600; }
.wp-bubble  { background: #dcf8c6; border-radius: 0 10px 10px 10px; padding: 10px 13px; font-size: .8rem; color: #111; line-height: 1.6; max-width: 90%; }

/* ── Mis turnos ── */
.mis-card { background: #fff; border: 1.5px solid #dde8f7; border-radius: 12px; padding: 13px 16px; margin-bottom: 10px; display: flex; align-items: center; gap: 13px; box-shadow: 0 1px 6px rgba(0,62,126,.05); }
.mis-card.reprog { border-color: #fd7e14; background: #fff8f0; }
.mis-date   { background: #e8f0fe; border-radius: 10px; padding: 8px 11px; text-align: center; min-width: 50px; flex-shrink: 0; }
.mis-date-d { font-size: 1.1rem; font-weight: 700; color: var(--color-primary); line-height: 1; }
.mis-date-m { font-size: .68rem; color: var(--color-primary); text-transform: uppercase; letter-spacing: .04em; }

/* ── Nav pills ── */
.nav-pills-vargas .nav-link { color: var(--color-primary); font-size: .82rem; font-weight: 600; border-radius: 8px; }
.nav-pills-vargas .nav-link.active { background: var(--color-primary); color: #fff; }
.nav-pills-vargas .nav-link:hover:not(.active) { background: #e8f0fe; }

/* ── Admin stats ── */
.stat-card { background: #fff; border: 1px solid #dde8f7; border-radius: 12px; padding: 12px 16px; text-align: center; }
.stat-val  { font-size: 1.5rem; font-weight: 700; }
.stat-lbl  { font-size: .75rem; color: #666; }

/* ── Admin tabla turnos ── */
.adm-table-row { display: grid; gap: 8px; align-items: center; padding: 8px 12px; border-radius: 10px; border: 1px solid #dde8f7; font-size: .8rem; margin-bottom: 5px; background: #f7fbff; }
.adm-table-row.cols-t { grid-template-columns: 80px minmax(0,1.5fr) minmax(0,1fr) 55px 70px 85px; }
.adm-hdr { display: grid; gap: 8px; padding: 4px 12px; font-size: .7rem; color: #888; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.adm-hdr.cols-t { grid-template-columns: 80px minmax(0,1.5fr) minmax(0,1fr) 55px 70px 85px; }

/* ── Med admin list ── */
.med-admin-card { background: #f7fbff; border: 1px solid #dde8f7; border-radius: 12px; padding: 14px; margin-bottom: 10px; }
.med-admin-card .med-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.med-admin-avatar { width: 40px; height: 40px; border-radius: 50%; background: #dce8f8; display: flex; align-items: center; justify-content: center; font-size: .85rem; font-weight: 700; color: var(--color-primary); flex-shrink: 0; }
.med-admin-info-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-top: 12px; font-size: .78rem; }
.med-admin-info-item { background: #fff; border-radius: 8px; padding: 7px 10px; border: 1px solid #dde8f7; }
.med-admin-info-item .lbl { color: #888; font-size: .68rem; margin-bottom: 2px; }
.med-admin-info-item .val { font-weight: 600; color: var(--color-primary); }

/* ── Espec admin list ── */
.espec-admin-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 10px; border: 1px solid #dde8f7; margin-bottom: 6px; background: #f7fbff; font-size: .82rem; }

/* ── Dia buttons ── */
.dia-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; border: 1.5px solid #bdd0ee; font-size: .75rem; font-weight: 600; cursor: pointer; background: transparent; transition: all .12s; }
.dia-btn.on { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

/* ── Usuarios ── */
.usr-row { display: grid; grid-template-columns: minmax(0,1.5fr) 100px 90px 70px 100px; gap: 8px; align-items: center; padding: 8px 12px; border-radius: 10px; border: 1px solid #dde8f7; font-size: .8rem; margin-bottom: 5px; background: #f7fbff; }

/* ── Auditoría ── */
.log-row { display: grid; grid-template-columns: 80px minmax(0,1fr) minmax(0,1.2fr) 90px; gap: 7px; align-items: start; padding: 7px 12px; border-radius: 10px; border: 1px solid #dde8f7; font-size: .78rem; margin-bottom: 4px; background: #f7fbff; }

/* ── Notificación admin ── */
.ntif { border-radius: 10px; padding: 10px 16px; font-size: .82rem; display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.ntif.ok   { background: #d1f5e0; border: 1px solid #75c98f; color: #0a4022; }
.ntif.err  { background: #f8d7da; border: 1px solid #f1aeb5; color: #842029; }
.ntif.warn { background: #ffe5cc; border: 1px solid #ffb380; color: #7c3400; }
.ntif.info { background: #cfe2ff; border: 1px solid #84b0f0; color: #084298; }

/* ── Reprog banner ── */
.reprog-banner { border: 2px solid #fd7e14; background: #fff3e0; border-radius: 14px; padding: 14px; margin-bottom: 12px; }

/* ── Botones Bootstrap override ── */
.btn-primary { background: var(--color-primary); border-color: var(--color-primary); font-weight: 600; }
.btn-primary:hover { background: var(--color-primary-dk); border-color: var(--color-primary-dk); }
.btn-outline-primary { color: var(--color-primary); border-color: var(--color-primary); font-weight: 600; }
.btn-outline-primary:hover { background: var(--color-primary); color: #fff; }

/* ── Responsive ── */
@media (max-width: 640px) {
  .espec-grid { grid-template-columns: 1fr 1fr; }
  .prof-grid  { grid-template-columns: 1fr; }
  .tgrid { grid-template-columns: repeat(4,1fr); }
  .adm-table-row.cols-t, .adm-hdr.cols-t { grid-template-columns: 70px 1fr 90px 80px; }
  .adm-table-row.cols-t > *:nth-child(3), .adm-hdr.cols-t > *:nth-child(3) { display: none; }
  .med-admin-info-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 400px) {
  .espec-grid { grid-template-columns: 1fr; }
  .tgrid { grid-template-columns: repeat(3,1fr); }
}