/* CastingsOnline — estilos de la app (integración con variables del sitio).
   Uso: definir $extra_head con <link> a este archivo y $page_title antes de
   incluir el header común. Mobile-first: base de una columna, contenedor
   estrecho, tipografía del sitio (serif títulos, sans cuerpo). */

.co-wrap {
    max-width: 640px;
    margin: 0 auto;
    padding: 2rem 1.25rem 4rem;
}

.co-titulo {
    font-family: 'Playfair Display', serif;
    color: #fff;
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    margin: 0 0 0.4rem;
}

.co-sub {
    color: var(--text-dim);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 0 1.8rem;
}

.co-card {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    backdrop-filter: blur(6px);
    padding: 1.6rem 1.4rem;
    margin-bottom: 1.2rem;
}

.co-card h2 {
    font-size: 1.05rem;
    color: #fff;
    margin: 0 0 0.9rem;
}

.co-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-dim);
    margin: 0.9rem 0 0.3rem;
}

.co-input, .co-select, .co-textarea {
    width: 100%;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    color: #e0e4f0;
    padding: 0.7rem 0.9rem;
    font-size: 1rem;
    font-family: inherit;
}

.co-input:focus, .co-select:focus, .co-textarea:focus {
    outline: none;
    border-color: var(--accent-blue);
}

/* Desplegables: el menú de opciones lo pinta el navegador con su propio estilo, y
   con el fondo semitransparente del input salía texto claro sobre fondo claro
   (ilegible: reportado por Rafa 2026-09-11). Fondo oscuro explícito en el control
   y en las opciones. */
select.co-input, .co-select {
    background: #151b28;
    color: #e0e4f0;
    cursor: pointer;
}

select.co-input option, .co-select option, .co-select optgroup {
    background: #151b28;
    color: #e0e4f0;
}

.co-hint {
    font-size: 0.75rem;
    color: var(--text-dim);
    margin: 0.3rem 0 0;
}

.co-error {
    color: #f87171;
    font-size: 0.85rem;
    margin: 0.25rem 0 0;
}

.co-aviso {
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: #fbbf24;
    border-radius: 12px;
    padding: 0.9rem 1rem;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 1.2rem;
}

.co-btn-peligro {
    background: rgba(198, 66, 66, 0.12);
    border-color: rgba(198, 66, 66, 0.65);
}
.co-btn-peligro:hover {
    background: rgba(198, 66, 66, 0.25);
}

.co-ok {
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.4);
    color: #4ade80;
    border-radius: 12px;
    padding: 0.9rem 1rem;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 1.2rem;
}

