@charset "UTF-8";
/* =========================================================================
CONVENCIÓN — Hoja de estilos única (design system)
Mobile-first · Sin dependencias externas · Fuentes del sistema
Puntos de quiebre: 640px y 1024px
ÍNDICE: 01 Tokens · 02 Reset · 03 Tipografía · 04 Layout · 05 Cabecera y pie
06 Tarjetas · 07 Botones · 08 Formularios · 09 Alertas · 10 Insignias
11 Tablas · 12 Pasos · 13 Datos y copiar · 14 Admin · 15 Filtros y métricas
16 Alojamiento · 17 Diálogo · 18 Repetidor y vista previa · 19 Utilidades
20 Accesibilidad · 21 Puntos de quiebre · 22 Impresión
23 Tabla de asistentes (al final del archivo)
========================================================================= */
/* ---------- 01. TOKENS --------------------------------------------------- */
:root {
--c-fondo: #f6f7f9;
--c-superficie: #ffffff;
--c-borde: #dfe3e8;
/* Borde exclusivo de los controles de formulario: WCAG 1.4.11 pide 3:1 para el
limite visual de un control. #8a94a1 da 3,07:1 sobre blanco; --c-borde da 1,29:1
y sirve solo para separadores decorativos. */
--c-borde-campo: #8a94a1;
--c-texto: #1c2430;
--c-texto-suave: #5b6673;
--c-primario: #1d4e89;
--c-primario-oscuro: #163c69;
--c-primario-suave: #e8f0f9;
--c-ok: #1d7a4c;
--c-ok-suave: #e6f4ec;
--c-error: #b3261e;
--c-error-suave: #fdeceb;
--c-aviso: #9a6700;
--c-aviso-suave: #fdf6e3;
--r-sm: 6px;
--r-md: 10px;
--r-lg: 16px;
--sombra-1: 0 1px 2px rgba(28,36,48,.06), 0 1px 3px rgba(28,36,48,.08);
--sombra-2: 0 4px 14px rgba(28,36,48,.10), 0 2px 4px rgba(28,36,48,.06);
--e-1: 4px;
--e-2: 8px;
--e-3: 12px;
--e-4: 16px;
--e-5: 24px;
--e-6: 32px;
--e-7: 48px;
/* Apoyo (no forman parte del contrato, pero se usan en este archivo) */
--fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
--fuente-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
--ancho-max: 960px;
--ancho-nav: 232px;
--alto-tactil: 44px;
--borde-ok: #bfe2cf;
--borde-error: #f2c7c4;
--borde-aviso: #ecdcae;
--borde-primario: #c8dcf0;
--texto-ok-fuerte: #145c39;
--texto-error-fuerte: #8f1e18;
--texto-aviso-fuerte: #7a5200;
}
/* ---------- 02. RESET ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* El [hidden]{display:none} del navegador tiene especificidad 0-1-0 y cualquier
clase con display propio (.alerta, .btn, .cama, .repetidor-acciones) le gana.
Sin esta linea el aviso de "maximo de asistentes" se ve siempre y el filtro
de camas no oculta nada. */
[hidden] { display: none !important; }
html { font-size: 17px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0; min-height: 100vh;
font-family: var(--fuente); font-size: 1rem; line-height: 1.55;
color: var(--c-texto); background: var(--c-fondo);
-webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; }
hr { border: 0; border-top: 1px solid var(--c-borde); margin: var(--e-5) 0; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
/* ---------- 03. TIPOGRAFÍA ----------------------------------------------- */
h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--e-3); font-weight: 600; line-height: 1.25; color: var(--c-texto); }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.12rem; }
h4 { font-size: 1rem; }
p { margin: 0 0 var(--e-4); }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 var(--e-4); padding-left: var(--e-5); }
small { font-size: .85rem; }
strong, b { font-weight: 600; }
a { color: var(--c-primario); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--c-primario-oscuro); }
code, kbd, samp { font-family: var(--fuente-mono); font-size: .92em; }
/* ---------- 04. LAYOUT --------------------------------------------------- */
.contenedor { width: 100%; max-width: var(--ancho-max); margin: 0 auto; padding: var(--e-4); }
.pagina { display: flex; flex-direction: column; min-height: 100vh; }
.pagina > main { flex: 1 0 auto; }
.seccion { margin-bottom: var(--e-5); }
/* ---------- 05. CABECERA Y PIE PÚBLICOS ---------------------------------- */
.cabecera { background: var(--c-primario); color: #fff; box-shadow: var(--sombra-1); }
.cabecera-interior {
max-width: var(--ancho-max); margin: 0 auto; padding: var(--e-4);
display: flex; flex-direction: column; gap: var(--e-2);
}
.cabecera-titulo { margin: 0; font-size: 1.2rem; font-weight: 600; color: #fff; }
.cabecera-titulo a { color: #fff; text-decoration: none; }
.cabecera-sub { margin: 0; font-size: .9rem; color: rgba(255,255,255,.88); }
.cabecera-nav { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-1); }
.cabecera-nav a {
color: #fff; text-decoration: none; font-size: .95rem;
padding: var(--e-2) 0; border-bottom: 2px solid transparent;
min-height: var(--alto-tactil); display: inline-flex; align-items: center;
}
.cabecera-nav a:hover { border-bottom-color: rgba(255,255,255,.6); }
.cabecera-nav a.activo { border-bottom-color: #fff; font-weight: 600; }
.pie {
margin-top: var(--e-6); background: var(--c-superficie);
border-top: 1px solid var(--c-borde); color: var(--c-texto-suave); font-size: .9rem;
}
.pie-interior {
max-width: var(--ancho-max); margin: 0 auto; padding: var(--e-5) var(--e-4);
display: flex; flex-direction: column; gap: var(--e-2);
}
.pie a { color: var(--c-primario); }
/* ---------- 06. TARJETAS ------------------------------------------------- */
.tarjeta {
background: var(--c-superficie); border: 1px solid var(--c-borde);
border-radius: var(--r-md); box-shadow: var(--sombra-1);
margin-bottom: var(--e-4); overflow: hidden;
}
.tarjeta-cab {
padding: var(--e-4); border-bottom: 1px solid var(--c-borde); background: #fbfcfd;
display: flex; flex-wrap: wrap; gap: var(--e-3);
align-items: center; justify-content: space-between;
}
.tarjeta-cab h1, .tarjeta-cab h2, .tarjeta-cab h3 { margin: 0; }
.tarjeta-cuerpo { padding: var(--e-4); }
.tarjeta-cuerpo > :last-child { margin-bottom: 0; }
.tarjeta-destacada { border-color: var(--c-primario); border-width: 2px; }
/* ---------- 07. BOTONES -------------------------------------------------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
min-height: var(--alto-tactil); padding: var(--e-3) var(--e-5);
font-family: inherit; font-size: 1rem; font-weight: 600; line-height: 1.2;
text-align: center; text-decoration: none;
color: var(--c-texto); background: var(--c-superficie);
border: 1px solid var(--c-borde); border-radius: var(--r-sm); cursor: pointer;
transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { background: #f0f2f5; }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn.btn-desactivado { opacity: .55; cursor: not-allowed; pointer-events: none; }
.btn-primario { color: #fff; background: var(--c-primario); border-color: var(--c-primario); }
.btn-primario:hover { color: #fff; background: var(--c-primario-oscuro); border-color: var(--c-primario-oscuro); }
.btn-secundario { color: var(--c-primario); background: var(--c-primario-suave); border-color: var(--borde-primario); }
.btn-secundario:hover { background: #dbe8f6; color: var(--c-primario-oscuro); }
.btn-peligro { color: #fff; background: var(--c-error); border-color: var(--c-error); }
.btn-peligro:hover { color: #fff; background: var(--texto-error-fuerte); border-color: var(--texto-error-fuerte); }
.btn-sm { min-height: 40px; padding: var(--e-2) var(--e-3); font-size: .92rem; }
.btn-bloque { display: flex; width: 100%; }
.btn-enlace {
background: none; border-color: transparent; color: var(--c-primario);
text-decoration: underline; padding-left: var(--e-2); padding-right: var(--e-2);
}
.btn-enlace:hover { background: var(--c-primario-suave); }
/* ---------- 08. FORMULARIOS ---------------------------------------------- */
.campo { margin-bottom: var(--e-4); }
.campo-label { display: block; margin-bottom: var(--e-2); font-weight: 600; font-size: .95rem; color: var(--c-texto); }
.campo-obligatorio { color: var(--c-error); margin-left: 2px; }
.campo-input, .campo-select, .campo-textarea {
display: block; width: 100%; min-height: var(--alto-tactil); padding: var(--e-3);
font-family: inherit; font-size: 16px; /* evita el zoom de iOS */ line-height: 1.4;
color: var(--c-texto); background: var(--c-superficie);
border: 1px solid var(--c-borde-campo); border-radius: var(--r-sm); appearance: none;
}
.campo-textarea { min-height: 110px; resize: vertical; }
.campo-select {
padding-right: var(--e-6);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%235b6673' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4Z'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right var(--e-3) center; background-size: 12px 8px;
}
.campo-input:hover, .campo-select:hover, .campo-textarea:hover { border-color: #c3cad3; }
.campo-input::placeholder, .campo-textarea::placeholder { color: var(--c-texto-suave); }
.campo-input:disabled, .campo-select:disabled, .campo-textarea:disabled {
background: #f1f3f6; color: var(--c-texto-suave); cursor: not-allowed;
}
.campo-ayuda { display: block; margin-top: var(--e-2); font-size: .87rem; color: var(--c-texto-suave); }
.campo-error { display: block; margin-top: var(--e-2); font-size: .95rem; font-weight: 600; color: var(--c-error); }
.campo-con-error .campo-input,
.campo-con-error .campo-select,
.campo-con-error .campo-textarea { border-color: var(--c-error); background: var(--c-error-suave); }
.campo-check {
display: flex; align-items: flex-start; gap: var(--e-3);
min-height: var(--alto-tactil); padding: var(--e-2) 0; font-size: .97rem; cursor: pointer;
}
.campo-check input[type="checkbox"], .campo-check input[type="radio"] {
width: 22px; height: 22px; margin: 2px 0 0; flex: 0 0 auto;
accent-color: var(--c-primario); cursor: pointer;
}
.campo-check span { display: block; }
.campo-fila { display: grid; grid-template-columns: 1fr; gap: 0 var(--e-4); }
.campo-grupo {
border: 1px solid var(--c-borde); border-radius: var(--r-md);
padding: var(--e-4); margin: 0 0 var(--e-4); background: var(--c-superficie);
}
.campo-grupo > legend { padding: 0 var(--e-2); font-weight: 600; font-size: 1rem; }
/* ---------- 09. ALERTAS -------------------------------------------------- */
.alerta {
display: flex; gap: var(--e-3); padding: var(--e-3) var(--e-4); margin-bottom: var(--e-4);
border: 1px solid var(--c-borde); border-left-width: 4px; border-radius: var(--r-sm);
background: var(--c-superficie); font-size: .97rem;
}
.alerta > :last-child { margin-bottom: 0; }
.alerta-ok { background: var(--c-ok-suave); border-color: var(--borde-ok); border-left-color: var(--c-ok); color: var(--texto-ok-fuerte); }
.alerta-error { background: var(--c-error-suave); border-color: var(--borde-error); border-left-color: var(--c-error); color: var(--texto-error-fuerte); }
.alerta-aviso { background: var(--c-aviso-suave); border-color: var(--borde-aviso); border-left-color: var(--c-aviso); color: var(--texto-aviso-fuerte); }
.alerta-info { background: var(--c-primario-suave); border-color: var(--borde-primario); border-left-color: var(--c-primario); color: var(--c-primario-oscuro); }
/* ---------- 10. INSIGNIAS DE ESTADO -------------------------------------- */
.insignia {
display: inline-block; padding: 3px var(--e-3); border: 1px solid transparent;
border-radius: 999px; font-size: .88rem; font-weight: 600; line-height: 1.5;
white-space: nowrap; background: #eceff3; color: var(--c-texto-suave);
}
.insignia-pendiente { background: var(--c-aviso-suave); border-color: var(--borde-aviso); color: var(--texto-aviso-fuerte); }
.insignia-revision { background: var(--c-primario-suave); border-color: var(--borde-primario); color: var(--c-primario-oscuro); }
.insignia-confirmada { background: var(--c-ok-suave); border-color: var(--borde-ok); color: var(--texto-ok-fuerte); }
.insignia-rechazada { background: var(--c-error-suave); border-color: var(--borde-error); color: var(--texto-error-fuerte); }
.insignia-anulada { background: #eceff3; border-color: var(--c-borde); color: var(--c-texto-suave); text-decoration: line-through; }
/* ---------- 11. TABLAS --------------------------------------------------- */
.tabla-envoltura {
width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
border: 1px solid var(--c-borde); border-radius: var(--r-md); background: var(--c-superficie);
}
.tabla { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabla caption { text-align: left; padding: var(--e-3) var(--e-4); color: var(--c-texto-suave); font-size: .9rem; }
.tabla th, .tabla td {
padding: var(--e-3) var(--e-4); text-align: left; vertical-align: middle;
border-bottom: 1px solid var(--c-borde); white-space: nowrap;
}
.tabla th {
font-weight: 600; font-size: .95rem; text-transform: uppercase; letter-spacing: .02em;
color: var(--c-texto-suave); background: #fbfcfd;
}
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover { background: #fafbfc; }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla .envolver { white-space: normal; min-width: 200px; }
.tabla-vacia { padding: var(--e-6) var(--e-4); text-align: center; color: var(--c-texto-suave); background: var(--c-superficie); }
/* Aviso de desplazamiento: se escribe en el HTML junto a la tabla y solo se ve
en pantallas angostas, que es donde la tabla puede no caber entera. */
.tabla-aviso-desliza { display: none; }
@media (max-width: 640px) {
/* Sin esto ninguna celda parte linea y la tabla se esconde tras el overflow:
en el telefono el inscrito no alcanzaba a ver la columna Monto de su desglose. */
.tabla th, .tabla td { white-space: normal; padding: var(--e-3) var(--e-2); }
.tabla .num, .tabla .texto-mono { white-space: nowrap; }
.tabla .envolver { min-width: 0; }
.tabla-aviso-desliza {
display: block; margin: 0 0 var(--e-2);
font-size: .9rem; color: var(--c-texto-suave);
}
}
/* ---------- 12. INDICADOR DE PASOS --------------------------------------- */
.pasos { display: flex; list-style: none; margin: 0 0 var(--e-5); padding: 0; }
.paso { flex: 1 1 0; position: relative; text-align: center; padding-top: 38px; font-size: .82rem; color: var(--c-texto-suave); }
.paso-numero {
position: absolute; top: 0; left: 50%; transform: translateX(-50%);
width: 30px; height: 30px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-weight: 600; font-size: .9rem; background: var(--c-superficie);
border: 2px solid var(--c-borde); color: var(--c-texto-suave); z-index: 1;
}
.paso::before, .paso::after { content: ""; position: absolute; top: 14px; width: 50%; height: 2px; background: var(--c-borde); }
.paso::before { left: 0; }
.paso::after { left: 50%; }
.paso:first-child::before, .paso:last-child::after { display: none; }
.paso-activo { color: var(--c-primario-oscuro); font-weight: 600; }
.paso-activo .paso-numero { border-color: var(--c-primario); background: var(--c-primario); color: #fff; }
.paso-completo { color: var(--c-ok); }
.paso-completo .paso-numero { border-color: var(--c-ok); background: var(--c-ok); color: #fff; }
.paso-completo::before, .paso-completo::after, .paso-activo::before { background: var(--c-ok); }
/* Etiqueta de texto del paso: en pantallas angostas se parte en dos líneas sin desbordar. */
.paso-texto { display: inline-block; max-width: 100%; padding: 0 4px; line-height: 1.25; overflow-wrap: anywhere; }
/* ---------- 13. LISTA DE DATOS Y BOTÓN COPIAR ---------------------------- */
.datos-lista {
margin: 0; border: 1px solid var(--c-borde); border-radius: var(--r-md);
overflow: hidden; background: var(--c-superficie);
}
.datos-fila {
display: flex; flex-direction: column; gap: var(--e-1);
padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--c-borde);
}
.datos-fila:last-child { border-bottom: 0; }
/* margin:0 explícito porque estas filas suelen ser / dentro de un
y el navegador les mete margen propio. */
.datos-clave {
margin: 0; font-size: .9rem; font-weight: 600; text-transform: uppercase;
letter-spacing: .02em; color: var(--c-texto-suave);
}
.datos-valor {
margin: 0; font-size: 1.05rem; word-break: break-word;
display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap;
}
.datos-valor-destacado { font-size: 1.35rem; font-weight: 600; color: var(--c-primario-oscuro); font-variant-numeric: tabular-nums; }
.copiar {
display: inline-flex; align-items: center; gap: var(--e-1);
min-height: var(--alto-tactil); padding: var(--e-1) var(--e-3);
font-family: inherit; font-size: .84rem; font-weight: 600;
color: var(--c-primario); background: var(--c-primario-suave);
border: 1px solid var(--borde-primario); border-radius: var(--r-sm); cursor: pointer;
}
.copiar:hover { background: #dbe8f6; }
.copiar.copiado { color: var(--texto-ok-fuerte); background: var(--c-ok-suave); border-color: var(--borde-ok); }
/* Aclaración bajo un dato (instrucciones de transferencia, enlace de estado). */
.datos-ayuda {
display: block; flex-basis: 100%; margin-top: var(--e-1);
font-size: .84rem; line-height: 1.5; color: var(--c-texto-suave);
}
/* ---------- 14. ADMIN: BARRA, NAVEGACIÓN Y CONTENIDO --------------------- */
.admin-barra {
position: sticky; top: 0; z-index: 20;
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: var(--e-3); padding: var(--e-3) var(--e-4);
background: var(--c-primario-oscuro); color: #fff; box-shadow: var(--sombra-1);
}
.admin-barra-marca { font-weight: 600; font-size: 1rem; color: #fff; text-decoration: none; }
.admin-barra-marca span { display: block; font-size: .78rem; font-weight: 400; color: rgba(255,255,255,.8); }
.admin-barra-derecha { display: flex; align-items: center; gap: var(--e-3); }
.admin-barra-usuario { font-size: .86rem; color: rgba(255,255,255,.9); }
/* El "Salir" es un