/* =====================================================================
   mexihc.css  ·  parte publica del sistema de inscripciones
   MexIHC 2026
   =====================================================================

   Los tokens de abajo estan copiados del CSS del sitio del congreso,
   no muestreados de una captura. Los nombres son los mismos que usa el
   sitio para que sean faciles de cotejar.

   Correcciones respecto a mi primera version, que se basaba solo en
   capturas de pantalla:

     - El acento del sitio es magenta (#870058), no el rojizo del
       logotipo. Los enlaces son #6c0047 y su hover #4f0035.
     - Los titulos usan Libre Baskerville y el cuerpo usa Inter.
       Habia supuesto Georgia y un stack de sistema.
     - El fondo no es plano: son dos degradados radiales tenues sobre
       una base vertical.
     - La barra de navegacion es clara, no azul marino.
     - El sitio si usa tarjetas con sombra y radios amplios. Las habia
       quitado por lo que se veia en la captura de las tablas.
   ===================================================================== */

:root {
    /* Copiados del sitio */
    --mexihc-night:      #011638;
    --mexihc-midnight:   #223149;
    --mexihc-indigo:     #496389;
    --mexihc-slate:      #535b68;
    --mexihc-magenta:    #870058;
    --mexihc-rose:       #af4972;
    --mexihc-mist:       #bdb8c2;
    --mexihc-paper:      #f0efec;
    --mexihc-white:      #ffffff;
    --mexihc-link:       #6c0047;
    --mexihc-link-hover: #4f0035;
    --mexihc-focus:      #b11f7a;

    /* Derivados: el sitio los produce con transparencias sobre el papel */
    --mexihc-band:   rgba(1, 22, 56, 0.055);   /* filas alternas */
    --mexihc-rule:   rgba(1, 22, 56, 0.14);    /* bordes y reglas */
    --mexihc-shadow: 0 10px 24px rgba(1, 22, 56, 0.09);

    --serif: "Libre Baskerville", Georgia, "Times New Roman", serif;
    --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;

    --ancho: 44rem;
}

/* ---------------------------------------------------------------- */
/* Base                                                              */
/* ---------------------------------------------------------------- */

body {
    font-family: var(--sans);
    color: var(--mexihc-night);
    /* Mismo fondo del sitio. */
    background:
        radial-gradient(circle at 10% -14%, rgba(142, 7, 86, 0.10), transparent 42%),
        radial-gradient(circle at 90% -18%, rgba(73, 99, 137, 0.20), transparent 46%),
        linear-gradient(180deg, #f4f1f4 0%, var(--mexihc-paper) 44%, #f7f5f6 100%);
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100vh;
    line-height: 1.6;
}

a {
    color: var(--mexihc-link);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 0.14em;
}

a:visited { color: var(--mexihc-link); }
a:hover   { color: var(--mexihc-link-hover); }

/* El anillo de foco del sitio, tal cual. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
    outline: 3px solid rgba(177, 31, 122, 0.6);
    outline-offset: 2px;
    border-radius: 6px;
    box-shadow: none;
}

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

/* ---------------------------------------------------------------- */
/* Cabecera                                                          */
/* ---------------------------------------------------------------- */

/* El sitio usa una barra clara sobre el papel, con texto azul marino
   y subrayado magenta al pasar el cursor. */
.navbar.mx-cabecera {
    background: rgba(240, 239, 236, 0.95);
    border-bottom: 1px solid var(--mexihc-rule);
    box-shadow: 0 8px 18px rgba(1, 22, 56, 0.06);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    padding: 0;
}

.mx-cabecera .container {
    max-width: var(--ancho);
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.mx-cabecera .navbar-brand {
    color: var(--mexihc-night);
    font-family: var(--serif);
    font-size: 0.92rem;
    line-height: 1.35;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-right: 1rem;
    white-space: normal;
}

.mx-cabecera .navbar-brand:hover,
.mx-cabecera .navbar-brand:focus { color: var(--mexihc-magenta); }

.mx-cabecera .navbar-brand img { height: 28px; width: auto; flex: none; }

.mx-cabecera .nav-link {
    color: var(--mexihc-night);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.1;
    padding: 0.2rem 0;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.mx-cabecera .nav-link:hover,
.mx-cabecera .nav-link:focus {
    color: var(--mexihc-magenta);
    border-bottom-color: var(--mexihc-magenta);
}

/* ---------------------------------------------------------------- */
/* Contenedor y migas                                                */
/* ---------------------------------------------------------------- */

body > .container {
    max-width: var(--ancho);
    padding-bottom: 4rem;
}

.custom-breadcrumb,
.breadcrumb {
    background: none;
    padding: 1.5rem 0 0;
    margin-bottom: 0;
    font-size: 0.8rem;
    color: var(--mexihc-slate);
}

.breadcrumb-item a { color: var(--mexihc-slate); }
.breadcrumb-item a:hover { color: var(--mexihc-magenta); }
.breadcrumb-item.active { color: var(--mexihc-night); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--mexihc-slate); }

/* ---------------------------------------------------------------- */
/* Titulos                                                           */
/* ---------------------------------------------------------------- */

h1, h2, h3 {
    font-family: var(--serif);
    color: var(--mexihc-night);
    font-weight: 700;
}

h1 {
    font-size: clamp(1.7rem, 3.2vw, 2.1rem);
    line-height: 1.2;
    letter-spacing: 0.02em;
    margin: 1.5rem 0 1.75rem;
    text-align: left;
}

h1.text-center { text-align: left !important; }

h2 {
    font-size: 1.05rem;
    line-height: 1.3;
    margin: 0 0 1.15rem;
}

/* ---------------------------------------------------------------- */
/* Bloques                                                           */
/* ---------------------------------------------------------------- */

/* El sitio agrupa contenido en tarjetas blancas de radio amplio sobre
   el fondo con degradado. Dentro de la tarjeta, cada seccion del
   formulario se separa con una regla. */
.mx-bloque {
    background: var(--mexihc-white);
    border: 1px solid rgba(1, 22, 56, 0.08);
    border-radius: 16px;
    box-shadow: var(--mexihc-shadow);
    padding: 1.6rem 1.75rem;
    margin-bottom: 1.25rem;
}

/* El bloque del boton no necesita tarjeta: la accion se sostiene sola. */
.mx-bloque-plano {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    margin-top: 1.5rem;
}

.card {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0 !important;
}

/* ---------------------------------------------------------------- */
/* Campos                                                            */
/* ---------------------------------------------------------------- */

.form-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--mexihc-night);
    margin-bottom: 0.4rem;
    margin-left: 0.15rem;
}

