/* ==========================================================================
   INFORMACIÓN HOSPITALARIA DIARIA · IMSS-Bienestar Oaxaca (CEIBO)
   Sistema de diseño compartido
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  /* Marca IMSS-Bienestar */
  --guinda:        #9E2449;
  --guinda-oscuro: #6E1638;
  --guinda-suave:  #F4E3E9;

  /* Neutros */
  --fondo:         #F5F6F7;
  --superficie:    #FFFFFF;
  --linea:         #E4E6EA;
  --texto:         #24242B;
  --texto-suave:   #6B6C75;

  /* Acento informativo */
  --acento:        #1C7C8C;
  --acento-suave:  #E1F0F2;

  /* Semáforo */
  --verde:         #1E8E5A;
  --verde-suave:   #E4F5EC;
  --amarillo:      #C98A12;
  --amarillo-suave:#FBF0DA;
  --rojo:          #C63A46;
  --rojo-suave:    #FBE6E7;
  --gris-semaforo: #9096A2;
  --gris-suave:    #EEF0F2;

  --radio: 14px;
  --radio-sm: 8px;
  --sombra: 0 4px 18px rgba(36,36,43,0.06);
  --sombra-alta: 0 12px 32px rgba(110,22,56,0.16);

  --fuente-display: 'Barlow Condensed', sans-serif;
  --fuente-cuerpo: 'Inter', sans-serif;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--fuente-cuerpo);
  background: var(--fondo);
  color: var(--texto);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4{
  font-family: var(--fuente-display);
  font-weight: 700;
  letter-spacing: .2px;
  margin: 0 0 .3em 0;
  color: var(--guinda-oscuro);
}

a{ color: var(--acento); }

/* ---------- Encabezado institucional ---------- */
.encabezado{
  background: linear-gradient(120deg, var(--guinda) 0%, var(--guinda-oscuro) 100%);
  color: #fff;
  padding: 20px 24px;
  display:flex;
  align-items:center;
  gap:16px;
  position: sticky;
  top:0;
  z-index: 50;
  box-shadow: var(--sombra-alta);
}
.encabezado img.logo{
  height: 40px;
  filter: brightness(0) invert(1);
}
.encabezado .titulos{ flex:1; min-width:0; }
.encabezado h1{
  color:#fff;
  font-size: clamp(20px, 3vw, 28px);
  margin:0;
  line-height:1.05;
}
.encabezado p{
  margin: 2px 0 0;
  font-size: 13px;
  color: rgba(255,255,255,.82);
  font-family: var(--fuente-cuerpo);
}

