/**
 * ========================================================================
 * ARCHIVO: info.css
 * PROYECTO: MOTELWEB.VIP
 * MÓDULO: Información General (mod_info_general.php)
 * DESCRIPCIÓN: Estilos base del bloque Info Básico.
 *              Migrado de estilos inline a clases semánticas para
 *              permitir variantes de layout desde el panel de diseño.
 * ========================================================================
 */

/* === HEADER DE TARJETA === */
.info-card-header {
    font-weight: bold;
    margin-bottom: 10px;
    margin-top: 15px;
}

.info-card-header.is-editing {
    display: flex;
    align-items: center;
    gap: 10px;
}

.info-card-title {
    font-weight: bold;
    margin: 0;
    display: flex;
    align-items: center;
}

/* === FILAS DE DATOS === */
.info-item {
    /* Sin estilos propios por defecto */
}

.info-item-last {
    margin-top: 5px;
}

/* === SUBTÍTULO INTERNO (ej. "Noche") === */
.info-subtitle {
    font-weight: bold;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
}

/* === ÍCONOS === */
.info-item-icon {
    color: #888;
    width: 20px;
    text-align: center;
    margin-right: 15px;
}

/* === TEXTO VACÍO / PENDIENTE === */
.info-empty {
    color: #888;
}

/* === LISTAS (Pagos, Gay friendly) === */
.info-list {
    list-style-type: none;
    margin-left: 0;
    padding-left: 0;
}

/* ============================================================
   GRID BASE
   ============================================================ */
.info-grid {
    display: grid;
    gap: 30px;
    margin-top: 20px;
}

/* ============================================================
   HEADER DEL MÓDULO (título + subtítulo)
   ============================================================ */

.info-seccion-header {
    /* Default: arriba, ocupando todo el ancho */
    grid-column: 1 / -1;
    margin-bottom: 30px;
}

.info-seccion-header .subtitulo {
    margin-bottom: 0;
}

/* ============================================================
   VARIANTE: 4x1 (default histórico)
   ============================================================ */
