/* ==========================================================================
   COMPONENTE: EVENTOS RECURRENTES
   Archivo: /css/eventos-recurrentes.css
   Usado por [scout_eventos_recurrentes] y [scout_listado_eventos_recurrentes]
   ========================================================================== */

/* Sin caja propia (21/08/2026, a petición expresa: "sobra la caja que
   envuelve Sección y donde aparece el calendario") — ".er-contenedor" es
   exclusivo de los dos shortcodes de Eventos Recurrentes (Crear/
   Gestionar), y los dos viven SIEMPRE dentro de ".panel-kraal-contenido"
   (Panel de Kraal), que ya pone su propia caja blanca con borde
   alrededor. Antes se pintaba una caja dentro de otra caja. Se deja el
   margen vertical (separa del título/pestañas de arriba), pero sin
   fondo/borde/sombra/relleno propios — el contenido queda suelto dentro
   de la caja exterior, igual que ya se hizo para el resto de paneles. */
.er-contenedor {
    margin-top: 0;
    margin-bottom: 0;
}

/* --- Formulario de regla (Fase 1) --- */
/* 4 columnas fijas, POSICIÓN EXPLÍCITA por campo (21/08/2026, a petición
   expresa: "Título y Sección también de ese tamaño [1 columna, como
   Fecha inicio/fin]... primero título y después sección"). Con Título y
   Sección reducidos a 1 columna, ya no llenan su fila entera (2 de 4) —
   sin fijar "grid-row" a mano, el acomodo automático de Grid seguiría
   rellenando el hueco con el campo siguiente ("Día de la semana"),
   mezclando dos grupos que deben quedar en filas separadas. Fijar fila Y
   columna en cada campo, en vez de dejar que Grid las calcule solo,
   evita ese problema de raíz — cada fila queda con el hueco vacío que le
   sobre en vez de fusionarse con la siguiente. */
.er-formulario {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem 1.5rem;
    align-items: end;
    margin-bottom: 1.5rem;
}

.er-formulario > .er-campo:nth-child(1) { grid-row: 1; grid-column: 1; } /* Título */
.er-formulario > .er-campo:nth-child(2) { grid-row: 1; grid-column: 2; } /* Sección */
.er-formulario > .er-campo:nth-child(3) { grid-row: 2; grid-column: 1; } /* Día de la semana */
.er-formulario > .er-campo:nth-child(4) { grid-row: 2; grid-column: 2; } /* Hora inicio */
.er-formulario > .er-campo:nth-child(5) { grid-row: 2; grid-column: 3; } /* Hora fin */
.er-formulario > .er-campo:nth-child(6) { grid-row: 2; grid-column: 4; } /* Lugar */
.er-formulario > .er-campo:nth-child(7) { grid-row: 3; grid-column: 1; } /* Fecha inicio de la regla */
.er-formulario > .er-campo:nth-child(8) { grid-row: 3; grid-column: 2; } /* Fecha fin de la regla */

/* "justify-self:start" (21/08/2026, a petición expresa: "el ancho de los
   botones aproximadamente proporcional a su contenido, tal y como está
   ahora es confuso") — un elemento de rejilla se estira a ancho completo
   de su celda por defecto ("justify-items:stretch", el valor inicial del
   contenedor), así que sin esto el botón medía las 4 columnas enteras
   pese a que su texto ocupa mucho menos — un rectángulo enorme y vacío
   por el lado derecho. Con "start" recupera su ancho natural, alineado
   al borde izquierdo de la rejilla, igual que las etiquetas de encima. */
#er_generar {
    grid-row: 4;
    grid-column: 1 / -1;
    justify-self: start;
}

/* Un campo por línea en móvil — 4 columnas fijas no caben en una pantalla
   estrecha (ver el mismo criterio en css/backend-form-edicion-post.css,
   sección "EDITAR EVENTO EN MÓVIL"). "grid-row:auto" es imprescindible
   aquí (bug real encontrado al simular móvil, 21/08/2026): los campos de
   arriba tienen ahora una fila EXPLÍCITA fija (Título y Sección los dos
   en "grid-row:1", etc.) — sin resetearla aquí, esa asignación de
   escritorio se cuela también en móvil, y dos campos con el mismo
   "grid-row" pero ambos a ancho completo ("grid-column:1/-1") acaban
   pintados uno encima del otro en la misma celda, en vez de uno debajo
   del otro. */
