/* emergencias-empresa-2026-10-24: páginas públicas y formulario de la red de emergencias.
   Colores de la landing v2. Contrastes (sobre #16213D, el fondo de la tarjeta):
   texto #F3EEE3 13,8:1 · ayuda #B7BED2 8,6:1 · error #FF8A8A 7,0:1 · enlaces #21E6C1 10,0:1 ·
   borde de los campos #8592AE 5,1:1 (mínimo 3:1) · botón: texto #0E1626 sobre #21E6C1 11,3:1.
   Las reglas del formulario van bajo .em-form para que sirvan igual dentro de la landing. */
:root {
  --em-fondo: #0E1626;
  --em-tarjeta: #16213D;
  --em-campo: #101A2E;
  --em-texto: #F3EEE3;
  --em-suave: #B7BED2;
  --em-cian: #21E6C1;
  --em-verde: #7ED957;
  --em-error: #FF8A8A;
  --em-borde: #8592AE;
  --em-linea: rgba(33, 230, 193, .25);
}

/* ---------- página ---------- */
.em-pagina { margin: 0; background: var(--em-fondo); color: var(--em-texto);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem; line-height: 1.6; overflow-x: hidden; }
.em-pagina *, .em-pagina *::before, .em-pagina *::after { box-sizing: border-box; }
.em-pagina h1, .em-pagina h2 { font-family: "Fraunces", Georgia, serif; font-weight: 600; line-height: 1.2; }
.em-pagina h1 { font-size: clamp(1.6rem, 5vw, 2.2rem); margin: 0 0 .6rem; }
.em-pagina h2 { font-size: 1.2rem; margin: 1.6rem 0 .4rem; }
.em-pagina a { color: var(--em-cian); }
.em-pagina a:hover { color: var(--em-verde); }
.em-envoltura { max-width: 760px; margin: 0 auto; padding: 0 16px; }
.em-saltar { position: absolute; left: -9999px; }
.em-saltar:focus { left: 8px; top: 8px; z-index: 10; background: var(--em-cian); color: var(--em-fondo);
  padding: 10px 14px; border-radius: 8px; min-height: 44px; display: inline-flex; align-items: center; }
.em-arriba { border-bottom: 1px solid var(--em-linea); }
.em-arriba .em-envoltura { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 64px; flex-wrap: wrap; }
.em-marca { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--em-texto) !important;
  text-decoration: none; font-family: "Fraunces", Georgia, serif; font-size: 1.3rem; font-weight: 600; }
.em-chip { font-size: .8rem; font-weight: 700; color: var(--em-cian); border: 1px solid var(--em-linea);
  border-radius: 999px; padding: 4px 12px; }
.em-principal { padding-top: 28px; padding-bottom: 56px; }
.em-volanta { margin: 0 0 .4rem; color: var(--em-cian); font-weight: 700; font-size: .85rem; letter-spacing: .04em;
  text-transform: uppercase; }
.em-bajada { color: var(--em-suave); margin: 0 0 1.4rem; }
.em-tarjeta { background: var(--em-tarjeta); border: 1px solid var(--em-linea); border-radius: 20px;
  padding: clamp(16px, 4vw, 28px); }
.em-texto p { margin: 0 0 .8rem; }
.em-listo { text-align: center; }
.em-pie { border-top: 1px solid var(--em-linea); color: var(--em-suave); font-size: .9rem; padding: 20px 0; }
.em-pie a { display: inline-block; min-height: 44px; line-height: 44px; }

/* ---------- formulario (también en la landing) ---------- */
.em-form { color: var(--em-texto); }
.em-form .em-grupo { border: 0; margin: 0 0 1.4rem; padding: 0; min-width: 0; }
.em-form legend { font-family: "Fraunces", Georgia, serif; font-size: 1.15rem; font-weight: 600; padding: 0;
  margin: 0 0 .4rem; color: var(--em-texto); }
.em-form .em-campo { margin: 0 0 1rem; min-width: 0; }
.em-form label { display: block; font-weight: 600; margin: 0 0 6px; color: var(--em-texto); }
.em-form .em-opcional { font-weight: 400; color: var(--em-suave); font-size: .9em; }
.em-form .em-ayuda { color: var(--em-suave); font-size: .9rem; margin: 0 0 6px; }
.em-form input[type=text], .em-form input[type=tel], .em-form input[type=email], .em-form input[type=time],
.em-form select { display: block; width: 100%; min-height: 48px; padding: 10px 14px; font: inherit; font-size: 1rem;
  color: var(--em-texto); background: var(--em-campo); border: 1px solid var(--em-borde); border-radius: 12px;
  color-scheme: dark; }
