/* Estilos del formulario público de inscripción (templates/public/evento.php).
   Se carga junto a base.css. */
:root {
    /* Azul original, mantenido a propósito solo aquí: selección de
       modalidad, categoría asignada y precio total — para que destaquen
       sobre el resto de la página, ya en verde de marca. */
    --select-accent:    #2563eb;
    --select-accent-bg: #eff6ff;
    --select-accent-bd: #bfdbfe;
}
.header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.lang-switcher {
    display: flex;
    gap: 0.5rem;
}
.lang-switcher a {
    display: block;
    line-height: 0;
    opacity: 0.45;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 0 0 1px var(--border);
    transition: opacity .15s;
}
.lang-switcher a:hover,
.lang-switcher a.active {
    opacity: 1;
}
.lang-switcher svg { display: block; width: 28px; height: auto; }
.header .brand {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--brand);
    text-decoration: none;
}
.comprobar-banner {
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    text-align: center;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
}
.comprobar-banner a {
    color: var(--brand);
    text-decoration: none;
    font-weight: 600;
}
.comprobar-banner a:hover { text-decoration: underline; }
.container {
    max-width: 780px;
    margin: 2rem auto;
    padding: 0 1rem;
}
/* La ficha de información aprovecha más ancho que el formulario (columna
   del póster + columna de info, uno junto al otro). */
.container-ancho { max-width: 1040px; }

/* ── Cabecera: póster (izquierda, vertical, tamaño natural) + info ── */
.event-hero {
    display: grid;
    grid-template-columns: minmax(220px, 340px) 1fr;
    gap: 2rem;
    align-items: start;
    margin-bottom: 1.5rem;
}
.event-poster-col { align-self: start; }
.event-poster-natural {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    border: 1px solid var(--border);
}
.event-info-col {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 2rem;
}
.event-info-col h1 { font-size: 1.6rem; font-weight: 700; margin-bottom: 0.75rem; }
.event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.875rem;
    color: var(--muted);
    margin-bottom: 0.75rem;
}
.event-meta span { display: flex; align-items: center; gap: 0.3rem; }
.event-plazas-urgente {
    display: inline-block;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.375rem 0.75rem;
    border-radius: 8px;
    margin-bottom: 0.75rem;
}
.event-inscripciones-periodo {
    font-size: 0.85rem;
    color: var(--select-accent);
    font-weight: 600;
    margin-bottom: 1rem;
}
.event-desc { font-size: 0.9375rem; line-height: 1.7; color: var(--muted); }
.event-reglamento-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 1rem;
    padding: 0.55rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg);
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
}
.event-reglamento-link:hover {
    background: var(--select-accent-bg);
    border-color: var(--select-accent-bd);
    color: var(--select-accent);
}

/* Sin póster, .event-hero solo tiene la columna de info: que ocupe todo
   el ancho en vez de encajarse en la columna estrecha del póster. */
.event-hero-sin-poster { grid-template-columns: 1fr; }

.event-cta-card { text-align: center; }

/* ── Modalidades (ficha de información, de solo lectura) ── */
.modalidad-info-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.125rem 1.25rem;
    margin-bottom: 0.875rem;
}
.modalidad-info-card:last-child { margin-bottom: 0; }
.modalidad-info-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.modalidad-info-header h3 { font-size: 1rem; font-weight: 700; }
.modalidad-distancia { font-weight: 400; color: var(--muted); font-size: 0.875rem; }
.modalidad-badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    white-space: nowrap;
}
.modalidad-badge-agotada { background: #fef2f2; color: #b91c1c; }
.modalidad-restricciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    font-size: 0.8125rem;
    color: var(--muted);
    margin-top: 0.375rem;
}
.modalidad-descripcion {
    font-size: 0.875rem;
    color: var(--muted);
    line-height: 1.5;
    margin-top: 0.625rem;
}
.modalidad-tiers {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}
.modalidad-tier {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.875rem;
    color: var(--muted);
}
.modalidad-tier-actual { color: var(--text); }
.modalidad-tier-nombre { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.modalidad-tier-badge {
    background: var(--select-accent-bg);
    color: var(--select-accent);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
}
.modalidad-tier-fechas { font-size: 0.8rem; color: var(--muted); }
.modalidad-tier-precio { font-weight: 700; flex-shrink: 0; }
.modalidad-tier-actual .modalidad-tier-precio { color: var(--select-accent); font-size: 1.0625rem; }
.modalidad-categorias {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
}
.modalidad-categorias-titulo { font-weight: 600; color: var(--muted); }
.modalidad-categoria-chip {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
    color: var(--muted);
}

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 1.5rem;
}
/* h1 directo dentro de .card (páginas de comprobación de inscripción):
   sin esto se pegaba al párrafo de intro y al formulario — el reset
   global (base.css) pone margin:0 a todo por defecto. */
.card h1 { font-size: 1.4rem; margin-bottom: 0.75rem; }
.card > p { color: var(--muted); font-size: 0.9375rem; margin-bottom: 1.5rem; line-height: 1.5; }
.card h2 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}
.form-group { margin-bottom: 1.1rem; }
.form-group label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.375rem;
}
.form-group label .req { color: var(--danger); margin-left: 2px; }
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.9375rem;
    font-family: inherit;
    outline: none;
    transition: border-color .15s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--brand); }
