:root {
    --verde: #3fa842;
    --verde-hover: #359239;
    --verde-oscuro: #1c5c2e;
    --verde-pastel: rgba(63, 168, 66, 0.14);
    --negro-verdoso: #16221a;
    --negro-verdoso-2: #1d2f24;
    --blanco: #ffffff;
    --fondo: #eef1ed;
    --borde: #d3dbd0;
    --gris-oscuro: #202620;
    --gris-texto: #333333;
    --gris-muted: #767676;
    --rojo: #c0392b;
    --rojo-fondo: #fbeaea;
    --radio: 12px;
    --sombra: 0 4px 18px rgba(0, 0, 0, 0.07);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
    color: var(--gris-texto);
    background: var(--fondo);
}

a {
    text-decoration: none;
    color: inherit;
}

/* ---------- Login ---------- */
.admin-login-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--negro-verdoso), var(--verde-oscuro));
}

.login-box {
    background: var(--blanco);
    padding: 40px;
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    width: 100%;
    max-width: 360px;
    text-align: center;
}

.login-logo {
    max-width: 120px;
    margin-bottom: 16px;
}

.login-box h1 {
    font-size: 1.2rem;
    margin: 0 0 20px;
    color: var(--negro-verdoso);
}

.login-box form {
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 6px;
}

.login-box label {
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 10px;
}

/* ---------- Formularios generales ---------- */
/* El contraste general era muy bajo (bordes casi blancos, labels sin
   ningún estilo propio) y el usuario reportó que los campos de un
   formulario se veían como "palabras sueltas" sin agrupar. Fix en 2
   frentes: 1) las etiquetas ahora tienen color/peso propios y quedan
   PEGADAS a su campo (margin-bottom chico), mientras que el espacio ENTRE
   un campo y el siguiente es más grande (ver ".admin-form-grid" más abajo)
   — así el ojo agrupa label+input como una sola unidad, separada de la
   unidad vecina. 2) los inputs pasan a tener un borde bien visible (antes
   `--borde` era casi blanco) y un estado ":focus" claro. */
.admin-form-grid label:not(.admin-checkbox-item),
.admin-card > form > label,
.login-box label {
    display: block;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--verde-oscuro);
    margin-bottom: 7px;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="datetime-local"],
input[type="file"],
input[type="number"],
select,
textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid var(--borde);
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--gris-texto);
    background: var(--blanco);
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="datetime-local"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--verde);
    box-shadow: 0 0 0 3px var(--verde-pastel);
}

textarea {
    resize: vertical;
    min-height: 120px;
}

/* ---------- Editor visual (CKEditor) ---------- */
/* El "classic build" del CDN no limita el tamaño de las imágenes dentro
   del área de edición por su cuenta, así que se fuerza acá: nunca más
   ancho que el editor, alto máximo con scroll para que una imagen enorme
   no desarme el layout de la página del admin. Aplica a cualquier campo
   que use el editor (noticias, páginas institucionales, y lo que se
   agregue después), porque todas comparten admin/includes/editor.php. */
.ck-editor__editable_inline img {
    max-width: 100% !important;
    height: auto !important;
}

.ck.ck-editor__editable_inline {
    max-height: 520px;
    overflow-y: auto;
}

/* Tamaños fijos de imagen (reemplazo casero del redimensionado con manijas,
   que tampoco viene en el build del CDN). Mismas clases se usan en el sitio
   público (ver style.css) para que el tamaño elegido se vea igual ahí.
   CONFIRMADO por consola (14/07) que la clase SÍ se aplica bien al <figure>
   real dentro del editor — el problema era que ".ck-content"/".ck-editor__editable"
   no son el contenedor real acá (el que sí funciona es ".ck-editor__editable_inline",
   ver regla de más arriba), así que se apunta directo a la clase propia, sin
   depender de ningún ancestro, para no volver a errarle al nombre. */
.img-tamano-chica {
    width: 25% !important;
}

.img-tamano-mediana {
    width: 50% !important;
}

.img-tamano-grande {
    width: 75% !important;
}

.img-tamano-completa {
    width: 100% !important;
}

.ck-editor__editable_inline hr {
    border: none;
    border-top: 2px solid var(--borde);
    margin: 16px 0;
}

/* Marcador de bloque embebido (galería/video/archivo) dentro de la vista
   en vivo del editor: no se puede mostrar el contenido real ahí (recién se
   arma en el sitio público), así que se ve como una tarjeta con etiqueta. */