/* Línea de pulso decorativa (elemento de firma visual) */
.linea-pulso{
  width:100%;
  height: 26px;
  overflow:hidden;
  display:block;
}
.linea-pulso svg{ width: 200%; height:100%; animation: desplazar-pulso 6s linear infinite; }
.linea-pulso path{
  fill:none;
  stroke: rgba(255,255,255,.55);
  stroke-width:2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@keyframes desplazar-pulso{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .linea-pulso svg{ animation: none; }
}

/* ---------- Layout general ---------- */
.contenedor{
  max-width: 920px;
  margin: 0 auto;
  padding: 28px 20px 80px;
}
.contenedor.ancho{ max-width: 1180px; }

/* ---------- Barra de progreso tipo monitor ---------- */
.progreso-wrap{
  position: sticky;
  top: 92px;
  z-index: 40;
  background: var(--fondo);
  padding: 14px 0 6px;
}
.progreso-pasos{
  display:flex;
  gap:6px;
  margin-bottom:8px;
}
.paso-punto{
  flex:1;
  height:6px;
  border-radius:4px;
  background: var(--linea);
  transition: background .3s ease;
}
.paso-punto.activo{ background: var(--guinda); }
.paso-punto.hecho{ background: var(--acento); }
.progreso-texto{
  display:flex;
  justify-content:space-between;
  font-size:12.5px;
  color: var(--texto-suave);
  font-weight:600;
  text-transform: uppercase;
  letter-spacing:.4px;
}
.progreso-texto span.actual{ color: var(--guinda); }

/* ---------- Tarjetas / secciones del formulario ---------- */
.tarjeta{
  background: var(--superficie);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 28px 26px;
  margin-bottom: 20px;
  border: 1px solid var(--linea);
}
.paso{ display:none; animation: aparecer .35s ease; }
.paso.activo{ display:block; }
@keyframes aparecer{
  from{ opacity:0; transform: translateY(8px); }
  to{ opacity:1; transform: translateY(0); }
}

.paso-titulo{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin-bottom: 4px;
}
.paso-titulo .eyebrow{
  font-family: var(--fuente-display);
  font-size:14px;
  font-weight:600;
  color: var(--acento);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.paso-descripcion{
  color: var(--texto-suave);
  font-size: 14.5px;
  margin-bottom: 22px;
}

/* ---------- Campos ---------- */
.campo{ margin-bottom: 20px; }
.campo label{
  display:block;
  font-weight:600;
  font-size: 14.5px;
  margin-bottom:6px;
  color: var(--texto);
}
.campo .ayuda{
  font-size:12.5px;
  color: var(--texto-suave);
  margin-top:4px;
}
.campo input[type=text],
.campo input[type=number],
.campo textarea,
.campo select{
  width:100%;
  padding: 11px 13px;
  border-radius: var(--radio-sm);
  border: 1.5px solid var(--linea);
  font-family: var(--fuente-cuerpo);
  font-size: 15px;
  background: #fff;
  color: var(--texto);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.campo textarea{ min-height: 90px; resize: vertical; }
.campo input:focus, .campo textarea:focus, .campo select:focus{
  outline:none;
  border-color: var(--guinda);
  box-shadow: 0 0 0 3px var(--guinda-suave);
}
.campo input:invalid:not(:placeholder-shown){ border-color: var(--rojo); }

.rejilla-2{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; }
.rejilla-3{ display:grid; grid-template-columns: repeat(3,1fr); gap:14px; }
@media (max-width: 640px){
  .rejilla-2, .rejilla-3{ grid-template-columns: 1fr; }
}

/* Grupo de turnos M/V/N */
.grupo-turno{
  border: 1.5px solid var(--linea);
  border-radius: var(--radio-sm);
  padding: 16px;
  background: #FBFBFC;
}
.grupo-turno .turno-fila{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top:10px;
}
.grupo-turno .turno-item label{
  font-size:12.5px;
  font-weight:600;
  color: var(--texto-suave);
  text-transform: uppercase;
  letter-spacing:.4px;
}
.grupo-turno .total-turno{
  margin-top: 10px;
  font-size:13px;
  color: var(--acento);
  font-weight:700;
}

/* Chips de selección única (radio estilizado) */
.chips{ display:flex; gap:10px; flex-wrap:wrap; }
.chip{
  position:relative;
}
.chip input{ position:absolute; opacity:0; inset:0; cursor:pointer; margin:0; width:100%; height:100%; }
.chip span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--linea);
  font-size: 14px;
  font-weight:600;
  color: var(--texto-suave);
  background:#fff;
  transition: all .15s ease;
}
.chip input:checked + span{
  border-color: var(--guinda);
  color: var(--guinda);
  background: var(--guinda-suave);
}
.chip input:focus-visible + span{ box-shadow: 0 0 0 3px var(--guinda-suave); }

/* ---------- Botones ---------- */
.botones-nav{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top: 8px;
}
.boton{
  font-family: var(--fuente-cuerpo);
  font-weight:700;
  font-size: 15px;
  padding: 12px 26px;
  border-radius: 999px;
  border: none;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .15s ease;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.boton:active{ transform: scale(.97); }
.boton-primario{ background: var(--guinda); color:#fff; box-shadow: 0 6px 16px rgba(158,36,73,.28); }
.boton-primario:hover{ background: var(--guinda-oscuro); }
.boton-secundario{ background: #fff; color: var(--texto); border:1.5px solid var(--linea); }
.boton-secundario:hover{ border-color: var(--guinda); color: var(--guinda); }
.boton-fantasma{ background:transparent; color: var(--acento); padding: 10px 6px; }
.boton:disabled{ opacity:.45; cursor:not-allowed; }

/* ---------- Semáforo ---------- */
.punto-semaforo{
  width:12px; height:12px; border-radius:50%;
  display:inline-block; flex-shrink:0;
}
.punto-semaforo.verde{ background: var(--verde); box-shadow: 0 0 0 4px var(--verde-suave); }
.punto-semaforo.amarillo{ background: var(--amarillo); box-shadow: 0 0 0 4px var(--amarillo-suave); }
.punto-semaforo.rojo{ background: var(--rojo); box-shadow: 0 0 0 4px var(--rojo-suave); animation: latido 1.4s ease-in-out infinite; }
.punto-semaforo.gris{ background: var(--gris-semaforo); box-shadow: 0 0 0 4px var(--gris-suave); }
@keyframes latido{
  0%,100%{ box-shadow: 0 0 0 4px var(--rojo-suave); }
  50%{ box-shadow: 0 0 0 7px var(--rojo-suave); }
}
@media (prefers-reduced-motion: reduce){ .punto-semaforo.rojo{ animation:none; } }

.etiqueta-semaforo{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:700;
  padding: 6px 12px; border-radius:999px;
}
.etiqueta-semaforo.verde{ background: var(--verde-suave); color: var(--verde); }
.etiqueta-semaforo.amarillo{ background: var(--amarillo-suave); color: var(--amarillo); }
.etiqueta-semaforo.rojo{ background: var(--rojo-suave); color: var(--rojo); }
.etiqueta-semaforo.gris{ background: var(--gris-suave); color: var(--gris-semaforo); }

/* ---------- Tarjetas de indicador (resultados / tablero) ---------- */
.rejilla-indicadores{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(220px,1fr));
  gap:14px;
}
.tarjeta-indicador{
  border-radius: var(--radio-sm);
  border: 1.5px solid var(--linea);
  padding: 16px;
  background:#fff;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.tarjeta-indicador .fila-top{
  display:flex; align-items:center; justify-content:space-between;
}
.tarjeta-indicador .nombre{
  font-size:12.5px; font-weight:700; color: var(--texto-suave);
  text-transform:uppercase; letter-spacing:.3px;
}
.tarjeta-indicador .valor{
  font-family: var(--fuente-display);
  font-size: 30px; font-weight:700; color: var(--texto);
  line-height:1;
}
.tarjeta-indicador.rojo{ border-color: var(--rojo); background: var(--rojo-suave); }
.tarjeta-indicador.amarillo{ border-color: var(--amarillo); background: var(--amarillo-suave); }
.tarjeta-indicador.verde{ border-color: var(--verde); background: var(--verde-suave); }

/* ---------- Utilidades ---------- */
.texto-suave{ color: var(--texto-suave); }
.centro{ text-align:center; }
.mt-24{ margin-top:24px; }
.oculto{ display:none !important; }

.pantalla-exito{
  text-align:center;
  padding: 20px 10px 6px;
}
.pantalla-exito .icono-exito{
  width:72px; height:72px; margin:0 auto 18px;
  border-radius:50%;
  background: var(--verde-suave);
  display:flex; align-items:center; justify-content:center;
}

footer.pie{
  text-align:center;
  color: var(--texto-suave);
  font-size:12.5px;
  padding: 30px 20px 50px;
}

/* Scrollbar sutil */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background: #D7D3D3; border-radius:10px; }