/* ============================================================
   FarmaCerca · hoja de estilos
   Criterios de accesibilidad WCAG 2.1 nivel AA (cambio CR-02):
   - contraste mínimo 4.5:1 en texto y 3:1 en elementos de interfaz
   - áreas de toque de 44 px en todo control interactivo
   - unidades relativas, para que el escalado del sistema no rompa la composición
   - foco visible en todo elemento enfocable
   ============================================================ */

:root {
    --marino:      #12324F;
    --marino-osc:  #0A1E33;
    --azul:        #1E4E73;
    --azul-claro:  #EAF0F6;
    --ambar:       #A8641F;
    --ambar-claro: #FBF1E3;
    --verde:       #1C6B4B;
    --verde-claro: #E6F2EC;
    --rojo:        #9B2C2C;
    --rojo-claro:  #FBEAEA;

    --tinta:   #1A1F26;
    --gris:    #51606F;
    --linea:   #D7DFE8;
    --fondo:   #F6F8FB;
    --blanco:  #FFFFFF;

    --radio:   0.75rem;
    --sombra:  0 1px 2px rgba(16, 36, 59, .06), 0 4px 12px rgba(16, 36, 59, .05);
    --toque:   2.75rem;             /* 44 px */
}

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 100%; }           /* respeta el tamaño de texto del sistema */

body {
    margin: 0;
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--tinta);
    background: var(--fondo);
    -webkit-font-smoothing: antialiased;
}


/* ---------- accesibilidad ---------- */
.saltar {
    position: absolute; left: -999px; top: 0; z-index: 100;
    background: var(--marino); color: var(--blanco);
    padding: .75rem 1rem; border-radius: 0 0 var(--radio) 0;
}
.saltar:focus { left: 0; }

