/* De Turno · estilos propios. La base (colores, letra, botones) viene de zojim-ui.css. */

/* Color de De Turno: el verde de la cruz de farmacia (salud, "acá te atienden") sobre el azul de la noche (el turno).
   El ícono va en azul noche, que no usa ninguna otra app; el verde se usa solo en la acción principal y en "Abierta ahora". */
[data-app="deturno"] {
  --z-app-1: #6ee7b7;
  --z-app-2: #34d399;
  --z-app-tinta: #03241a;
  --tu-verde: #7ef0c1;      /* verde claro para texto sobre negro (contraste 13:1) */
  --tu-noche: #1f3f94;
}
/* Por si zojim-ui.css no carga (sin internet la primera vez) */
body { margin: 0; background: #09090a; color: #f5f3ee; font-family: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.6; }
html { font-size: 112.5%; scroll-padding-top: 90px; }
a { color: var(--tu-verde); }

.contenedor { width: 100%; max-width: 820px; margin: 0 auto; padding: 0 16px; box-sizing: border-box; }
@media (min-width: 720px) { .contenedor { padding: 0 32px; } }

/* Cabecera */
.cabecera { position: sticky; top: 0; z-index: 20; background: rgba(9, 9, 10, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--z-borde, rgba(255,255,255,.12)); padding-top: env(safe-area-inset-top); }
.cabecera-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 72px; }
.marca { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; color: var(--z-texto, #f5f3ee) !important; text-decoration: none; font-weight: 700; font-size: 1.3rem; letter-spacing: -0.02em; }
.marca img { width: 44px; height: 44px; border-radius: 22%; box-shadow: 0 10px 26px -12px var(--tu-noche); }
.btn-chico { min-height: 48px; padding: 8px 18px; font-size: 1rem; }

main { padding-top: 16px; padding-bottom: 40px; }

/* Aviso de "sin internet" */
.aviso-red { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 16px; padding: 16px 18px; border-radius: 16px; border: 2px solid rgba(245, 203, 110, .7); background: rgba(245, 203, 110, .1); color: var(--z-texto, #f5f3ee); font-weight: 600; }
.aviso-red[hidden] { display: none; }

/* Arriba */
.hero { margin: 8px 0 20px; }
.titulo { margin: 2px 0 6px; font-size: clamp(2rem, 7vw, 3rem); font-weight: 650; letter-spacing: -0.035em; line-height: 1.06; }
.titulo em { font-family: var(--z-serif, Georgia, serif); font-style: italic; font-weight: 400; background: linear-gradient(120deg, #7ef0c1, #34d399); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .08em; }
.hora { margin: 0 0 18px; color: var(--z-texto-2, #d4d0c8); font-size: 1.05rem; }
.donde { display: grid; gap: 10px; }
#btn-ubicacion { min-height: 64px; font-size: 1.15rem; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
#btn-ubicacion svg { width: 26px; height: 26px; flex: none; }
.ayuda-ubicacion { margin: 0 0 6px; color: var(--z-texto-2, #d4d0c8); font-size: var(--z-t-chico, .875rem); }
.campo-zona { margin: 4px 0 0; }
.campo-zona select { appearance: none; -webkit-appearance: none; padding-right: 48px; cursor: pointer; width: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23f5f3ee' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 22px; }
.aviso-ubicacion { margin: 4px 0; }
.mostrando { margin: 16px 0 0; color: var(--z-texto-2, #d4d0c8); }
.mostrando .z-btn-texto { min-height: 48px; padding: 0 6px; }

/* Listas de farmacias */
.lista { display: grid; gap: 14px; margin: 8px 0 24px; }
.subtitulo { margin: 14px 0 2px; font-size: var(--z-t-h3, 1.33rem); font-weight: 650; letter-spacing: -0.02em; line-height: 1.2; }
.cargando, .vacio { color: var(--z-texto-2, #d4d0c8); display: flex; gap: 10px; align-items: center; }
.farmacia { position: relative; overflow: hidden; display: grid; gap: 6px; padding: 22px 20px 20px !important; }
.farmacia::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--tu-noche), var(--z-app-2)); }
.farmacia h3 { margin: 0; font-size: clamp(1.45rem, 5vw, 1.75rem); line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; }
.farmacia p { margin: 0; }
.estado { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1.02rem; }
.estado .punto { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.estado.abierta { color: var(--tu-verde); }
.estado.abierta .punto { background: #34d399; box-shadow: 0 0 0 4px rgba(52, 211, 153, .22); }
.estado.proxima { color: var(--z-alerta, #f5cb6e); }
.estado.proxima .punto { background: var(--z-alerta, #f5cb6e); }
.dir { font-size: 1.08rem; color: var(--z-texto, #f5f3ee); }
.dir.sin { color: var(--z-texto-2, #d4d0c8); font-size: 1rem; }
.dist { font-weight: 700; color: var(--z-texto, #f5f3ee); }
.horario { color: var(--z-texto, #f5f3ee); font-weight: 600; }
.zona-tag { color: var(--z-texto-3, #aaa69e); font-size: var(--z-t-chico, .875rem); }
.acciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 12px; margin-top: 10px; } /* con "A+" quedan uno abajo del otro */
.acciones .z-btn { min-height: 58px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 1.08rem; padding: 8px 12px; text-align: center; line-height: 1.15; }
.acciones svg { width: 22px; height: 22px; flex: none; }
.btn-llamar { border-color: rgba(110, 231, 183, .75) !important; color: var(--tu-verde) !important; }

/* Otro día */
.otro-dia { margin: 8px 0 24px; padding-top: 8px; border-top: 1px solid var(--z-borde, rgba(255,255,255,.12)); }
.otro-dia[hidden], .planilla[hidden] { display: none; }
.dias { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 10px; margin: 12px 0 8px; }
@media (max-width: 420px) { .dias { grid-template-columns: 1fr 1fr; } .dia-otro { grid-column: 1 / -1; } }
.dias button, .dia-otro { min-height: 56px; border-radius: 999px; border: 2px solid var(--z-borde-fuerte, rgba(255,255,255,.28)); background: rgba(255,255,255,.04); color: var(--z-texto, #f5f3ee); font: 600 1.05rem/1.15 var(--z-sans, sans-serif); cursor: pointer; }
.dias button[aria-pressed="true"] { border-color: transparent; background: linear-gradient(120deg, var(--z-app-1), var(--z-app-2)); color: var(--z-app-tinta); }
.dia-otro { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 8px 0 18px; box-sizing: border-box; }
.dia-otro input { min-height: 44px; border: 0; background: transparent; color: var(--z-texto, #f5f3ee); font: 600 1rem var(--z-sans, sans-serif); color-scheme: dark; max-width: 11rem; }
.dia-titulo { margin: 10px 0 0; font-size: 1.2rem; }
.zona-titulo { margin: 10px 0 0; color: var(--tu-verde); font-size: 1.05rem; }

/* Planilla */
.planilla details { border: 1px solid var(--z-borde, rgba(255,255,255,.12)); border-radius: 20px; padding: 4px 18px; background: rgba(255,255,255,.03); }
.planilla summary { min-height: 52px; display: flex; align-items: center; cursor: pointer; font-weight: 650; }
.planilla ul { padding-left: 1.2em; color: var(--z-texto-2, #d4d0c8); }
.planilla li { margin: 6px 0; }
.chico { font-size: var(--z-t-chico, .875rem); color: var(--z-texto-3, #aaa69e); }

/* Emergencias */
.emergencia { margin: 28px 0; padding: 20px; border-radius: 24px; border: 2px solid rgba(248, 165, 155, .55); background: rgba(248, 165, 155, .07); }
.emergencia .subtitulo { margin-top: 0; }
.emergencia p { margin: 4px 0 12px; }
.emergencia-botones { display: grid; gap: 12px; }
@media (min-width: 600px) { .emergencia-botones { grid-template-columns: 1fr 1fr; } }
.btn-emergencia { border-color: rgba(248, 165, 155, .8) !important; color: #ffd2cc !important; font-weight: 700; min-height: 58px; }

/* Aviso legal */
.aviso { margin-top: 12px; }
.aviso p { margin: 0 0 10px; }
.aviso-botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.aviso-botones .z-btn { min-height: 52px; }

/* Círculo de instalar (instalar.js), arriba del "A+" de legal.js */
#tu-instalar { position: fixed; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 30; display: flex; align-items: center; gap: 10px; }
#tu-instalar[hidden] { display: none; }
#tu-instalar .txt { padding: 8px 14px; border-radius: 999px; background: #141414; border: 1px solid rgba(110, 231, 183, .6); color: #f5f3ee; font-weight: 700; font-size: 1rem; box-shadow: 0 10px 30px -10px rgba(0,0,0,.9); white-space: nowrap; cursor: pointer; font-family: inherit; min-height: 44px; }
#tu-instalar .circ { position: relative; width: 64px; height: 64px; border-radius: 50%; border: 2px solid #6ee7b7; padding: 0; cursor: pointer; background: #09090a; box-shadow: 0 14px 34px -10px rgba(52, 211, 153, .6), 0 0 0 4px rgba(9,9,10,.6); }
#tu-instalar .circ img { width: 100%; height: 100%; border-radius: 50%; display: block; }
#tu-instalar .so { position: absolute; right: -4px; bottom: -4px; width: 28px; height: 28px; border-radius: 50%; background: #f5f3ee; border: 2px solid #09090a; display: grid; place-items: center; }
#tu-instalar .so svg { width: 16px; height: 16px; fill: #09090a; }
#tu-instalar .cerrar { position: absolute; top: -20px; right: -16px; width: 48px; height: 48px; border: 0; background: transparent; padding: 0; cursor: pointer; display: grid; place-items: center; }
#tu-instalar .cerrar span { width: 26px; height: 26px; border-radius: 50%; background: #2a2a2c; border: 1px solid rgba(255,255,255,.35); color: #fff; font: 700 16px/24px system-ui, sans-serif; text-align: center; }
#tu-instalar .caja { position: relative; }
#tu-instalar.sin-texto .txt { display: none; }
.guia-iphone { position: fixed; inset: auto 12px calc(16px + env(safe-area-inset-bottom, 0px)) 12px; z-index: 40; max-width: 520px; margin: 0 auto; padding: 22px 20px; border-radius: 24px; background: #151516; border: 2px solid rgba(110, 231, 183, .55); box-shadow: 0 30px 60px -20px #000; }
.guia-iphone[hidden] { display: none; }
.guia-iphone h2 { margin: 0 0 8px; font-size: 1.3rem; }
.guia-iphone ol { margin: 0 0 14px; padding-left: 1.3em; }
.guia-iphone li { margin: 8px 0; }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

/* Páginas de texto (fuentes, términos, 404) */
.pagina { padding-top: 24px; padding-bottom: 48px; max-width: 760px; }
.pagina h1 { margin: 2px 0 14px; font-size: clamp(2rem, 6.5vw, 2.8rem); line-height: 1.08; letter-spacing: -0.035em; font-weight: 650; }
.pagina h1 em { font-family: var(--z-serif, Georgia, serif); font-style: italic; font-weight: 400; color: var(--tu-verde); }
.pagina h2 { margin: 30px 0 8px; font-size: var(--z-t-h3, 1.33rem); line-height: 1.2; letter-spacing: -0.02em; }
.pagina ul { padding-left: 1.2em; }
.pagina li { margin: 8px 0; }
.pagina code { font-size: .95em; color: var(--tu-verde); }
.z-aviso-legal.aviso { padding: 18px 20px; border-radius: 20px; }