.em-form select { appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--em-cian) 50%),
                    linear-gradient(135deg, var(--em-cian) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat; }
.em-form select option { background: var(--em-tarjeta); color: var(--em-texto); }
.em-form input::placeholder { color: var(--em-suave); opacity: .8; }
.em-form input:focus-visible, .em-form select:focus-visible, .em-form button:focus-visible, .em-form a:focus-visible,
.em-pagina a:focus-visible, .em-form .em-aviso:focus-visible {
  outline: 3px solid var(--em-cian); outline-offset: 2px; }
.em-form .em-campo--error input, .em-form .em-campo--error select { border-color: var(--em-error); border-width: 2px; }
.em-form .em-error { color: var(--em-error); font-size: .92rem; font-weight: 600; margin: 6px 0 0; }
.em-form .em-error::before { content: "⚠ "; }
.em-form .em-aviso { border-radius: 14px; padding: 12px 16px; margin: 0 0 1.2rem; font-weight: 600; }
.em-form .em-aviso--error { color: var(--em-error); background: rgba(255, 138, 138, .10);
  border: 1px solid var(--em-error); }

/* una columna en el celular, dos en pantallas anchas */
.em-form .em-fila { display: grid; grid-template-columns: 1fr; gap: 0 16px; }
@media (min-width: 640px) { .em-form .em-fila { grid-template-columns: 1fr 1fr; } }

/* casillas y opciones: toda la fila es el toque (44 px como mínimo) */
.em-form .em-opciones { display: grid; gap: 8px; margin: 0 0 .6rem; }
.em-form .em-opcion { display: flex; align-items: center; gap: 12px; min-height: 48px; margin: 0; padding: 8px 14px;
  font-weight: 600; border: 1px solid var(--em-borde); border-radius: 12px; background: var(--em-campo); cursor: pointer; }