@media (max-width: 640px) {
    .er-formulario {
        grid-template-columns: 1fr;
    }
    .er-formulario > .er-campo,
    #er_generar {
        grid-column: 1 / -1;
        grid-row: auto;
    }
}

.er-campo label {
    display: block;
    font-weight: 600;
    color: var(--scout-global-oscuro);
    margin-bottom: 3px;
    font-size: 0.9rem;
}

/* Cajas más pequeñas, mismo criterio que el resto de formularios ya
   compactados de la web (21/08/2026, a petición expresa: "homogeneizar
   eso también") — antes "10px 14px"/"0.95rem", igual que el formulario
   de inscripción (css/shortcode-form-inscripcion.css). 16px explícito,
   no "0.95rem": evita el zoom automático de iOS al tocar el campo. */
.er-campo input[type="text"],
.er-campo input[type="date"],
.er-campo input[type="time"],
.er-campo select {
    width: 100%;
    padding: 7px 12px;
    border: 1px solid var(--scout-global-borde);
    border-radius: var(--radio-boton);
    background-color: #ffffff;
    font-size: 16px;
    color: var(--scout-global-oscuro);
    font-family: inherit;
    box-sizing: border-box;
    transition: var(--transicion-suave);
}

.er-campo input:focus,
.er-campo select:focus {
    outline: none;
    border-color: var(--scout-global-base);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--scout-global-base), transparent 80%);
}

/* "Sección" del listado de Gestión — ancho justo para el nombre, no el
   ancho completo de la caja (21/08/2026, a petición expresa). Campo
   suelto, fuera de ".er-formulario" (el grid de 4 columnas es solo del
   formulario de Crear), así que "width:100%" de la regla general de
   arriba lo estiraba a todo lo ancho del panel sin motivo — un <select>
   sin "width" fijado ya se ajusta solo al contenido de su opción
   seleccionada. */
#erl_seccion {
    width: auto;
    min-width: 180px;
}

/* --- Botones ---
   Convención del proyecto (ver CLAUDE.md, "Colores de botones"): estilo
   "outline" (fondo claro + borde de color, nunca relleno sólido) y nunca
   el morado corporativo en botones de acción — reservado para identidad
   de marca. Verde = crear/avanzar, azul = acción principal genérica
   (aquí, aplicar cambios en bloque), rojo = destructivo. */
/* Padding homogeneizado con ".scout-btn-accion" (21/08/2026, a petición
   expresa: "estos botones no tienen el tamaño adecuado" — antes
   "10px 20px", el tamaño grande de antes del recorte general del
   14/08/2026 a "5px 12px"). ".er-boton" es una clase paralela a
   ".scout-btn-accion" (mismo look, distinto nombre porque este módulo se
   escribió antes de esa convención), así que no se actualizó a la vez. */
.er-boton {
    padding: 5px 12px;
    border-radius: var(--radio-boton);
    background-color: #ffffff;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transicion-suave);
    font-family: inherit;
}

/* Colores de la paleta central --color-accion-* (style.css), 20/08/2026,
   rediseño completo — antes hexadecimales sueltos, una segunda copia de
   la misma paleta que .scout-btn-outline-*. "Aplicar a seleccionados" es
   ámbar (Editar/Modificar: cambia el valor de las reuniones seleccionadas
   en bloque), no azul. */
/* Gris (21/08/2026, a petición expresa: "Deseleccionar todo debería ser
   un botón, delante de Aplicar seleccionados" — antes era un enlace de
   texto subrayado, ".er-boton-enlace"). Mismo rol que "Cancelar/
   Descartar" en el resto de la web: no tiene efecto real sobre los
   datos, solo limpia una selección en pantalla — mismo gris que esa
   categoría, no un color de acción con efecto real. */
.er-boton-neutro {
    border: 1px solid var(--color-accion-borde-gris);
    color: var(--color-accion-gris);
}

.er-boton-neutro:hover {
    background-color: var(--color-accion-fondo-gris);
    box-shadow: var(--sombra-hover);
}

.er-boton-primario {
    border: 1px solid var(--color-accion-verde);
    color: var(--color-accion-verde);
}

.er-boton-primario:hover {
    background-color: #f0fdf4;
    box-shadow: var(--sombra-hover);
}

.er-boton-aplicar {
    border: 1px solid var(--color-accion-ambar);
    color: var(--color-accion-ambar);
}

.er-boton-aplicar:hover {
    background-color: #fffbeb;
    box-shadow: var(--sombra-hover);
}