.co-btn {
    display: inline-block;
    background: linear-gradient(135deg, #00e5ff, #bb86fc);
    color: #0b0b12;
    font-weight: 700;
    border: 0;
    cursor: pointer;
    padding: 0.75rem 1.6rem;
    border-radius: 100px;
    font-size: 0.95rem;
    margin-top: 1.2rem;
    text-decoration: none;
}

.co-btn-sec {
    background: transparent;
    border: 1px solid var(--glass-border);
    color: var(--text-dim);
    margin-left: 0.6rem;
}

.co-link {
    color: var(--accent-blue);
    text-decoration: none;
    font-size: 0.9rem;
}

.co-muted { color: var(--text-dim); font-size: 0.85rem; }

.co-fila {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.co-fila:last-child { border-bottom: 0; }
.co-vacio { color: var(--text-dim); font-size: 0.9rem; text-align: center; padding: 1rem 0; }

/* Listado público de castings */
.co-lista {
    display: grid;
    gap: 1rem;
    margin: 0 0 2rem;
    /* Dos castings por fila (decisión Rafa 2026-09-10). Si el número es
       impar, el suelto se centra (regla más abajo, en la sección de tarjetas). */
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.co-casting {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 1.3rem 1.3rem;
    text-decoration: none;
    display: block;
    transition: border-color 0.2s;
}
.co-casting:hover { border-color: var(--accent-blue); }
.co-casting h2 { font-family: 'Playfair Display', serif; color: #fff; font-size: 1.25rem; margin: 0 0 0.4rem; }
.co-casting .co-empresa { color: var(--accent-blue); font-size: 0.82rem; font-weight: 600; margin: 0 0 0.5rem; }
.co-casting .co-desc { color: var(--text-dim); font-size: 0.9rem; line-height: 1.55; margin: 0 0 0.9rem;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.co-fecha {
    display: inline-flex; align-items: center; gap: 0.4rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 100px; padding: 0.3rem 0.8rem;
    font-size: 0.78rem; color: #fff;
}
.co-fecha.co-pronto { border-color: rgba(0, 229, 255, 0.5); color: #7ee7ff; }
.co-detalle { color: var(--text-dim); font-size: 0.92rem; line-height: 1.65; }
.co-detalle strong { color: #fff; }
.co-chip {
    display: inline-block; background: rgba(255,255,255,0.06);
    border: 1px solid var(--glass-border); border-radius: 8px;
    padding: 0.2rem 0.6rem; font-size: 0.75rem; color: var(--text-dim);
    margin: 0 0.3rem 0.3rem 0;
}

.co-btn-activo {
    border-color: var(--accent-blue);
    background: rgba(0, 229, 255, 0.12);
    color: #fff;
}

.co-upload-row {
    display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center;
    background: rgba(255,255,255,0.03); border: 1px dashed var(--glass-border);
    border-radius: 10px; padding: 0.6rem; margin-bottom: 0.4rem;
}

/* Honeypot anti-spam: invisible para humanos, visible para bots */
.co-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px;
    overflow: hidden;
}
.co-check {
    display: flex; gap: 0.6rem; align-items: flex-start;
    margin-top: 1.2rem; font-size: 0.85rem; color: var(--text-dim); line-height: 1.55;
}
.co-check input { margin-top: 0.2rem; accent-color: var(--accent-blue); }

/* --- Anuncio (página pública del casting) --- */
/* La fotografía del anuncio se muestra COMPLETA (decisión Rafa 2026-09-10):
   sin recorte ni altura forzada. Centrada y limitada por ancho y por alto de
   ventana para que un cartel vertical no se convierta en una columna enorme. */
.co-anuncio-img {
    width: 100%;
    display: flex;
    justify-content: center;
    background: var(--glass);
    border-bottom: 1px solid var(--glass-border);
    padding: 1.2rem 1rem 0;
}
.co-anuncio-img img {
    display: block;
    width: auto;
    height: auto;
    max-width: min(100%, 520px);
    max-height: 72vh;
    border-radius: 14px;
    border: 1px solid var(--glass-border);
}
.co-anuncio-cab {
    margin: 1.6rem 0 1.2rem;
}
.co-empresa {
    color: var(--accent-blue);
    font-size: 0.85rem;
    font-weight: 600;
}
.co-chip-accent {
    border-color: rgba(168, 85, 247, 0.55);
    background: rgba(168, 85, 247, 0.10);
    color: #d8b4fe;
    border-radius: 100px;
    padding: 0.35rem 0.85rem;
    font-size: 0.8rem;
}
.co-anuncio-cta {
    text-align: center;
    padding: 1.2rem 1.4rem;
    margin: 0 0 1.4rem;
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.07), rgba(168, 85, 247, 0.10));
    border: 1px solid rgba(168, 85, 247, 0.35);
    border-radius: 18px;
}
.co-btn-cta2 {
    background: linear-gradient(135deg, #a855f7, #00e5ff);
}
.co-casting-img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 10px;
    margin: 0 0 0.8rem;
    border: 1px solid var(--glass-border);
}


/* ================= Layout interno con menú lateral ================= */
.co-layout {
    display: grid;
    grid-template-columns: 215px minmax(0, 1fr);
    gap: 1.6rem;
    align-items: start;
    max-width: 1080px;
    margin: 0 auto;
    padding: 2rem 1rem 3rem;
}
.co-side {
    position: sticky;
    top: 1rem;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 1rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.co-side-brand a { color: #fff; font-weight: 800; text-decoration: none; font-size: 0.95rem; }
.co-side-nav { display: flex; flex-direction: column; gap: 0.2rem; }
.co-side-nav a {
    color: var(--text-dim); text-decoration: none; font-size: 0.88rem;
    padding: 0.5rem 0.65rem; border-radius: 10px; transition: background 0.15s, color 0.15s;
}
.co-side-nav a:hover { background: rgba(255,255,255,0.05); color: #fff; }
.co-side-nav a.co-side-on {
    background: linear-gradient(135deg, rgba(0,229,255,0.14), rgba(168,85,247,0.16));
    color: #fff; border: 1px solid rgba(0,229,255,0.25);
}
.co-side-out { margin-top: auto; border-top: 1px solid var(--glass-border); padding-top: 0.7rem; }
.co-side-out button {
    background: none; border: 1px solid var(--glass-border); color: var(--text-dim);
    border-radius: 100px; padding: 0.35rem 1rem; font-size: 0.78rem; cursor: pointer; width: 100%;
}
.co-side-out button:hover { color: #f87171; border-color: #f87171; }
.co-layout-main { min-width: 0; }

/* ================= Tarjetas de casting en portada ================= */
/* La foto se muestra COMPLETA (sin recorte): height auto = proporción
   natural del afiche. Antes era aspect-ratio 16/9 + object-fit cover, que
   recortaba los carteles verticales de los catálogos. */
.co-casting .co-casting-thumb {
    display: block; width: 100%; height: auto;
    border-radius: 12px; margin-bottom: 0.9rem; border: 1px solid var(--glass-border);
    background: #17171f;
}
.co-casting-thumb.co-ph {
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 4/3;
    background: linear-gradient(135deg, rgba(0,229,255,0.06), rgba(168,85,247,0.12));
    font-size: 2.6rem; text-decoration: none;
}
.co-casting .co-desc { color: var(--text-dim); font-size: 0.9rem; line-height: 1.6; margin: 0.4rem 0 0.7rem; }

/* Fila de datos de la tarjeta: fecha de cierre · remuneración · papeles */
.co-datos { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.co-fecha.co-pago { border-color: rgba(34, 197, 94, 0.5); color: #86efac; }
.co-fecha.co-papeles-no { border-color: rgba(148, 163, 184, 0.45); color: #cbd5e1; }
.co-fecha.co-papeles-si { border-color: rgba(245, 158, 11, 0.55); color: #fbbf24; }

/* Un solo casting suelto (número impar) se centra en su fila */
@media (min-width: 721px) {
    .co-lista > .co-casting:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        width: calc(50% - 0.5rem);
        justify-self: center;
    }
}
/* Móvil: una sola columna (y sin centrado parcial) */
@media (max-width: 720px) {
    .co-lista { grid-template-columns: 1fr; }
}

/* Requisitos en vertical (una línea debajo de otra) con estado del candidato */
.co-req { list-style: none; padding: 0; margin: 0.7rem 0 0; border-top: 1px solid var(--glass-border); }
.co-req li {
    display: flex; justify-content: space-between; align-items: center; gap: 0.8rem;
    padding: 0.45rem 0; border-bottom: 1px solid var(--glass-border); font-size: 0.82rem;
}
.co-req .req-nombre { color: var(--text-dim); }
.co-req .req-dato { color: #fff; font-weight: 600; white-space: nowrap; }
.co-req .req-dato.req-no { color: #f87171; }
.co-req .req-dato.req-falta { color: #f59e0b; }
.co-req .req-dato.req-ok { color: #4ade80; }

@media (max-width: 860px) {
    .co-layout { grid-template-columns: 1fr; }
    .co-side { position: static; flex-direction: row; align-items: center; flex-wrap: wrap; }
    .co-side-nav { flex-direction: row; flex-wrap: wrap; }
    .co-side-out { margin-top: 0; border-top: none; padding-top: 0; }
}

.co-req li.co-req-detalle {
    border-bottom: none;
    padding-top: 0;
    justify-content: flex-start;
    gap: 0.8rem;
    flex-wrap: wrap;
}
.co-req li.co-req-detalle + li { border-top: none; }
.co-req li + li.co-req-detalle { margin-top: -0.45rem; }

/* ===== Compensación del menú principal flotante de rafacanelas.es =====
   El nav del sitio es fixed (top 2rem, z-index alto): todo contenido de la
   app que empiece al tope queda debajo. El primer bloque tras el nav reserva
   su franja; el menú lateral sticky se detiene justo debajo del nav. */
.main-nav + * { margin-top: 6.2rem; }
.co-side { top: 6.2rem; }
@media (max-width: 768px) {
    /* En móvil el nav hace wrap en varias filas y ocupa más */
    .main-nav + * { margin-top: 9.8rem; }
    .co-side { top: auto; }
}

/* Tarjeta "Como hemos hecho esto" (portada) */
.co-card-comohizo {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    color: #fff;
    border-color: rgba(245, 158, 11, 0.4);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.10), rgba(168, 85, 247, 0.08));
    transition: border-color 0.2s, transform 0.2s;
}
.co-card-comohizo:hover { border-color: #f59e0b; transform: translateY(-1px); }
.co-card-comohizo strong { display: block; font-size: 1.02rem; }
.co-comohizo-sub { display: block; color: var(--text-dim); font-size: 0.86rem; margin-top: 0.2rem; line-height: 1.45; }
.co-comohizo-icono { font-size: 1.7rem; flex: 0 0 auto; }
.co-comohizo-flecha { margin-left: auto; color: #f59e0b; font-size: 1.3rem; flex: 0 0 auto; }

/* ── Módulos con fondo SÓLIDO (decisión Rafa 2026-09-09) ──────────────
   Ningún módulo del proyecto debe ser translúcido ni dejar ver el fondo
   de partículas a través de las tarjetas. --glass pasa a color sólido
   SOLO en las páginas de la app (este css se carga después del del sitio);
   se retira el backdrop-filter de las tarjetas. */
:root {
    --glass: #14141b;
}
.co-card { backdrop-filter: none; }
.co-anuncio-cta {
    background: linear-gradient(135deg, #1b1b26, #131318);
}
.co-card-comohizo {
    background: linear-gradient(135deg, #201a12, #171226);
}
.co-casting-thumb.co-ph {
    background: #17171f;
}