.bloque-embebido-editor {
    display: block;
    padding: 14px 16px;
    margin: 10px 0;
    background: var(--fondo);
    border: 1px dashed var(--borde);
    border-radius: 8px;
    color: var(--gris-muted);
    font-size: 0.88rem;
}

/* ---------- Barra de herramientas extra (debajo de la toolbar de CKEditor) ---------- */
/* admin/includes/editor.php la reubica por JS justo entre `.ck-editor__top`
   (la toolbar nativa) y `.ck-editor__main` (el área de texto), para que
   quede pegada debajo de las herramientas de texto y no debajo de todo el
   cuadro — así lo pidió el usuario. Es una franja intermedia dentro de la
   misma caja de CKEditor, por eso sin bordes redondeados propios (los
   redondeados de las puntas ya los ponen la toolbar arriba y el área de
   texto abajo) y con un borde superior/inferior finito para separarla
   visualmente de ambas. Íconos en vez de botones de texto (más
   minimalista); lo que necesita varias opciones (tamaño de imagen, galería,
   video, archivo) se abre en un popover chiquito en vez de ocupar espacio
   siempre visible. */
.editor-toolbar-extra {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    padding: 5px 8px;
    background: var(--fondo);
    border-top: 1px solid var(--borde);
    border-bottom: 1px solid var(--borde);
    position: relative;
}

.ete-grupo {
    display: flex;
    align-items: center;
    gap: 2px;
    position: relative;
}

.ete-div {
    width: 1px;
    height: 22px;
    background: var(--borde);
    margin: 0 6px;
}

.ete-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--gris-texto);
    border-radius: 6px;
    cursor: pointer;
}

.ete-btn svg {
    width: 18px;
    height: 18px;
}

.ete-btn:hover {
    background: var(--blanco);
    color: var(--verde-hover);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.ete-popover-wrap {
    position: relative;
}

.ete-popover {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 30;
    width: 240px;
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(20, 30, 20, 0.16);
    padding: 14px;
}

.ete-popover.abierto {
    display: block;
}

.ete-popover-titulo {
    margin: 0 0 10px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--gris-oscuro);
}

.ete-popover label {
    display: block;
    font-size: 0.74rem;
    color: var(--gris-muted);
    margin: 8px 0 4px;
}

.ete-popover input,
.ete-popover select {
    width: 100%;
    font-size: 0.82rem;
}

.ete-popover .admin-btn {
    margin-top: 10px;
    width: 100%;
    text-align: center;
    padding: 8px 14px;
    font-size: 0.84rem;
}

.ete-popover-chips {
    width: 200px;
}

.ete-chips {
    display: flex;
    gap: 6px;
}

.ete-chip {
    flex: 1;
    border: 1px solid var(--borde);
    background: var(--blanco);
    color: var(--gris-texto);
    padding: 7px 0;
    border-radius: 6px;
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
}

.ete-chip:hover {
    background: var(--verde-pastel);
    border-color: var(--verde);
    color: var(--verde-hover);
}

/* El popover de galería tiene más campos que los demás (tipo, tamaño,
   fotos actuales, subir nuevas) — necesita más ancho. */
.panel-bloque-galeria {
    width: 280px;
}

.bloque-galeria-fotos-actuales {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0;
}

.bloque-galeria-fotos-actuales:empty {
    margin: 0;
}

.bloque-galeria-miniatura {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 6px;
    overflow: hidden;
}

.bloque-galeria-miniatura img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bloque-galeria-miniatura-quitar {
    position: absolute;
    top: 0;
    right: 0;
    width: 18px;
    height: 18px;
    border: none;
    background: rgba(0, 0, 0, 0.65);
    color: var(--blanco);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    border-radius: 0 0 0 6px;
}

.bloque-galeria-miniatura-quitar:hover {
    background: var(--rojo);
}

.bloque-archivo-actual-nota {
    font-weight: 400;
    font-style: italic;
    text-transform: none;
    color: var(--gris-muted);
}

/* Lista de bloques ya insertados en el texto (galería/video/archivo), con
   Editar/Quitar — vive debajo de todo el editor, no adentro de la barra de
   íconos (no entra ahí, y tampoco tendría sentido angosto). */