.visually-hidden {
    position: absolute !important; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

:focus-visible { outline: 3px solid var(--ambar); outline-offset: 2px; }

/* ---------- escenario: en escritorio la aplicación se ve dentro de un teléfono ---------- */
.escenario {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 1.5rem 1rem;
    background: var(--marino-osc);
    background-image: radial-gradient(circle at 50% 0%, #163B5C 0%, var(--marino-osc) 62%);
}

.dispositivo {
    position: relative;
    width: 24.4rem;                       /* 390 px */
    max-width: 100%;
    border-radius: 2.6rem;
    padding: .7rem;
    background: #05101C;
    box-shadow: 0 0 0 1px #27465F, 0 1.8rem 4rem rgba(0, 0, 0, .55);
}

.pantalla {
    position: relative;
    height: min(52.75rem, calc(100vh - 5.5rem));   /* 844 px */
    border-radius: 2rem;
    overflow: hidden;
    background: var(--fondo);
    display: flex; flex-direction: column;
}

.interruptor-vista {
    position: fixed; top: 1rem; right: 1rem; z-index: 60;
    min-height: var(--toque); padding: 0 1rem;
    border: 1px solid #2E577C; border-radius: .5rem;
    background: rgba(10, 30, 51, .85); color: #D4E0EC;
    font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
}
.interruptor-vista:hover { border-color: var(--ambar); color: #F0C48A; }

/* ---------- barra de estado del sistema ---------- */
.barra-estado {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    padding: .65rem 1.4rem .3rem;
    background: var(--marino); color: var(--blanco);
    font-size: .82rem; font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.barra-estado .muesca { flex: 1; }
.iconos-sistema { display: inline-flex; align-items: center; gap: .3rem; }

/* ---------- cabecera de la aplicación ---------- */
.cabecera { flex: 0 0 auto; background: var(--marino); color: var(--blanco); padding: .2rem 1rem .75rem; }
.cabecera-fila { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.marca { display: inline-flex; align-items: center; min-height: var(--toque); gap: .45rem; color: var(--blanco); text-decoration: none; font-weight: 700; font-size: 1.15rem; }
.marca-icono { display: inline-flex; color: #E8B373; }

.boton-perfil {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--toque); height: var(--toque); border-radius: 50%;
    border: 1px solid #2E577C; color: var(--blanco); text-decoration: none; flex: 0 0 auto;
}
.boton-perfil:hover { background: #1B4164; }

/* ---------- navegación inferior ---------- */
.nav-inferior {
    flex: 0 0 auto;
    display: flex; border-top: 1px solid var(--linea); background: var(--blanco);
    padding: .35rem .25rem .2rem;
}
.nav-inferior a {
    flex: 1 1 0; min-width: 0; min-height: var(--toque);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
    padding: .3rem .1rem; color: var(--gris); text-decoration: none;
    font-size: .72rem; font-weight: 600; text-align: center;
}
.nav-inferior a.activo { color: var(--marino); }
.nav-inferior a.activo svg { stroke-width: 2.2; }

.barra-inicio { flex: 0 0 auto; height: 1.3rem; background: var(--blanco); position: relative; }
.barra-inicio::after {
    content: ''; position: absolute; left: 50%; top: .25rem; transform: translateX(-50%);
    width: 8.5rem; height: .3rem; border-radius: .2rem; background: #B9C4D1;
}

/* ---------- contenido desplazable ---------- */
.principal { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 1.1rem 1rem 1.5rem; -webkit-overflow-scrolling: touch; }
.contenedor { width: 100%; }
.bloque { margin-top: 1.75rem; }
.titulo-seccion { font-size: 1.05rem; margin: 0 0 .75rem; }

.sello-demo { margin: 2rem 0 0; padding-top: 1rem; border-top: 1px solid var(--linea); font-size: .75rem; color: var(--gris); text-align: center; }

/* ---------- en teléfono real no hay marco: la aplicación ocupa la pantalla ---------- */
@media (max-width: 30rem), (max-height: 38rem) {
    .escenario { min-height: 100vh; padding: 0; background: var(--fondo); background-image: none; display: block; }
    .dispositivo { width: 100%; border-radius: 0; padding: 0; background: none; box-shadow: none; }
    .pantalla { height: 100vh; height: 100dvh; border-radius: 0; }
    .barra-estado { display: none; }
    .barra-inicio { display: none; }
    .interruptor-vista { display: none; }
    .cabecera { padding-top: calc(.5rem + env(safe-area-inset-top, 0px)); }
    .nav-inferior { padding-bottom: calc(.2rem + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- modo pantalla completa, para revisar el panel con holgura ---------- */
body.vista-amplia .escenario { padding: 0; background: var(--fondo); background-image: none; display: block; min-height: 100vh; }
body.vista-amplia .dispositivo { width: 100%; max-width: none; border-radius: 0; padding: 0; background: none; box-shadow: none; }
body.vista-amplia .pantalla { height: 100vh; border-radius: 0; }
body.vista-amplia .barra-estado { display: none; }
body.vista-amplia .barra-inicio { display: none; }
body.vista-amplia .cabecera { padding-left: 2rem; padding-right: 2rem; }
body.vista-amplia .principal { padding: 1.75rem 2rem 2.5rem; }
body.vista-amplia .principal > * { max-width: 64rem; margin-left: auto; margin-right: auto; }
body.vista-amplia .nav-inferior { max-width: 64rem; margin: 0 auto; width: 100%; }
/* en vista amplia el interruptor baja para no tapar la cabecera */
body.vista-amplia .interruptor-vista { top: 4.75rem; }

/* ---------- tipografía ---------- */
h1 { font-size: 1.45rem; line-height: 1.24; margin: 0 0 .5rem; text-wrap: balance; }
h2 { font-size: 1.1rem; line-height: 1.3; margin: 0 0 .5rem; }
body.vista-amplia h1 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem); }

.eyebrow { font-size: .74rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ambar); margin: 0 0 .4rem; }
.texto-apoyo { color: var(--gris); margin: 0 0 1rem; max-width: 62ch; }
.texto-menor { font-size: .84rem; color: var(--gris); margin: .35rem 0 0; }
.nota-pie { font-size: .84rem; color: var(--gris); margin-top: 1.25rem; }

/* ---------- hero y buscador ---------- */
.hero { margin-bottom: 1.25rem; }

.buscador {
    background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio);
    box-shadow: var(--sombra); padding: 1.1rem;
    display: grid; gap: .9rem; grid-template-columns: 1fr;
}
body.vista-amplia .buscador { grid-template-columns: 1fr 12rem 7rem; align-items: end; }
body.vista-amplia .campo-accion { grid-column: 1 / -1; justify-self: start; }

.campo-grupo { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.campo-estrecho { max-width: 100%; }
body.vista-amplia .campo-estrecho { max-width: 14rem; }
.campo-accion { justify-content: flex-end; }

.etiqueta { font-size: .9rem; font-weight: 600; color: var(--tinta); }

.campo {
    width: 100%; min-height: var(--toque);
    padding: .6rem .8rem; font: inherit; color: var(--tinta);
    background: var(--blanco); border: 1px solid #9FB0C2; border-radius: .5rem;
}
.campo:focus { border-color: var(--marino); }

.campo-con-boton { display: flex; gap: .5rem; align-items: stretch; }
.boton-voz {
    flex: 0 0 auto; width: var(--toque); min-height: var(--toque);
    border: 1px solid var(--marino); border-radius: .5rem;
    background: var(--marino); color: var(--blanco); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.boton-voz:hover { background: var(--azul); }
.boton-voz[aria-pressed="true"] { background: var(--ambar); border-color: var(--ambar); }

/* ---------- botones ---------- */
.boton, .boton-secundario {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: var(--toque); padding: 0 1.25rem;
    border-radius: .5rem; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
    border: 1px solid transparent;
}
.boton { background: var(--marino); color: var(--blanco); }
.boton:hover { background: var(--azul); }
.boton-grande { width: 100%; font-size: 1.05rem; }
body.vista-amplia .boton-grande { width: auto; }

.boton-secundario { background: var(--blanco); color: var(--marino); border-color: var(--marino); }
.boton-secundario:hover { background: var(--azul-claro); }

.boton-texto {
    background: none; border: 0; padding: .5rem .25rem; min-height: var(--toque);
    color: var(--rojo); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline;
}

.acciones-fila { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* ---------- chips ---------- */
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0; }
.chip {
    display: inline-flex; align-items: center; min-height: var(--toque); padding: 0 1rem;
    background: var(--blanco); border: 1px solid var(--linea); border-radius: 1.5rem;
    color: var(--tinta); text-decoration: none; font-size: .95rem;
}
.chip:hover { border-color: var(--marino); background: var(--azul-claro); }

/* ---------- tarjetas ---------- */
.tarjeta {
    background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio);
    box-shadow: var(--sombra); padding: 1.15rem; margin-bottom: 1rem;
}
.tarjeta-centro { text-align: center; max-width: 38rem; margin-left: auto; margin-right: auto; }
.tarjeta-estrecha { max-width: 34rem; }
.tarjeta-vacia { text-align: center; }
.tarjeta-acento { border-top: 4px solid var(--ambar); }
.tarjeta-exito { border-top: 4px solid var(--verde); }

.tarjetas-fila { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
body.vista-amplia .tarjetas-fila { grid-template-columns: 1fr 1fr; }

.dos-columnas { display: grid; gap: 1.25rem; grid-template-columns: 1fr; align-items: start; }
body.vista-amplia .dos-columnas { grid-template-columns: 1fr 1fr; }

.codigo { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .06em; color: var(--marino); }

/* ---------- migas y encabezados ---------- */
.miga { display: flex; gap: .5rem; align-items: center; font-size: .9rem; color: var(--gris); margin-bottom: 1rem; flex-wrap: wrap; }
.miga a { display: inline-flex; align-items: center; min-height: var(--toque); color: var(--azul); }

.encabezado-resultado { display: flex; gap: 1rem; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; margin-bottom: 1.25rem; }
.selector-establecimiento { display: flex; flex-direction: column; gap: .35rem; min-width: 14rem; }

.contador { font-size: 1.05rem; margin: 0 0 .85rem; }

/* ---------- lista de farmacias ---------- */
.lista-farmacias { list-style: none; padding: 0; margin: 0; display: grid; gap: .85rem; }

.farmacia {
    background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio);
    box-shadow: var(--sombra); padding: 1.1rem 1.25rem;
}
.farmacia-agotada { opacity: .82; }

.farmacia-cabecera { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.farmacia-nombre { font-size: 1.1rem; margin: 0; }
.farmacia-direccion { margin: .15rem 0 0; color: var(--gris); font-size: .92rem; }

.farmacia-datos { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.25rem; margin: .6rem 0; font-size: .92rem; }
.dato { display: inline-flex; align-items: center; min-height: var(--toque); color: var(--gris); }
.dato-abierta { color: var(--verde); font-weight: 600; }
.dato-cerrada { color: var(--ambar); font-weight: 600; }
.dato-enlace { display: inline-flex; align-items: center; min-height: var(--toque); color: var(--azul); }

.farmacia-pie { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; border-top: 1px solid var(--linea); padding-top: .75rem; }
.enlace-accion { display: inline-flex; align-items: center; min-height: var(--toque); color: var(--marino); font-weight: 700; text-decoration: none; }
.enlace-accion:hover { text-decoration: underline; }
.enlace-suave { color: var(--ambar); }

/* ---------- pastillas y estados ---------- */
.pastilla { display: inline-flex; align-items: center; padding: .3rem .7rem; border-radius: 1rem; font-size: .8rem; font-weight: 700; }
.pastilla-ok      { background: var(--verde-claro); color: var(--verde); }
.pastilla-pocas   { background: var(--ambar-claro); color: var(--ambar); }
.pastilla-agotado { background: var(--rojo-claro);  color: var(--rojo); }

.estado { display: inline-flex; padding: .25rem .6rem; border-radius: 1rem; font-size: .8rem; font-weight: 700; }
.estado-solicitada { background: var(--ambar-claro); color: var(--ambar); }
.estado-confirmada { background: var(--verde-claro); color: var(--verde); }
.estado-entregada  { background: var(--azul-claro);  color: var(--azul); }
.estado-vencida    { background: #ECEFF3; color: var(--gris); }
.estado-cancelada  { background: var(--rojo-claro);  color: var(--rojo); }

/* ---------- definiciones ---------- */
.definiciones { display: grid; gap: .75rem; margin: 1.25rem 0 0; }
.definiciones > div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--linea); padding-bottom: .55rem; }
.definiciones dt { color: var(--gris); font-size: .9rem; margin: 0; }
.definiciones dd { margin: 0; font-weight: 600; text-align: right; }
.definiciones-centro > div { text-align: left; }

/* ---------- formularios ---------- */
.formulario { display: grid; gap: 1rem; margin-top: 1rem; }
.error { color: var(--rojo); font-size: .85rem; }

/* ---------- tablas ---------- */
.tabla-envoltorio { overflow-x: auto; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); }
.tabla { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 38rem; }
.tabla thead th { background: var(--marino); color: var(--blanco); text-align: left; padding: .7rem .85rem; font-weight: 600; }
.tabla tbody td { padding: .7rem .85rem; border-bottom: 1px solid var(--linea); }
.tabla tbody tr:nth-child(even) { background: #FAFCFE; }
.tabla .numero { text-align: right; font-variant-numeric: tabular-nums; }
.tabla .celda-accion { text-align: right; }
.fila-agotada td { color: var(--gris); }

/* ---------- panel ---------- */
.indicadores { display: grid; gap: .85rem; grid-template-columns: repeat(2, 1fr); margin-bottom: 1.25rem; }
body.vista-amplia .indicadores { grid-template-columns: repeat(4, 1fr); }

.indicador { background: var(--blanco); border: 1px solid var(--linea); border-top: 3px solid var(--ambar); border-radius: var(--radio); padding: 1rem; text-align: center; }
.indicador-valor { display: block; font-size: 1.75rem; font-weight: 700; color: var(--marino); font-variant-numeric: tabular-nums; }
.indicador-etiqueta { display: block; font-size: .85rem; color: var(--gris); margin-top: .2rem; }

.barra-sincronizacion { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; background: var(--azul-claro); border-radius: var(--radio); padding: .85rem 1.1rem; font-size: .92rem; }

.lista-reservas { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.reserva-fila { background: var(--blanco); border: 1px solid var(--linea); border-left: 4px solid var(--ambar); border-radius: var(--radio); padding: 1rem 1.1rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.reserva-codigo { margin: 0; font-weight: 600; }

.lista { margin: 0; padding-left: 1.1rem; color: var(--gris); }
.lista li { margin-bottom: .35rem; }
.lista-simple { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.lista-simple li { background: var(--blanco); border: 1px solid var(--linea); border-radius: .5rem; padding: .6rem .85rem; font-size: .92rem; }

/* ---------- mensajes ---------- */
.mensaje { border-radius: var(--radio); padding: .9rem 1.1rem; margin-bottom: 1.25rem; font-weight: 600; }
.mensaje-ok    { background: var(--verde-claro); color: var(--verde); border: 1px solid #BFE0D0; }
.mensaje-error { background: var(--rojo-claro);  color: var(--rojo);  border: 1px solid #F0C8C8; }

/* ---------- insignia de accesibilidad ---------- */
.bloque-acc { margin-top: 1.5rem; }
.acc-insignia { display: inline-flex; align-items: center; gap: .6rem; background: var(--azul-claro); color: var(--marino); border-radius: .6rem; padding: .7rem 1rem; font-size: .88rem; font-weight: 600; }

/* ---------- movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- mapa de resultados ---------- */
.mapa { margin: 0 0 1.25rem; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; }
.mapa svg { display: block; width: 100%; height: auto; }
.mapa-pie { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; padding: .75rem 1rem; font-size: .82rem; color: var(--gris); border-top: 1px solid var(--linea); }
.mapa-leyenda { display: inline-flex; align-items: center; gap: .4rem; }
.punto { width: .7rem; height: .7rem; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.punto-usted { background: #2A7D8C; }
.punto-ok    { background: var(--marino); }
.punto-pocas { background: var(--ambar); }
.punto-sin   { background: #8894A3; }

.farmacia-titulo { display: flex; gap: .7rem; align-items: flex-start; min-width: 0; }
.numero-pin {
    flex: 0 0 auto; width: 1.6rem; height: 1.6rem; border-radius: 50%;
    background: var(--marino); color: var(--blanco);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .82rem; font-weight: 700; margin-top: .15rem;
}
.farmacia-agotada .numero-pin { background: #8894A3; }

/* ---------- integración y notificaciones ---------- */
.integracion { display: grid; gap: .75rem; }
.integracion-fila { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: .85rem 1.1rem; }
.etiqueta-modo { display: inline-flex; align-items: center; padding: .25rem .7rem; border-radius: 1rem; background: var(--azul-claro); color: var(--marino); font-size: .78rem; font-weight: 700; }
.alerta-lista { border-left: 4px solid var(--verde); }

/* ---------- lienzo del mapa ---------- */
.mapa-svg { display: block; width: 100%; height: auto; }

/* ---------- botón de ubicación del dispositivo ---------- */
.boton-ubicacion {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    min-height: var(--toque); margin-top: .5rem; padding: 0 .9rem;
    border: 1px solid var(--marino); border-radius: .5rem;
    background: var(--blanco); color: var(--marino);
    font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
}
.boton-ubicacion:hover { background: var(--azul-claro); }
.boton-ubicacion[aria-pressed="true"] { background: var(--marino); color: var(--blanco); }
.boton-ubicacion:disabled { opacity: .55; cursor: default; }
.texto-ok { color: var(--verde); font-weight: 600; }

.mapa-ubicacion-propia { color: var(--verde); font-weight: 700; }