.form-control,
.form-select {
    background-color: var(--mexihc-white);
    border: 1px solid #d2d6da;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.4rem;
    color: #495057;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--mexihc-focus);
    box-shadow: none;
}

.form-control::placeholder { color: #adb5bd; }

.form-check-input { border-color: #cbd3da; }
.form-check-input:checked {
    background-color: var(--mexihc-magenta);
    border-color: var(--mexihc-magenta);
}
.form-check-label { font-size: 0.875rem; }

/* Autor o asistente: es la decision que reordena todo el formulario,
   asi que se lee como un control segmentado y no como dos casillas. */
.mx-tipo {
    display: flex;
    border: 1px solid var(--mexihc-rule);
    border-radius: 0.5rem;
    overflow: hidden;
    margin-bottom: 1.5rem;
    background: var(--mexihc-white);
}

.mx-tipo .form-check {
    flex: 1;
    margin: 0;
    padding: 0;
    text-align: center;
    min-height: 0;
}

.mx-tipo .form-check-input { display: none; }

.mx-tipo .form-check-label {
    display: block;
    padding: 0.65rem 0.5rem;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: var(--mexihc-slate);
    border-right: 1px solid var(--mexihc-rule);
}

.mx-tipo .form-check:last-child .form-check-label { border-right: none; }

.mx-tipo .form-check-input:checked + .form-check-label {
    background: var(--mexihc-night);
    color: var(--mexihc-paper);
}

.mx-tipo .form-check-input:focus-visible + .form-check-label {
    outline: 3px solid rgba(177, 31, 122, 0.6);
    outline-offset: -3px;
}

/* ---------------------------------------------------------------- */
/* Avisos                                                            */
/* ---------------------------------------------------------------- */

.alert {
    border: none;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    padding: 0.75rem 0.9rem;
    margin-top: 0.5rem;
    background: var(--mexihc-band);
    color: var(--mexihc-slate);
}

/* Las notas de campo acompanian al campo: no deben competir con el. */
.alert.custom-alert {
    background: transparent;
    border-left: 2px solid var(--mexihc-rule);
    border-radius: 0;
    padding: 0.1rem 0 0.1rem 0.7rem;
    color: var(--mexihc-slate);
}

.alert.custom-alert i { color: var(--mexihc-slate); margin-right: 0.4rem; }

.alert-info    { background: var(--mexihc-band); color: var(--mexihc-night); }
.alert-success { background: rgba(73, 99, 137, 0.12); color: var(--mexihc-night); }
.alert-warning { background: rgba(135, 0, 88, 0.09); color: var(--mexihc-night); }
.alert-danger  { background: rgba(135, 0, 88, 0.14); color: var(--mexihc-link-hover); }

.alert ul { margin-bottom: 0; padding-left: 1.1rem; }
.alert strong { color: var(--mexihc-night); }

/* ---------------------------------------------------------------- */
/* Boton                                                             */
/* ---------------------------------------------------------------- */

/* Mismo tratamiento que el boton principal del sitio. */
.btn { border-radius: 0.5rem; font-family: var(--sans); }

.mx-enviar {
    display: block;
    width: 100%;
    background-image: linear-gradient(130deg, var(--mexihc-magenta) 0%, var(--mexihc-rose) 100%);
    color: var(--mexihc-paper);
    border: 0;
    padding: 0.85rem 1.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.025rem;
    box-shadow: 0 4px 7px -1px rgba(0, 0, 0, 0.11);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.mx-enviar:hover,
.mx-enviar:focus {
    color: var(--mexihc-paper);
    transform: scale(1.01);
    box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.09);
}

/* ---------------------------------------------------------------- */
/* Tablas                                                            */
/* ---------------------------------------------------------------- */

.mx-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    margin: 0 0 0.5rem;
    color: var(--mexihc-night);
}

.mx-tabla td { padding: 0.6rem 0.75rem; border: none; }

.mx-tabla tr:nth-child(odd) td { background: var(--mexihc-band); }

.mx-tabla td:last-child {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.mx-tabla tr.mx-total td {
    background: transparent;
    border-top: 2px solid var(--mexihc-night);
    font-weight: 700;
    padding-top: 0.75rem;
}

/* ---------------------------------------------------------------- */
/* Pantalla de exito                                                 */
/* ---------------------------------------------------------------- */

/* El codigo de registro es lo unico que la persona debe conservar, asi
   que es el elemento con mas peso de todo el sistema. */
.mx-codigo {
    background-image: linear-gradient(130deg, var(--mexihc-night) 0%, var(--mexihc-midnight) 100%);
    border-radius: 12px;
    padding: 1.4rem 1rem;
    margin: 1.5rem 0;
    text-align: center;
}

.mx-codigo-etiqueta {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mexihc-mist);
    margin-bottom: 0.5rem;
}

.mx-codigo-valor {
    display: block;
    font-family: var(--serif);
    font-size: clamp(1.3rem, 4.5vw, 1.85rem);
    font-weight: 700;
    color: var(--mexihc-paper);
    letter-spacing: 0.02em;
    line-height: 1.25;
    word-break: break-all;
}

.mx-datos { font-size: 0.9rem; margin: 0 0 1rem; }

.mx-datos dt {
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--mexihc-night);
    float: left;
    clear: left;
    width: 11rem;
    padding-right: 0.75rem;
    padding-top: 0.15rem;
}