.ete-bloques-lista {
    margin-top: 10px;
    padding: 12px 14px;
    background: var(--fondo);
    border: 1px solid var(--borde);
    border-radius: 10px;
}

.ete-bloques-lista-titulo {
    margin: 0 0 8px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--gris-oscuro);
}

.ete-bloques-lista-vacio {
    margin: 0;
    font-size: 0.82rem;
    color: var(--gris-muted);
}

.ete-bloques-lista-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
}

.ete-bloques-lista-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--borde);
    font-size: 0.85rem;
}

.ete-bloques-lista-item:last-child {
    border-bottom: none;
}

.ete-bloques-lista-acciones {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.ete-bloques-lista-acciones .admin-btn {
    padding: 5px 12px;
    font-size: 0.78rem;
}

.bloque-embebido-estado {
    display: block;
    margin-top: 8px;
    font-size: 0.78rem;
    color: var(--gris-muted);
}

.admin-btn {
    display: inline-block;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    text-align: center;
}

.admin-btn-primary {
    background: var(--verde);
    color: var(--blanco);
    margin-top: 20px;
}

.admin-btn-primary:hover {
    background: var(--verde-hover);
}

.admin-btn-secundario {
    background: var(--borde);
    color: var(--gris-texto);
}

.admin-btn-peligro {
    background: var(--rojo);
    color: var(--blanco);
}

.admin-alert {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.9rem;
    margin-bottom: 14px;
}

.admin-alert-error {
    background: var(--rojo-fondo);
    color: var(--rojo);
}

.admin-alert-ok {
    background: rgba(63, 168, 66, 0.12);
    color: var(--verde-oscuro);
}

/* ---------- Layout panel ---------- */
.admin-wrap {
    display: flex;
    min-height: 100vh;
}

.admin-sidebar {
    width: 230px;
    flex-shrink: 0;
    background: var(--negro-verdoso);
    color: var(--blanco);
    padding: 20px 0;
}

.admin-sidebar .logo-area {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 20px 20px;
    border-bottom: 1px solid var(--negro-verdoso-2);
}

.admin-sidebar .logo-area img {
    width: 36px;
}

.admin-sidebar nav {
    display: flex;
    flex-direction: column;
    padding-top: 10px;
}

.admin-sidebar nav a {
    padding: 12px 20px;
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.85);
    border-left: 3px solid transparent;
}

.admin-sidebar nav a:hover {
    background: rgba(255, 255, 255, 0.06);
}

.admin-sidebar nav a.activo {
    background: rgba(255, 255, 255, 0.08);
    border-left-color: var(--verde);
    color: var(--blanco);
    font-weight: 600;
}

.admin-main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.admin-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--blanco);
    padding: 14px 30px;
    border-bottom: 1px solid var(--borde);
}

.admin-topbar .usuario-info {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 0.9rem;
}

.admin-content {
    padding: 30px;
}

.admin-content h1 {
    margin-top: 0;
    color: var(--negro-verdoso);
    font-size: 1.4rem;
}

.admin-card {
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 24px;
    margin-bottom: 24px;
}

.admin-card h1,
.admin-card h2 {
    padding-bottom: 14px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--borde);
}

/* ---------- Tablas ---------- */
table.admin-tabla {
    width: 100%;
    border-collapse: collapse;
}

table.admin-tabla th,
table.admin-tabla td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--borde);
    font-size: 0.9rem;
    vertical-align: middle;
}

table.admin-tabla th {
    color: var(--gris-muted);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
}

/* La columna de acciones (Vista previa/Editar/Borrar) no tenía ancho
   propio, así que con `table.admin-tabla{width:100%}` el espacio libre de
   la fila se lo quedaba esa columna (con el header vacío), dejando un hueco
   enorme a la izquierda de los botones (quedaban "flotando" lejos de
   FECHA). Con la columna anterior limitada a un ancho razonable y los
   botones alineados a la derecha del espacio que les toca, quedan pegados
   al borde derecho de la tarjeta, sin hueco. */
table.admin-tabla td:first-child {
    max-width: 380px;
}

.admin-acciones {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    flex-wrap: nowrap;
    white-space: nowrap;
}

/* El botón "Borrar" viene envuelto en un <form> (necesita mandar su propio
   POST) — ese <form> es un bloque, y como hijo directo de un flex container
   se comportaba raro (rompía el orden visual y forzaba el wrap de los
   otros botones). "display:contents" lo saca del árbol de layout sin
   sacarlo del DOM: el <button> de adentro pasa a ser un ítem flex directo,
   igual que los demás botones. */