.em-form .em-opcion input { width: 22px; height: 22px; margin: 0; flex: 0 0 auto; accent-color: var(--em-cian); }
.em-form .em-opcion:has(input:checked) { border-color: var(--em-cian); }
.em-form .em-opcion:has(input:focus-visible) { outline: 3px solid var(--em-cian); outline-offset: 2px; }
.em-form .em-acepto .em-ayuda a { display: inline-block; min-height: 44px; line-height: 44px; }
.em-form .em-franja { margin: 0 0 .4rem; }
/* si eligió 24 h, la franja no hace falta (sin :has se ve siempre y el servidor la ignora) */
.em-form:has(#horario-24h:checked) .em-franja { display: none; }

/* trampa para robots: fuera de la pantalla, no la ven ni los lectores */
.em-form .em-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* botones */
.em-boton { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; min-width: 44px;
  padding: 12px 28px; border: 0; border-radius: 999px; font: inherit; font-weight: 700; font-size: 1.05rem;
  color: var(--em-fondo) !important; background: var(--em-cian); cursor: pointer; text-decoration: none; }
.em-boton:hover { background: var(--em-verde); }
.em-boton--sec { background: transparent; color: var(--em-cian) !important; border: 1px solid var(--em-cian); }
.em-boton--sec:hover { background: rgba(33, 230, 193, .10); }
.em-form .em-boton { width: 100%; margin: .4rem 0 .6rem; }
@media (min-width: 640px) { .em-form .em-boton { width: auto; } }
@media (prefers-reduced-motion: reduce) { .em-pagina * { transition: none !important; } }

/* ---------- panel Empresa -> Emergencias (solo admin) ----------
   Usa los colores y letras de empresa_v2.css (--void, --panel, --blanco, --celeste-texto, --cian, --grad).
   Contrastes sobre #16213D: texto #F3EEE3 13,8:1 · tenue #B7BED2 8,6:1 · error #FF8A8A 7,0:1 · aviso #E9C46A 9,1:1.
   Botones, pestañas, casillas y links sueltos: 44 px o más. */
.emp { --emp-borde: rgba(243, 238, 227, .14); }
.emp-cab { margin-bottom: 1rem; }
.emp-titulo { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.4rem); margin: 0; overflow-wrap: anywhere; }
.emp-bajada { color: var(--celeste-texto); margin: .45rem 0 0; max-width: 72ch; font-size: 1.02rem; overflow-wrap: anywhere; }
.emp-h2 { font-size: 1.3rem; margin: 0 0 .9rem; }
.emp-tenue { color: var(--celeste-texto); }
.emp-ayuda { display: block; color: var(--celeste-texto); font-size: .95rem; margin: .2rem 0 .6rem; }
.emp-volver { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; font-weight: 600; }
.emp-enlace { display: inline-flex; align-items: center; min-height: 44px; }
.emp .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding-left: 1rem; padding-right: 1rem; }
.emp .form-control, .emp .form-select { min-height: 48px; font-size: 1rem; color: var(--blanco); border-color: #8592AE; }
.emp textarea.form-control { min-height: 6rem; }
.emp .form-label { font-size: .95rem; font-weight: 600; color: var(--blanco); margin-bottom: .3rem; }
.emp-card { background: linear-gradient(180deg, rgba(22, 33, 61, .92), rgba(19, 28, 51, .92));
  border: 1px solid var(--emp-borde); border-radius: var(--r, 20px); padding: clamp(1rem, 2vw, 1.4rem); margin-bottom: 1rem; }

/* pestañas */
.emp-pestanas { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0 0 1.2rem; }
.emp-pestanas a { display: inline-flex; align-items: center; min-height: 44px; padding: .5rem 1rem; border-radius: 999px;
  border: 1px solid var(--emp-borde); background: rgba(22, 33, 61, .7); color: var(--blanco); text-decoration: none; font-weight: 600; }
.emp-pestanas a:hover { border-color: var(--cian); color: var(--blanco); }
.emp-pestanas a[aria-current="page"] { background: var(--grad); color: var(--void); border-color: transparent; }

/* estados y avisos */
.emp-chip { display: inline-flex; align-items: center; padding: .15rem .65rem; border-radius: 999px; font-size: .86rem;
  font-weight: 700; border: 1px solid; white-space: nowrap; vertical-align: middle; }
.emp-chip--pendiente { color: #E9C46A; border-color: rgba(233, 196, 106, .55); background: rgba(233, 196, 106, .1); }
.emp-chip--aprobado { color: #7ED957; border-color: rgba(126, 217, 87, .55); background: rgba(126, 217, 87, .1); }
.emp-chip--rechazado { color: #FF8A8A; border-color: rgba(255, 138, 138, .55); background: rgba(255, 138, 138, .1); }
.emp-chip--baja { color: var(--celeste-texto); border-color: rgba(183, 190, 210, .4); background: rgba(183, 190, 210, .08); }
.emp-aviso { display: block; color: #E9C46A; font-weight: 600; }
.emp-aviso-bloque { background: rgba(233, 196, 106, .08); border: 1px solid rgba(233, 196, 106, .45); border-radius: var(--r-sm, 12px);
  padding: .8rem 1rem; margin: 0 0 .8rem; overflow-wrap: anywhere; }
.emp-aviso-bloque .bi { color: #E9C46A; margin-right: .3rem; }
.emp-aviso-bloque a { display: inline-flex; align-items: center; min-height: 44px; margin-right: 1rem; font-weight: 700; }

/* tabla: en el celular cada fila es una tarjeta con su etiqueta */
.emp-tabla { --bs-table-bg: transparent; }
.emp-tabla th, .emp-tabla td { font-size: 1rem; vertical-align: middle; }
.emp-tabla tbody th { font-weight: 700; overflow-wrap: anywhere; min-width: 9rem; }
.emp-nombre { display: inline-flex; align-items: center; min-height: 44px; color: var(--blanco); }
.emp-nombre:hover { color: var(--cian); }
.emp-card:has(> .emp-tabla) { overflow-x: auto; }
@media (max-width: 760px) {
  .emp-tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .emp-tabla, .emp-tabla tbody, .emp-tabla tr, .emp-tabla th, .emp-tabla td { display: block; width: 100%; }
  .emp-tabla tr { border: 1px solid var(--emp-borde); border-radius: var(--r-sm, 12px); margin: 0 0 .7rem; padding: .4rem .2rem; }
  .emp-tabla tbody th, .emp-tabla tbody td { border: 0 !important; padding: .3rem .7rem !important; display: flex;
    justify-content: space-between; gap: 1rem; text-align: right; }
  .emp-tabla [data-label]::before { content: attr(data-label); color: var(--celeste-texto); font-weight: 600; text-align: left; }
  .emp-tabla tbody th[data-label]::before { display: none; }
  .emp-tabla tbody th { text-align: left; font-size: 1.08rem; justify-content: flex-start; flex-wrap: wrap; align-items: center; }
  .emp-card:has(> .emp-tabla) { padding: .6rem; }
}

/* ficha */
.emp-grupo { border: 0; padding: 0; margin: 0 0 1.2rem; min-width: 0; }
.emp-grupo legend { float: none; font-size: 1.05rem; font-weight: 700; margin: 0 0 .6rem; color: var(--blanco); }
.emp-campo { margin-bottom: .9rem; min-width: 0; }
.emp-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 1rem; }
.emp-opciones { display: flex; flex-wrap: wrap; gap: .2rem 1.4rem; }
.emp-check { display: flex; align-items: center; gap: .6rem; min-height: 44px; margin: 0; cursor: pointer; font-size: 1rem; }
.emp-check .form-check-input { width: 1.5rem; height: 1.5rem; margin: 0; float: none; flex: 0 0 auto; cursor: pointer; border-color: #8592AE; }
.emp-renovar { margin: .2rem 0 .8rem; font-weight: 600; }
.emp-error { color: #FF8A8A; font-weight: 600; margin: .35rem 0 0; }
.emp-campo--error .form-control, .emp-campo--error .form-select { border-color: #FF8A8A; }
.emp-botonera { display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; margin: .4rem 0 .8rem; }
.emp-botonera form { margin: 0; }
.emp-rechazar { margin-top: .4rem; }
.emp-rechazar > summary { list-style: none; }
.emp-rechazar > summary::-webkit-details-marker { display: none; }
.emp-rechazar form { margin-top: .8rem; padding: .9rem; border: 1px solid var(--emp-borde); border-radius: var(--r-sm, 12px); }
.emp-contacto { display: flex; gap: .6rem; flex-wrap: wrap; margin: 0; }
.emp-historial { list-style: none; margin: 0; padding: 0; }
.emp-historial li { padding: .55rem 0; border-bottom: 1px solid var(--emp-borde); overflow-wrap: anywhere; }
.emp-historial li:last-child { border-bottom: 0; }

/* ---------- confirmar los datos (tarea 3, público) ---------- */
.em-h2 { font-family: "Fraunces", Georgia, serif; font-size: 1.25rem; margin: 0 0 .8rem; color: var(--em-texto); }
.em-tarjeta + .em-tarjeta { margin-top: 1.2rem; }
.em-datos { margin: 0 0 1.2rem; display: grid; gap: .6rem; }
.em-datos > div { display: grid; grid-template-columns: 1fr; gap: 2px; border-bottom: 1px solid var(--em-linea); padding: 0 0 .5rem; }
@media (min-width: 640px) { .em-datos > div { grid-template-columns: 14rem 1fr; } }
.em-datos dt { color: var(--em-suave); font-weight: 600; }
.em-datos dd { margin: 0; color: var(--em-texto); overflow-wrap: anywhere; }
.em-izq { text-align: left; margin: 1rem 0; }
.em-form textarea { display: block; width: 100%; min-height: 7rem; padding: 10px 14px; font: inherit; font-size: 1rem;
  color: var(--em-texto); background: var(--em-campo); border: 1px solid var(--em-borde); border-radius: 12px;
  color-scheme: dark; resize: vertical; }
.em-form textarea:focus-visible { outline: 3px solid var(--em-cian); outline-offset: 2px; }
.em-form .em-campo--error textarea { border-color: var(--em-error); border-width: 2px; }
.em-listo a:not(.em-boton) { display: inline-block; min-height: 44px; line-height: 44px; color: var(--em-cian); }

/* ---------- panel: enlace para confirmar (tarea 3) ---------- */
.emp-enlace-nuevo { border-color: rgba(126, 217, 87, .55); }
.emp-enlace-nuevo h2:focus { outline: none; }
.emp-enlace-nuevo input[readonly] { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .95rem; }
.emp-mensaje > summary { list-style: none; }
.emp-mensaje > summary::-webkit-details-marker { display: none; }
.emp-mensaje p { margin-top: .6rem; overflow-wrap: anywhere; }