.er-boton-peligro {
    border: 1px solid var(--color-accion-rojo);
    color: var(--color-accion-rojo);
}

.er-boton-peligro:hover {
    background-color: #fef2f2;
    box-shadow: var(--sombra-hover);
}

/* --- Mensajes de error / información --- */
.er-mensaje {
    color: #991b1b;
    font-weight: 600;
    margin: 0.75rem 0;
}

.er-mensaje:empty {
    display: none;
}

/* --- Tabla (revisión de fechas y listado de gestión) --- */
.er-tabla {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    font-size: 0.9rem;
}

.er-tabla th {
    text-align: left;
    padding: 10px 12px;
    background-color: var(--scout-global-fondo);
    color: var(--scout-global-oscuro);
    border-bottom: 2px solid var(--scout-global-borde);
}

.er-tabla td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--scout-global-borde);
    color: var(--scout-global-texto);
}

.er-tabla tbody tr:hover {
    background-color: color-mix(in srgb, var(--scout-global-fondo), white 40%);
}

/* --- Barra de acción en bloque (Vista Lista) --- */
/* 2 filas fijas (21/08/2026, a petición expresa — ver comentario en
   shortcode-listado-gestion.php): fila 1 = texto instructivo (fijo,
   nunca cambia) + "Deseleccionar todo"; fila 2 = "Seleccionar campo"/
   "Nuevo valor" a la izquierda, "Aplicar"/"Eliminar" a la derecha. */
/* Fondo blanco, no morado suave, y separación propia del calendario de
   debajo (21/08/2026, a petición expresa). */
.er-barra-accion {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 1.25rem;
    margin-bottom: 1.5rem;
    padding: 14px 16px;
    background-color: #ffffff;
    border: 1px solid var(--scout-global-borde);
    border-radius: var(--radio-aviso);
}