.info-layout-4x1,
.info-layout-auto {
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {

    .info-layout-4x1,
    .info-layout-auto {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {

    .info-layout-4x1,
    .info-layout-auto {
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
    }

    /* Divisorias verticales: todas las cards menos la primera */
    .info-layout-4x1>.info-card:nth-child(3),
    .info-layout-4x1>.info-card:nth-child(4),
    .info-layout-4x1>.info-card:nth-child(5) {
        padding-left: 25px;
        border-left: 1px solid rgba(255, 255, 255, 0.35);
    }
}

/* ============================================================
   VARIANTE 4x1 — Móvil: bloques centrados, texto a la izquierda
   La diferencia con "Automático" en móvil: los bloques se
   centran como tarjetas con ancho común, en vez de quedar
   pegados al borde del screen.
   ============================================================ */
@media (max-width: 639px) {
    .info-layout-4x1>.info-card {
        display: grid;
        grid-template-columns: 1fr;
        justify-items: center;
        padding: 10px 0;
    }

    .info-layout-4x1>.info-card>* {
        width: 100%;
        max-width: 340px;
        text-align: left;
    }

    .info-layout-4x1 .info-card-title,
    .info-layout-4x1 .info-subtitle {
        justify-content: flex-start;
    }

    /* Divisores horizontales en móvil (todas las cards menos la primera) */
    .info-layout-4x1>.info-card:nth-child(3),
    .info-layout-4x1>.info-card:nth-child(4),
    .info-layout-4x1>.info-card:nth-child(5) {
        padding-top: 20px;
        border-top: 1px solid rgba(255, 255, 255, 0.35);
    }
}

/* ============================================================
   VARIANTE: 2x2
   ============================================================ */
.info-layout-2x2 {
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .info-layout-2x2 {
        grid-template-columns: repeat(2, 1fr);
        gap: 0;
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Cada card: contenido con ancho común, centrado en su mitad */
    .info-layout-2x2>.info-card {
        display: grid;
        grid-template-columns: 1fr;
        justify-items: center;
        /* centra el bloque */
        text-align: left;
        padding: 30px;
    }

    /* Todos los hijos comparten el mismo ancho máximo */
    .info-layout-2x2>.info-card>* {
        width: 100%;
        max-width: 340px;
        /* ← este es el valor a tunear */
        text-align: left;
    }

    /* Bordes divisores (cruz central) */
    .info-layout-2x2>.info-card:nth-child(2) {
        border-right: 1px solid rgba(128, 128, 128, 0.08);
        border-bottom: 1px solid rgba(128, 128, 128, 0.08);
    }

    .info-layout-2x2>.info-card:nth-child(3) {
        border-bottom: 1px solid rgba(128, 128, 128, 0.08);
    }

    .info-layout-2x2>.info-card:nth-child(4) {
        border-right: 1px solid rgba(128, 128, 128, 0.08);
    }
}

/* ============================================================
   VARIANTE 2x2 — Móvil (zigzag)
   ============================================================ */
@media (max-width: 639px) {
    .info-layout-2x2 {
        gap: 25px;
    }

    .info-layout-2x2>.info-card {
        padding: 10px 0;
    }

    /* Card 2 (Identidad) y Card 4 (Formas de pago) → izquierda */
    .info-layout-2x2>.info-card:nth-child(2),
    .info-layout-2x2>.info-card:nth-child(4) {
        text-align: left;
    }

    .info-layout-2x2>.info-card:nth-child(2) .info-card-title,
    .info-layout-2x2>.info-card:nth-child(2) .info-subtitle,
    .info-layout-2x2>.info-card:nth-child(4) .info-card-title,
    .info-layout-2x2>.info-card:nth-child(4) .info-subtitle {
        justify-content: flex-start;
    }

    /* Card 3 (Horarios) y Card 5 (Gay friendly) → derecha */
    .info-layout-2x2>.info-card:nth-child(3),
    .info-layout-2x2>.info-card:nth-child(5) {
        text-align: right;
    }

    .info-layout-2x2>.info-card:nth-child(3) .info-card-title,
    .info-layout-2x2>.info-card:nth-child(3) .info-subtitle,
    .info-layout-2x2>.info-card:nth-child(5) .info-card-title,
    .info-layout-2x2>.info-card:nth-child(5) .info-subtitle {
        justify-content: flex-end;
    }

    /* Divisores horizontales en móvil (todas las cards menos la primera) */
    .info-layout-2x2>.info-card:nth-child(3),
    .info-layout-2x2>.info-card:nth-child(4),
    .info-layout-2x2>.info-card:nth-child(5) {
        padding-top: 20px;
        border-top: 1px solid rgba(255, 255, 255, 0.8);
    }
}

/* ============================================================
   VARIANTE: Lista vertical
   - Desktop: 2 columnas (header a la izquierda, cards a la derecha)
   - Móvil: 1 columna apilada (header arriba, cards abajo)
   ============================================================ */
.info-layout-lista {
    grid-template-columns: 1fr;
    gap: 0;
}

.info-layout-lista>.info-card {
    padding: 18px 0;
    border-bottom: 1px solid rgba(128, 128, 128, 0.8);
}

.info-layout-lista>.info-card:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

/* Header en variante lista (móvil): separado de las cards */
.info-layout-lista .info-seccion-header {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(128, 128, 128, 0.8);
}

@media (min-width: 900px) {
    .info-layout-lista {
        grid-template-columns: 1fr 1fr;
        gap: 0 50px;
    }

    /* Header: columna izquierda, ocupa todas las filas */
    .info-layout-lista .info-seccion-header {
        grid-column: 1;
        grid-row: 1 / span 4;
        display: flex;
        flex-direction: column;
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
        padding-right: 50px;
        border-right: 1px solid rgba(128, 128, 128, 0.8);
    }

    /* Cards: columna derecha */
    .info-layout-lista>.info-card {
        grid-column: 2;
    }

    .info-layout-lista.info-header-valign-top .info-seccion-header {
        justify-content: flex-start;
    }

    .info-layout-lista.info-header-valign-middle .info-seccion-header {
        justify-content: center;
    }

    .info-layout-lista.info-header-valign-bottom .info-seccion-header {
        justify-content: flex-end;
    }
}

/* ============================================================
   VARIANTE: Destacado
   ============================================================ */
.info-layout-destacado {
    grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
    .info-layout-destacado {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }

    .info-layout-destacado>.info-card:not(:first-child) {
        grid-column: 2;
    }

    /* Las 3 últimas cards a la derecha (Identidad es la 2ª después del header) */
    .info-layout-destacado>.info-card:nth-child(2) {
        grid-column: 1;
        grid-row: 2 / span 3;
        padding-right: 30px;
        border-right: 1px solid rgba(128, 128, 128, 0.8);
    }
}

/* ============================================================
   RESPETO POR titulos_align
   ============================================================ */
.titulos-align-left .info-card-title,
.titulos-align-left .info-subtitle {
    justify-content: flex-start;
    text-align: left;
}

.titulos-align-right .info-card-title,
.titulos-align-right .info-subtitle {
    justify-content: flex-end;
    text-align: right;
}

.titulos-align-center .info-card-title,
.titulos-align-center .info-subtitle {
    justify-content: center;
    text-align: center;
}

/* ============================================================
   VARIANTE: Split (mitad izquierda header, derecha 2x2)
   ============================================================ */

/* Default: 1 columna apilada (móvil) */
.info-layout-split {
    grid-template-columns: 1fr;
    gap: 25px;
}

.info-layout-split>.info-seccion-header {
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(128, 128, 128, 0.2);
}

/* Tablet+ : grid 4 columnas → header 1-2, cards en 3-4 (2x2) */
@media (min-width: 900px) {
    .info-layout-split {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: auto auto;
        gap: 0;
    }

    /* Header: mitad izquierda, ocupa las 2 filas completas */
    .info-layout-split>.info-seccion-header {
        grid-column: 1 / span 2;
        grid-row: 1 / span 2;
        padding: 0 40px 0 0;
        border-bottom: none;
        border-right: 1px solid rgba(128, 128, 128, 0.2);
        display: flex;
        flex-direction: column;
    }

    /* Posición vertical del header (mismo patrón que lista) */
    .info-layout-split.info-header-valign-top .info-seccion-header {
        justify-content: flex-start;
    }

    .info-layout-split.info-header-valign-middle .info-seccion-header {
        justify-content: center;
    }

    .info-layout-split.info-header-valign-bottom .info-seccion-header {
        justify-content: flex-end;
    }

    /* Cards: mitad derecha en 2x2 */
    .info-layout-split>.info-card {
        padding: 30px;
    }

    .info-layout-split>.info-card:nth-child(2) {
        grid-column: 3;
        grid-row: 1;
    }

    /* Identidad */
    .info-layout-split>.info-card:nth-child(3) {
        grid-column: 4;
        grid-row: 1;
    }

    /* Horarios */
    .info-layout-split>.info-card:nth-child(4) {
        grid-column: 3;
        grid-row: 2;
    }

    /* Pagos */
    .info-layout-split>.info-card:nth-child(5) {
        grid-column: 4;
        grid-row: 2;
    }

    /* Gay */

    /* Línea divisoria horizontal entre las dos hileras */
    .info-layout-split>.info-card:nth-child(4),
    .info-layout-split>.info-card:nth-child(5) {
        padding-top: 40px;
        border-top: 1px solid rgba(255, 255, 255, 0.35);
    }
}

/* ============================================================
   VARIANTE: Acordeón
   Lista vertical con título clickeable. Solo la variante
   `acordeon` activa el toggle (JS aparte en el módulo).
   ============================================================ */

/* ============================================================
   VARIANTE: Acordeón
   ============================================================ */

.info-layout-acordeon {
    grid-template-columns: 1fr;
    gap: 0;
}

/* Header del módulo arriba, sin flecha */
.info-layout-acordeon>.info-seccion-header {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(128, 128, 128, 0.2);
}

/* Cada card: contenido centrado en el 40% medio */
.info-layout-acordeon>.info-card {
    padding: 0 15%;
    border-top: 1px solid rgba(128, 128, 128, 0.8);
}
/* Sin border-top en la primera card del acordeón */
.info-layout-acordeon > .info-card:nth-child(2) {
    border-top: none;
}

@media (max-width: 1024px) {
    .info-layout-acordeon>.info-card {
        padding: 0 15%;
    }
}

@media (max-width: 640px) {
    .info-layout-acordeon>.info-card {
        padding: 0 5%;
    }
}

/* Header clickeable, en flex para alinear flecha + ícono + texto */
.info-layout-acordeon .info-card-header {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 22px 0;
    margin: 0;
    cursor: pointer;
    user-select: none;
    transition: color 0.2s;
}

.info-layout-acordeon .info-card-header:hover {
    color: #D4AF37;
}

/* Título: fuente de títulos + 1.5rem */
.info-layout-acordeon .info-card-title {
    font-family: var(--mw-font-title);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Flecha triangular */
.info-layout-acordeon .info-card-header::before {
    content: '\f0da';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: #D4AF37;
    font-size: 1rem;
    display: inline-block;
    flex-shrink: 0;
    transition: transform 0.25s ease;
    margin-left: 10px;
}

.info-layout-acordeon .info-card.open .info-card-header::before {
    transform: rotate(90deg);
}

/* Cuerpo: animación suave con grid-template-rows */
.info-layout-acordeon .info-card-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s ease;
}

.info-layout-acordeon .info-card-body-inner {
    overflow: hidden;
    min-height: 0;
}

.info-layout-acordeon .info-card-body-inner>*:first-child {
    margin-top: 0;
}

.info-layout-acordeon .info-card.open .info-card-body {
    grid-template-rows: 1fr;
}

.info-layout-acordeon .info-card.open .info-card-body-inner {
    padding-bottom: 22px;
    margin-left: 10px;
}

/* Lápiz: no togglea el acordeón */
.info-layout-acordeon .info-card-header .btn-editar-nexus {
    cursor: pointer;
}

/* ============================================================
   VARIANTE: Split acordeón
   Mitad izquierda: header | Mitad derecha: acordeón
   Hereda estilos base de .info-layout-acordeon (flecha, títulos, animación).
   Solo se ajusta el layout split.
   ============================================================ */

/* Reset del padding de 15% que tiene el acordeón puro */
.info-layout-split-acordeon>.info-card {
    padding: 0;
}

/* Móvil: header arriba con divisor */
.info-layout-split-acordeon>.info-seccion-header {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(128, 128, 128, 0.8);
}

/* Desktop: dos mitades */
@media (min-width: 900px) {
    .info-layout-split-acordeon {
        grid-template-columns: 1fr 1fr;
        gap: 0;
    }

    /* Header: mitad izquierda, todas las filas */
    .info-layout-split-acordeon>.info-seccion-header {
        grid-column: 1;
        grid-row: 1 / span 4;
        display: flex;
        flex-direction: column;
        margin-bottom: 0;
        padding: 0 40px 0 0;
        border-bottom: none;
        border-right: 1px solid rgba(128, 128, 128, 0.8);
    }

    /* Posición vertical del header (top/middle/bottom) */
    .info-layout-split-acordeon.info-header-valign-top .info-seccion-header {
        justify-content: flex-start;
    }

    .info-layout-split-acordeon.info-header-valign-middle .info-seccion-header {
        justify-content: center;
    }

    .info-layout-split-acordeon.info-header-valign-bottom .info-seccion-header {
        justify-content: flex-end;
    }

    /* Cards: mitad derecha, una por fila */
    .info-layout-split-acordeon>.info-card:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
    }

    .info-layout-split-acordeon>.info-card:nth-child(3) {
        grid-column: 2;
        grid-row: 2;
    }

    .info-layout-split-acordeon>.info-card:nth-child(4) {
        grid-column: 2;
        grid-row: 3;
    }

    .info-layout-split-acordeon>.info-card:nth-child(5) {
        grid-column: 2;
        grid-row: 4;
    }
}

/* ============================================================
   PADDING LATERAL EN MÓVIL
   ============================================================ */
@media (max-width: 899px) {
    .modulo-info .info-grid {
        padding-left: 30px;
        padding-right: 30px;
    }
}