.admin-acciones form {
    display: contents;
}

.admin-acciones .admin-btn {
    padding: 6px 14px;
    font-size: 0.8rem;
    flex-shrink: 0;
}

table.admin-tabla svg {
    width: 22px;
    height: 22px;
    color: var(--verde);
}

.admin-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.admin-badge-verde {
    background: rgba(63, 168, 66, 0.12);
    color: var(--verde-oscuro);
}

.admin-badge-gris {
    background: var(--borde);
    color: var(--gris-muted);
}

.admin-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 26px;
    column-gap: 24px;
}

.admin-form-grid .full {
    grid-column: 1 / -1;
}

.admin-campo-ayuda {
    margin: 6px 0 0;
    font-size: 0.78rem;
    font-style: italic;
    color: var(--gris-muted);
}

.admin-checkbox-grupo {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.admin-checkbox-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
}

.admin-checkbox-item input {
    width: auto;
}

.dashboard-categoria {
    margin-bottom: 34px;
}

.dashboard-categoria h2 {
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--verde-oscuro);
    margin: 0 0 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--borde);
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 18px;
}

.dashboard-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    background: var(--blanco);
    border-radius: var(--radio);
    border: 1px solid var(--borde);
    box-shadow: var(--sombra);
    padding: 26px 18px;
    text-align: center;
    font-weight: 600;
    color: var(--negro-verdoso);
    transition: all 0.2s ease;
}

.dashboard-tile-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--verde-pastel);
    color: var(--verde-oscuro);
    transition: all 0.2s ease;
}

.dashboard-tile-label {
    font-size: 0.92rem;
    line-height: 1.3;
}

.dashboard-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    border-color: var(--verde);
}

.dashboard-tile:hover .dashboard-tile-icono {
    background: var(--verde);
    color: var(--blanco);
}

/* ---------- Toggle de sidebar (mobile) ---------- */
.admin-sidebar-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 22px;
    height: 16px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.admin-sidebar-toggle span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: var(--gris-texto);
}

.admin-sidebar-overlay {
    display: none;
}

/* ---------- Vista previa Escritorio/Celular ---------- */
.vista-previa-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.vista-previa-overlay.activo {
    display: flex;
}

.vista-previa-modal {
    background: var(--fondo);
    border-radius: var(--radio);
    width: 100%;
    max-width: 1300px;
    height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.vista-previa-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--blanco);
    border-bottom: 1px solid var(--borde);
}

.vista-previa-botones {
    display: flex;
    gap: 8px;
}

.vista-previa-botones button {
    border: 1px solid var(--borde);
    background: var(--blanco);
    color: var(--gris-texto);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.vista-previa-botones button.activo {
    background: var(--verde);
    border-color: var(--verde);
    color: var(--blanco);
}

.vista-previa-cerrar {
    background: none;
    border: none;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    color: var(--gris-muted);
}

.vista-previa-cuerpo {
    flex-grow: 1;
    overflow: auto;
    display: flex;
    justify-content: center;
    padding: 20px;
}

.vista-previa-cuerpo iframe {
    border: none;
    height: 100%;
    width: 100%;
    background: var(--blanco);
    box-shadow: var(--sombra);
    transition: width 0.2s ease;
}

.vista-previa-cuerpo iframe.ancho-celular {
    width: 390px;
    flex-shrink: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
    .admin-sidebar {
        position: fixed;
        top: 0;
        left: -260px;
        height: 100vh;
        width: 230px;
        z-index: 1001;
        transition: left 0.25s ease;
        overflow-y: auto;
    }

    .admin-sidebar.abierto {
        left: 0;
    }

    .admin-sidebar-overlay.activo {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 1000;
    }

    .admin-sidebar-toggle {
        display: flex;
    }

    .admin-topbar {
        padding: 14px 16px;
        gap: 12px;
    }

    .admin-titulo-topbar {
        font-size: 0.85rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .usuario-info span {
        display: none;
    }

    .admin-content {
        padding: 16px;
    }

    .admin-form-grid {
        grid-template-columns: 1fr;
    }

    .admin-card {
        padding: 16px;
        overflow-x: auto;
    }

    table.admin-tabla {
        min-width: 560px;
    }
}