.er-barra-fila-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.er-barra-fila-controles {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.er-barra-controles-izq,
.er-barra-controles-der {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.er-barra-accion select,
.er-barra-accion input[type="text"] {
    padding: 8px 12px;
    border: 1px solid var(--scout-global-borde);
    border-radius: var(--radio-boton);
    font-family: inherit;
}

.er-barra-accion :disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Más pequeño y discreto (21/08/2026, a petición expresa) — antes
   heredaba el tamaño normal de párrafo y "--scout-global-texto" (un
   morado casi negro, muy marcado para ser solo una instrucción de
   apoyo). Gris oscuro neutro, no negro. */
.er-barra-accion #erl_conteo {
    font-weight: 500;
    font-size: 0.85rem;
    color: #4B5563;
}

/* --- Insignias de estado --- */
/* Padding recortado (21/08/2026, bug real encontrado: esta insignia, con
   su propio padding vertical + línea de texto, medía más alto que el
   resto de celdas de su fila — y al ser la más alta, era ELLA quien
   forzaba toda la fila a estirarse por encima del "height" pedido para
   la celda). */
.er-badge-estado {
    display: inline-block;
    padding: 1px 10px;
    border-radius: var(--radio-badge);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.4;
}

/* Mismos estados Activo/Cancelado que el resto de la web (20/08/2026,
   rediseño completo — variables --color-estado-* de style.css). */
.er-badge-normal {
    background-color: var(--color-estado-activo-fondo);
    color: var(--color-estado-activo-texto);
}

.er-badge-cancelado {
    background-color: var(--color-estado-cancelado-fondo);
    color: var(--color-estado-cancelado-texto);
}

/* --- Bloques por mes (calendario + lista de ese mes, uno debajo de otro) --- */
.er-meses-contenedor {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.er-mes-bloque {
    border: 1px solid var(--scout-global-borde);
    border-radius: var(--radio-aviso);
    overflow: hidden;
}

.er-mes-cabecera {
    background-color: var(--scout-global-fondo);
    color: var(--scout-global-oscuro);
    font-weight: 700;
    text-transform: capitalize;
    padding: 10px 16px;
    border-bottom: 1px solid var(--scout-global-borde);
}

.er-mes-interior {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    padding: 16px;
    align-items: flex-start;
}

/* El mini calendario ocupa un ancho fijo, la lista se lleva el resto del hueco */
.er-mini-calendario-tabla {
    width: 260px;
    flex-shrink: 0;
    border-collapse: collapse;
    table-layout: fixed;
    border: 1px solid var(--scout-global-borde);
    border-radius: var(--radio-aviso);
    overflow: hidden;
    box-shadow: var(--sombra-tarjeta);
}

.er-mini-calendario-tabla th {
    font-size: 0.8rem;
    color: var(--scout-global-oscuro);
    padding: 8px 0;
    font-weight: 700;
    background-color: color-mix(in srgb, var(--scout-global-base), white 82%);
    border-bottom: 1px solid var(--scout-global-borde);
}

/* Otro -25% (21/08/2026, a petición expresa: "aún se pueden reducir
   más") — de 35px a 26px; padding también recortado. */
.er-mini-calendario-tabla td {
    position: relative;
    text-align: center;
    padding: 2px 2px;
    vertical-align: top;
    height: 26px;
    font-size: 0.85rem;
    border: 1px solid color-mix(in srgb, var(--scout-global-borde), transparent 40%);
}

/* Sábado y domingo con un gris suave de fondo (21/08/2026, a petición
   expresa) — columnas 6 y 7, ya que "DIAS_SEMANA" empieza en Lunes (ver
   shortcode-listado-gestion.php). Excluye los días CON eventos y el
   seleccionado (":not(...)") — si no, al tener más especificidad que
   ".er-cal-con-eventos"/".er-cal-seleccionado" (una clase sola, sin
   :nth-child), este gris les ganaría la cascada y un sábado/domingo con
   reunión se vería gris en vez de con su morado de "tiene eventos". */
.er-mini-calendario-tabla td:nth-child(6):not(.er-cal-con-eventos):not(.er-cal-seleccionado),
.er-mini-calendario-tabla td:nth-child(7):not(.er-cal-con-eventos):not(.er-cal-seleccionado) {
    background-color: #F3F4F6;
}

.er-cal-numero {
    color: var(--scout-global-texto);
}

.er-cal-hoy .er-cal-numero {
    font-weight: 700;
    color: var(--scout-global-base);
}

.er-cal-con-eventos {
    cursor: pointer;
    background-color: var(--scout-global-fondo);
    border: 1px solid var(--scout-global-borde);
}

.er-cal-con-eventos:hover {
    background-color: color-mix(in srgb, var(--scout-global-base), white 88%);
}

/* Posición absoluta (21/08/2026, bug real encontrado: "las filas del
   almanaque son ligeramente más altas que las de la lista") — antes era
   un <div> normal, apilado EN EL FLUJO justo debajo del número de día,
   así que cualquier semana con algún día marcado sumaba su alto
   (line-height + margin-top) a toda la fila — de ahí que solo esas
   semanas concretas salieran más altas que las demás y que las de la
   lista. Sacado del flujo y anclado al borde inferior de la celda
   (".er-mini-calendario-tabla td" ya lleva "position:relative" más
   arriba): ya no aporta altura propia, todas las filas miden lo mismo la
   tengan o no. Tamaño reducido (0.6rem → 0.5rem) y pegado a "bottom: 0"
   (21/08/2026, a petición expresa: se veía pegado al número de día) — el
   hueco real bajo el número en una celda de 26px es de apenas ~4-5px, así
   que no cabe centrarlo sin solaparse un poco con el número; encogerlo
   deja más aire visible hacia el borde inferior sin tocar el alto de fila. */
.er-cal-indicador {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.5rem;
    line-height: 1;
    color: var(--scout-global-base);
    font-weight: 700;
}

.er-cal-seleccionado {
    background-color: color-mix(in srgb, var(--scout-global-base), white 75%) !important;
    border: 1px solid var(--scout-global-base) !important;
}

/* Lista de reuniones del mes, a la derecha del mini calendario.
   "margin-top:0" (21/08/2026, bug real encontrado: "el calendario y el
   listado de ese mes están desalineados, el listado sale más bajo") —
   esta tabla comparte la clase ".er-tabla" con la tabla de revisión de
   fechas de "Crear" (que sí necesita separarse del resumen de arriba con
   "margin-top:1rem"), pero aquí vive al lado del mini calendario en una
   fila flex con "align-items:flex-start" — ese mismo margen la empujaba
   16px hacia abajo mientras el calendario, sin margen propio, se quedaba
   arriba del todo. */
.er-tabla-mes {
    flex: 1;
    min-width: 260px;
    font-size: 0.85rem;
    margin-top: 0;
}

/* Misma altura de cabecera y de fila que el mini calendario de al lado
   (21/08/2026, a petición expresa: "las columnas del calendario son
   ligeramente más altas que las del listado... tampoco coinciden las
   alturas del encabezamiento") — antes cada tabla fijaba su propio
   padding sin relación con la otra (calendario: "8px 0"/"6px 2px" +
   "height:46px" en content-box; listado: "10px 12px" sin altura propia),
   así que sus filas nunca coincidían por casualidad. "box-sizing:
   border-box" + una "height" total igual en las dos, en vez de dejar que
   el padding decida el alto — así da igual que el padding lateral siga
   siendo distinto (el calendario necesita menos, es solo un número). */
.er-mini-calendario-tabla th,
.er-tabla-mes th {
    box-sizing: border-box;
    height: 36px;
}

/* "height" en una celda de tabla es un MÍNIMO, no un valor fijo — el
   navegador no puede encoger por debajo de lo que el padding + el texto
   necesiten de verdad. Con el padding de fábrica de ".er-tabla th"
   (10px arriba/abajo) el contenido pedía más de 36px y el "height" de
   arriba quedaba sin efecto real (comprobado en vivo: 40px en vez de
   36px). Menos padding vertical aquí es lo que de verdad lo encoge, no
   el número de "height" por sí solo. */
.er-tabla-mes th {
    padding-top: 8px;
    padding-bottom: 8px;
}

/* Otro -25% (21/08/2026, "aún se pueden reducir más") — de 36px a 26px,
   mismo valor final que el mini calendario. Padding recortado otra vez
   (5px a 2px) por el mismo motivo de siempre. */
.er-tabla-mes td {
    padding-top: 2px;
    padding-bottom: 2px;
}

.er-mini-calendario-tabla td,
.er-tabla-mes td {
    box-sizing: border-box;
    height: 26px;
}

/* --- Responsive: en pantallas estrechas, calendario y lista se apilan ---
   22/08/2026, a petición expresa: "Panel de Kraal/Eventos Recurrentes/
   calendario y listado... mucho espacio desaprovechado en los
   laterales... caja dentro de caja dentro de caja... aprovechemos al
   máximo el ancho de una pantalla de móvil". Solo móvil, escritorio sin
   tocar. Antes, apilados en columna, un mes cualquiera acumulaba TRES
   marcos anidados uno dentro de otro: ".er-mes-bloque" (borde, el marco
   del mes) > ".er-mes-interior" (16px de relleno en los 4 lados) >
   ".er-mini-calendario-tabla" (su propio borde+radio+sombra) — cada uno
   restando ancho útil sin aportar nada que el de fuera no diera ya. Se
   deja UN solo marco visible por mes (el de ".er-mes-bloque", ya
   suficiente para separar un mes del siguiente al desplazarse) y se
   recorta el relleno interior a la mitad. */
@media (max-width: 640px) {
    .er-mes-interior {
        flex-direction: column;
        /* A 0 (22/08/2026, a petición expresa) — sin relleno propio, el
           calendario y el listado quedan a ras del borde de
           ".er-mes-bloque", que ya es el único marco que queda por mes
           (ver comentario de arriba). El "gap" entre calendario y listado
           se mantiene: no es relleno contra el borde, es la separación
           entre los dos bloques de contenido entre sí. */
        padding: 0;
        gap: 0.75rem;
    }
    .er-mini-calendario-tabla {
        width: 100%;
        /* Sin marco propio (redundante encima del de ".er-mes-bloque" que
           ya lo envuelve todo, ver comentario de arriba) — el propio
           color de fondo de sábado/domingo y el borde fino de cada celda
           ya bastan para leer la rejilla sin un marco extra alrededor. */
        border: none;
        border-radius: 0;
        box-shadow: none;
    }
    /* Menos relleno lateral por celda (12px de fábrica, heredado de
       ".er-tabla td" — pensado para una tabla ancha de escritorio, no
       para una columna estrecha apilada debajo del calendario). Vertical
       sin tocar (2px, ya recortado antes para igualar alturas con el
       calendario). */
    .er-tabla-mes td,
    .er-tabla-mes th {
        padding-left: 6px;
        padding-right: 6px;
    }
    /* Misma barra de selección (arriba de los meses): menos relleno
       lateral, mismo criterio que ".panel-admin-chrome"/
       ".panel-kraal-contenido" (css/paneles-scout-tabla.css). */
    .er-barra-accion {
        padding: 12px 8px;
    }
    /* Cabecera de cada mes ("Agosto 2026"): mismo relleno lateral que
       ".er-mes-interior" de aquí abajo, para que quede alineada con el
       contenido y no más indentada que él. */
    .er-mes-cabecera {
        padding: 8px;
    }
}