.form-group input[type="checkbox"],
.form-group input[type="radio"] {
    width: auto;
    margin: 0;
    flex-shrink: 0;
}
/* Botón "Elegir archivo" con aspecto propio en vez del nativo del navegador
   — solo se restyla el botón (pseudo-elemento), el <input> sigue siendo el
   de siempre (nombre del fichero, validación, accesibilidad...). */
.form-group input[type="file"] {
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--muted);
}
.form-group input[type="file"]::file-selector-button,
.form-group input[type="file"]::-webkit-file-upload-button {
    display: inline-flex;
    align-items: center;
    padding: 0.55rem 1rem;
    margin-right: 0.75rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text);
    transition: background .15s;
}
.form-group input[type="file"]:hover::file-selector-button,
.form-group input[type="file"]:hover::-webkit-file-upload-button {
    background: var(--bg);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.alert {
    padding: 0.875rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    margin-bottom: 1.25rem;
}
.alert-error   { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
.alert-success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d; }
.modality-card {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    border: 2px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .15s;
    margin-bottom: 0.625rem;
}
.modality-card:hover { border-color: var(--select-accent); }
.modality-card.selected { border-color: var(--select-accent); background: var(--select-accent-bg); }
.modality-card.disabled { opacity: 0.5; cursor: not-allowed; }
.modality-card.locked { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.discount-wrap { display: flex; gap: 0.5rem; align-items: stretch; }
.discount-wrap input { flex: 1; text-transform: uppercase; }
.icon-discount {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; flex-shrink: 0;
    border: 1px solid var(--border); border-radius: 8px;
    background: var(--surface); color: var(--muted);
    cursor: pointer; transition: all .15s;
}
.icon-discount svg { width: 18px; height: 18px; display: block; }
.icon-discount.aplicar:hover { background: #ebf6f2; color: var(--brand); border-color: var(--brand); }
.icon-discount.quitar { background:#fef2f2; border-color:#fecaca; color:#b91c1c; }
.icon-discount.quitar:hover { background:#fee2e2; }
.btn-check {
    padding: 0.625rem 1rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s;
}
.btn-check:hover { filter: brightness(0.95); }
.discount-msg { font-size: 0.82rem; margin-top: 0.4rem; display: none; }
.discount-msg.ok  { color: var(--success); display: block; }
.discount-msg.err { color: var(--danger);  display: block; }
.price-summary {
    background: var(--bg);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
    font-size: 0.9rem;
}
.price-row { display: flex; justify-content: space-between; padding: 0.3rem 0; }
.price-row.total {
    font-size: 1.1rem;
    font-weight: 700;
    border-top: 1px solid var(--border);
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    color: var(--select-accent);
}
.price-row.discount { color: var(--success); }
.btn-submit {
    width: 100%;
    padding: 0.875rem;
    background: var(--brand);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.btn-submit:hover { filter: brightness(0.95); }
.closed-notice { text-align: center; padding: 2rem; color: var(--muted); }
.closed-notice strong { display: block; font-size: 1.1rem; margin-bottom: 0.5rem; }
/* Aviso de texto informativo (campo extra tipo "info") — ámbar, no el azul de
   selección que este proyecto reserva a propósito para modalidad/categoría/precio. */
.campo-aviso {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: var(--text);
}
.categoria-box {
    display: none;
    background: var(--select-accent-bg);
    border: 1px solid var(--select-accent-bd);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    font-size: 0.875rem;
}
.group-panel {
    background: #ebf6f2;
    border: 1px solid #aad6c4;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}
.group-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0;
    font-size: 0.875rem;
    border-bottom: 1px solid #cee8dd;
    gap: 0.5rem;
    flex-wrap: wrap;
}
@media (max-width: 700px) {
    /* Póster arriba a ancho completo, info debajo — en vez de columnas */
    .event-hero { grid-template-columns: 1fr; gap: 1rem; }
    .event-poster-col { max-width: 320px; margin: 0 auto; }
}
@media (max-width: 600px) {
    .container { margin: 0; padding: 0; }
    .event-info-col, .card {
        border-radius: 0;
        border-left: none;
        border-right: none;
        margin-bottom: 0.5rem;
    }
    .event-info-col { padding: 1.25rem 1rem; }
    .event-poster-col { max-width: none; }
    .event-poster-natural { border-radius: 0; }
    .card { padding: 1.25rem 1rem; }
    .event-meta { gap: 0.5rem; }
    .price-summary { padding: 0.875rem 1rem; }
}
@media (max-width: 480px) {
    .header { padding: 0.875rem 1rem; gap: 0.75rem; }
    /* El logo tiene la altura en style inline (height:76px), de ahí el !important.
       A tamaño completo (278px de ancho) no cabe junto a las 4 banderas. */
    .header .brand img { height: 44px !important; }
    .lang-switcher { gap: 0.4rem; flex-shrink: 0; }
    .lang-switcher svg { width: 24px; }
    .event-info-col h1 { font-size: 1.3rem; }
}