.mx-datos dd {
    margin-left: 11rem;
    margin-bottom: 0.4rem;
    word-break: break-word;
    color: var(--mexihc-slate);
}

.mx-nota {
    border-left: 3px solid var(--mexihc-magenta);
    background: rgba(135, 0, 88, 0.06);
    border-radius: 0 0.5rem 0.5rem 0;
    padding: 0.85rem 1rem;
    font-size: 0.88rem;
    margin-top: 1.25rem;
}

.mx-pago { margin-top: 0; }

@media (max-width: 42rem) {
    .mx-bloque { padding: 1.25rem 1.1rem; border-radius: 12px; }
    .mx-datos dt { float: none; width: auto; padding: 0; }
    .mx-datos dd { margin-left: 0; margin-bottom: 0.75rem; }
}

/* Al imprimir se conserva solo el comprobante. */
@media print {
    body { background: #fff; }
    .navbar, .breadcrumb, nav, .btn, #paypal-button-container { display: none !important; }
    .mx-bloque { box-shadow: none; border: 1px solid #ccc; }
    .mx-codigo { background: none; border: 2px solid #000; }
    .mx-codigo-valor { color: #000; }
    .mx-codigo-etiqueta { color: #555; }
    a[href]:after { content: " (" attr(href) ")"; font-size: 0.75em; color: #555; }
}

/* ================================================================== */
/* Panel de administracion                                            */
/* ================================================================== */

.mx-cabecera-panel { position: fixed; top: 0; width: 100%; z-index: 1030; }
.mx-cabecera-panel + .container { padding-top: 5.5rem; }
.mx-cabecera-panel .container,
.mx-cabecera-panel ~ .container { max-width: 78rem; }

.mx-cifras { display: flex; flex-wrap: wrap; gap: 2.5rem; margin-bottom: 0.75rem; }

.mx-cifra-valor {
    display: block;
    font-family: var(--serif);
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1;
    color: var(--mexihc-night);
    font-variant-numeric: tabular-nums;
}

.mx-cifra-pie {
    display: block;
    font-size: 0.78rem;
    color: var(--mexihc-slate);
    margin-top: 0.35rem;
}

/* Lo pendiente de cobro es lo unico accionable de la pantalla. */
.mx-cifra-alerta .mx-cifra-valor { color: var(--mexihc-magenta); }

.mx-apunte { font-size: 0.8rem; color: var(--mexihc-slate); margin: 0.35rem 0 0; }

.mx-lista { list-style: none; padding: 0; margin: 0; }
.mx-lista li { border-bottom: 1px solid var(--mexihc-rule); padding: 0.6rem 0; }
.mx-lista li:last-child { border-bottom: none; }

.mx-cabecera-panel ~ .container .table th {
    color: var(--mexihc-night);
    font-size: 0.78rem;
    border-bottom: 2px solid var(--mexihc-night);
}

.mx-cabecera-panel ~ .container .table td { font-size: 0.84rem; }
.mx-cabecera-panel ~ .container .btn { font-size: 0.75rem; padding: 0.3rem 0.6rem; }