.navDashboard{
    background: #ebeefb; 
    border-radius: 5px;
}

.nav a{
    color: #000;
}

.dashboardTable{
    font-size: 14px;
}

.dataTables_length{
    font-size: 14px;
}

.dataTables_info{
    font-size: 14px;
}

.dataTables_paginate{
    font-size: 14px;
}

.dataTables_filter{
    font-size: 14px;
    padding-bottom: 5px;
}

.paginate_button{
    padding: 0px!important;
}

/*.dataTables_wrapper .dataTables_paginate .paginate_button {
    font-size: 14px;
    padding: 0px!important;
}*/


/* ---------------------------------------------------------------------------
   Layout propio del panel (views/layouts/dashboard.php).
   Antes usaba el layout público, con su menú completo, el descargo legal, el
   texto de la EPA, las redes sociales y nueve librerías que el panel no usa. */

.panel-body {
    background: #f6f7f9;
    min-height: 100vh;
}

/* =====================================================================
   ARMAZÓN: cabecera arriba, barra lateral a la izquierda, contenido al lado.

   Antes el panel se pintaba dentro de un `.container` de Bootstrap, con su tope
   de 1320 px. Medido en la pantalla de Eduardo, de 2462 px: **1142 px vacíos**,
   mientras la columna «Title» partía los títulos en tres líneas. Una tabla de
   gestión quiere todo el ancho que haya.
   ===================================================================== */

.panel-cabecera {
    background: #fff;
    border-bottom: 3px solid #f2849e;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
    /* Fija: con la barra lateral al lado, el contenido se desplaza mucho y perder la
       marca y el botón de salir al bajar es molesto. `sticky` y no `fixed` para no
       tener que compensar su alto con un padding en el cuerpo. */
    position: sticky;
    top: 0;
    z-index: 30;
}
.panel-cabecera-caja {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .5rem 1.25rem;
}
.panel-marca { display: flex; align-items: center; text-decoration: none; }

/* El botón del cajón. Solo en pantallas estrechas: lo esconde el media query de
   abajo a partir de 992 px. */
.panel-hamburguesa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    background: none;
    border: 1px solid #e4e7ea;
    border-radius: 8px;
    color: #585858;
    font-size: 20px;
    cursor: pointer;
}
.panel-hamburguesa:hover { background: #fdf2f5; border-color: #f2c2ce; color: #b3557a; }
.panel-hamburguesa:focus-visible { outline: 2px solid #f2849e; outline-offset: 2px; }

.panel-marco { display: flex; align-items: flex-start; }

/* min-width: 0 NO es opcional. Un hijo flex tiene `min-width: auto` por defecto, o
   sea que se niega a encoger por debajo del ancho de su contenido; con una tabla
   ancha dentro, la columna empuja y aparece scroll horizontal en TODA la página en
   vez de dentro del `.table-responsive`. */
.panel-columna {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    /* La cabecera es sticky y mide ~59 px: el resto de la altura es de esta columna,
       para que el pie quede abajo del todo aunque la sección tenga poco contenido. */
    min-height: calc(100vh - 59px);
}

/* --- la barra lateral --- */

.panel-lateral {
    flex: 0 0 236px;
    width: 236px;
    background: #fff;
    border-right: 1px solid #e4e7ea;
    /* Pegada bajo la cabecera y con scroll propio: si el panel llega a tener muchas
       secciones, se desplazan ellas y no la página entera. */
    position: sticky;
    top: 59px;
    height: calc(100vh - 59px);
    overflow-y: auto;
    padding: 1.25rem 0;
    z-index: 20;
}

.lateral-rotulo {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #9aa5b1;
    margin: 0 0 .4rem;
    padding: 0 1.25rem;
}
.lateral-rotulo:not(:first-child) { margin-top: 1.5rem; }

.lateral-lista { list-style: none; margin: 0 0 0; padding: 0; }

.lateral-enlace {
    display: flex;
    align-items: center;
    gap: .7rem;
    /* 42 px de alto: pulsable con el dedo cuando esto es el cajón del móvil. */
    padding: .6rem 1.25rem;
    color: #6c7d8e;
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
    /* El borde va siempre, transparente, para que al activarse no se muevan 3 px. */
    border-left: 3px solid transparent;
    transition: background .15s, color .15s;
}
.lateral-enlace i { font-size: 16px; width: 18px; text-align: center; flex: 0 0 auto; }
.lateral-enlace:hover { background: #f6f7f9; color: #585858; }
.lateral-enlace:focus-visible { outline: 2px solid #f2849e; outline-offset: -2px; }

.lateral-activo,
.lateral-activo:hover {
    background: #fdf2f5;
    color: #b3557a;
    border-left-color: #f2849e;
}

/* El velo del cajón. Fuera de móvil no existe. */
.panel-velo { display: none; border: 0; padding: 0; }
.panel-titulo {
    margin-left: .6rem;
    font-weight: bold;
    color: #585858;
    font-size: 17px;
}
.panel-etiqueta {
    font-weight: normal;
    color: #6c7d8e;
    font-size: 13px;
    border-left: 1px solid #d6d6d6;
    padding-left: .5rem;
    margin-left: .35rem;
}
/* El nombre de usuario ahora es el enlace a «My profile»: tiene que parecer pulsable
   sin gritar. Padding para que el área de pulsación llegue a los 32 px de alto. */
.panel-usuario {
    font-size: 13px;
    color: #6c7d8e;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .6rem;
    border-radius: 999px;
    transition: background .15s, color .15s;
}
.panel-usuario:hover { background: #fdf2f5; color: #b3557a; }
.panel-usuario:focus-visible { outline: 2px solid #f2849e; outline-offset: 2px; }

/* =====================================================================
   El contenido, a lo ancho.

   Las vistas del panel envuelven todo en `.container > .row > .col-lg-12`. En vez
   de tocar las siete vistas, se le quita el tope AQUÍ, dentro del panel: el
   `.container` de Bootstrap sigue siendo `.container` en el sitio público.

   Con un techo, eso sí: a partir de cierto ancho una fila de tabla se vuelve
   ilegible porque el ojo pierde el renglón entre la primera columna y la última.
   2100 px aprovecha casi entero un monitor como el de Eduardo (2462) y sigue
   poniendo un límite a los ultrapanorámicos de 5120.
   ===================================================================== */
.panel-columna .container,
.panel-columna .container-fluid {
    max-width: 2100px;
    width: 100%;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.panel-contenido { flex: 1 0 auto; padding-top: 1.25rem; }
/* El layout público empujaba el contenido 100 px por su cabecera fija. Aquí la
   cabecera no es fija, así que ese margen sobra: si alguna vista lo trae puesto,
   se neutraliza. */
.panel-contenido #dashboard { margin-top: 0 !important; }

.panel-pie {
    background: #fff;
    border-top: 1px solid #e4e4e4;
    color: #6c7d8e;
    margin-top: 2rem;
}

/* Aquí estaban los estilos de `.navDashboard`, las pestañas horizontales que iban
   encima de cada sección. Se fueron con ellas: la navegación es ahora la barra
   lateral (.panel-lateral). */

/* --- Cabecera de sección (views/dashboard/_seccion.php) --- */
.seccion-cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: .75rem;
}
.seccion-titulo {
    margin: 0;
    font-size: 24px;
    font-weight: bold;
    color: #585858;
}
.seccion-descripcion {
    margin: .25rem 0 0;
    font-size: 13px;
    color: #6c7d8e;
    max-width: 70ch;   /* una línea larga de texto se lee mal */
}
.seccion-acciones { display: flex; gap: .4rem; flex-wrap: wrap; }

/* --- Tarjeta que envuelve cada tabla --- */
.panel-tarjeta {
    background: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 6px;
    padding: .75rem 1rem 1rem;
    margin-top: .5rem;
}
.panel-tarjeta .table { margin-bottom: 0; }

/* Las celdas de acciones: botones pequeños que no rompan la fila. */
.dashboardTable td .btn { margin: 1px 0; white-space: nowrap; }
.dashboardTable td { vertical-align: middle; }

/* La columna de categorías puede ser larguísima (16 valores): se acota para que no
   empuje al resto de la tabla fuera de la pantalla. */
.dashboardTable td:nth-child(2) { max-width: 32ch; }

/* --- Ficha de un reporte (views/dashboard/report.php) --- */
.ficha-titulo { font-size: 20px; font-weight: bold; color: #585858; margin: 0 0 .75rem; }
.ficha-subtitulo {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6c7d8e;
    margin: 0 0 .6rem;
}
.ficha-datos { display: grid; grid-template-columns: minmax(90px, auto) 1fr; gap: .3rem .9rem; margin: 0 0 1rem; }
.ficha-datos dt { font-size: 12px; color: #6c7d8e; text-transform: uppercase; letter-spacing: .03em; }
.ficha-datos dd { margin: 0; font-size: 14px; color: #585858; }
.ficha-descripcion { font-size: 15px; line-height: 1.6; color: #585858; }
.ficha-etiqueta { font-size: 12px; color: #6c7d8e; margin: 0 0 .4rem; text-transform: uppercase; }
.ficha-imagenes { display: flex; flex-wrap: wrap; gap: .5rem; }
.ficha-imagenes img {
    height: 110px; width: auto; border-radius: 4px; border: 1px solid #e4e4e4;
}
.ficha-video { max-width: 100%; border-radius: 4px; }
.ficha-lista { margin: 0; padding-left: 1.1rem; font-size: 14px; }

@media (max-width: 576px) {
    .ficha-datos { grid-template-columns: 1fr; gap: .1rem; }
    .ficha-datos dd { margin-bottom: .5rem; }
}

/* --- Migas de pan (views/layouts/dashboard.php) ---
   Existen porque los formularios de edición viven en otros controladores
   (reports/update, users/create...) y desde ahí no había forma de volver salvo el
   botón atrás del navegador. */
.panel-migas {
    background: #fff;
    border-bottom: 1px solid #e4e4e4;
    font-size: 13px;
}
.panel-migas ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin: 0;
    padding: .5rem 0;
}
.panel-migas li { color: #6c7d8e; }
.panel-migas li + li::before {
    content: '›';
    margin-right: .4rem;
    color: #c9c9c9;
}
.panel-migas a { color: #6c7d8e; text-decoration: none; }
.panel-migas a:hover { color: #f2849e; text-decoration: underline; }
.panel-migas li[aria-current="page"] { color: #585858; font-weight: 600; }

/* --- Edición en la propia tabla: estado y publicado ---
   Antes había que entrar al formulario para cambiar cualquiera de los dos. */

.celda-estado {
    min-width: 128px;
    font-size: 12px;
    border-left: 4px solid transparent;
    font-weight: 600;
}
/* El color va por estado, como la etiqueta que había antes. */
.celda-estado.estado-0 { border-left-color: #d9534f; color: #a33; }   /* Unresolved  */
.celda-estado.estado-1 { border-left-color: #e0a030; color: #8a6100; } /* In Progress */
.celda-estado.estado-2 { border-left-color: #25c481; color: #1b7d55; } /* Resolved    */

.celda-publicado { display: flex; align-items: center; gap: .4rem; margin: 0; padding-left: 2.2em; }
.celda-publicado .form-check-input { cursor: pointer; margin-left: -2.2em; }
.celda-publicado .form-check-input:checked { background-color: #25c481; border-color: #25c481; }
.celda-publicado .form-check-label { font-size: 12px; color: #6c7d8e; cursor: pointer; }

/* Aviso de guardado: un destello en la celda. Sin esto no hay forma de saber si el
   cambio llegó al servidor o se quedó en la pantalla. */
@keyframes celdaGuardada { from { background: #d7f5e6; } to { background: transparent; } }
@keyframes celdaFallida  { from { background: #ffd9d9; } to { background: transparent; } }
td.celda-guardada { animation: celdaGuardada 1.6s ease-out; }
td.celda-fallida  { animation: celdaFallida 1.6s ease-out; }

/* Mientras se guarda, el control no acepta más cambios. */
.celda-estado:disabled,
.celda-publicado .form-check-input:disabled { opacity: .55; cursor: progress; }


/* --- Acciones de las tablas, como iconos (components/Acciones.php) ---

   Sustituyen a los botones con texto. En la tabla de reportes eran CUATRO columnas
   —Update, View, Notes, Delete— repitiendo la misma palabra en cada fila; ahora es
   una sola columna.

   El área de pulsación se fija a 30x30 px: un icono suelto es un objetivo diminuto,
   y estas filas son `table-sm`. Es el mínimo con el que se acierta sin apuntar. */

.acciones {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    white-space: nowrap;
}

.accion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 4px;
    background: none;
    color: #6c7d8e;
    font-size: 15px;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .12s, color .12s, border-color .12s;
}

.accion:hover,
.accion:focus-visible {
    background: #f4f5f7;
    border-color: #dfe3e8;
    color: #585858;
    text-decoration: none;
}

/* El foco tiene que verse: sin texto, un icono enfocado sin marca no se distingue
   del de al lado, y estas acciones se recorren con el tabulador. */
.accion:focus-visible { outline: 2px solid #f2849e; outline-offset: 1px; }

/* Solo el borrado se colorea, y solo al apuntarlo: es la única acción que no se
   puede deshacer, y pintarla de rojo en cada fila convierte la tabla en un
   semáforo. */
.accion-delete:hover,
.accion-delete:focus-visible { background: #fdecec; border-color: #f5c2c2; color: #c9302c; }

.accion-unsubscribe:hover,
.accion-unsubscribe:focus-visible { background: #fff6e6; border-color: #f0d9a8; color: #8a6100; }

.accion-inerte {
    display: inline-block;
    min-width: 30px;
    text-align: center;
    font-size: 11px;
    color: #adb5bd;
}

/* Las cabeceras ya venían con class="centered" de la época de DataTables, pero esa
   clase **no estaba definida en ninguna hoja**: el título salía a la izquierda y el
   contenido de la celda centrado, cada uno por su lado. */
.dashboardTable th.centered { text-align: center; }


/* --- Indicador de adjuntos en la tabla de reportes ---
   Para saber de un vistazo qué reportes traen fotos, sin abrirlos uno a uno. */

.adjuntos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    white-space: nowrap;
    cursor: default;
}

/* Son <button>: abren el archivo en el visor. Hay que quitarles el aspecto de botón
   del navegador, pero NO el hecho de que se pulsan — de ahí el cursor y el hover. */
.adjunto {
    display: inline-flex;
    align-items: center;
    gap: .12rem;
    padding: 1px 5px;
    border: 1px solid transparent;
    border-radius: 3px;
    background: #f4f5f7;
    font-size: 12px;
    color: #6c7d8e;
    cursor: zoom-in;
    transition: filter .12s, border-color .12s;
}

.adjunto:hover { filter: brightness(.96); }
.adjunto:focus-visible { outline: 2px solid #f2849e; outline-offset: 1px; }

/* Los enlaces de la galería del visor: uno por archivo, solo para que
   querySelectorAll los encuentre. No se ven ni se tabulan. */
.adjuntos-enlaces { display: none; }

.adjunto .bi { font-size: 12px; }
.adjunto-n { font-weight: 600; font-size: 11px; }

/* Un color por tipo, para distinguirlos sin leer el número. */
.adjunto-1 { background: #eef4fb; color: #3d6c99; }   /* fotos      */
.adjunto-2 { background: #f3eefb; color: #6a4f99; }   /* vídeos     */
.adjunto-3 { background: #f1f3f5; color: #5f6b76; }   /* documentos */

/* Bloque para que el guion quede centrado bajo la cabecera, igual que los
   indicadores de las filas que sí traen adjuntos. */
.adjuntos-ninguno { display: block; text-align: center; color: #ced4da; cursor: default; }




/* =====================================================================
   MÓVIL Y TABLETA: la barra lateral se convierte en cajón.

   236 px fijos de navegación en un móvil de 375 se comerían dos tercios del ancho.
   El corte está en 992 px, que es donde la tabla de reportes deja de caber cómoda
   junto a la barra.
   ===================================================================== */

@media (max-width: 991.98px) {

    .panel-lateral {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        height: 100%;
        width: 270px;
        flex-basis: 270px;
        padding-top: 1rem;
        z-index: 60;
        box-shadow: 4px 0 20px rgba(0,0,0,.12);

        /* Se saca de la pantalla con translate y NO con `left`: translate lo anima la
           tarjeta gráfica, sin recalcular la maquetación en cada fotograma.

           `visibility: hidden` además de la traslación: un elemento solo trasladado
           sigue siendo enfocable, así que tabulando desde la cabecera se caía dentro
           de un menú invisible y el foco desaparecía de la pantalla. */
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform .22s ease, visibility .22s;
    }

    .panel-lateral.lateral-abierta {
        transform: translateX(0);
        visibility: visible;
    }

    .panel-velo {
        display: block;
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        background: rgba(30,38,46,.45);
        z-index: 50;
        cursor: pointer;
        opacity: 0;
        visibility: hidden;
        transition: opacity .22s, visibility .22s;
    }
    .panel-velo.velo-visible { opacity: 1; visibility: visible; }

    /* Con el cajón abierto no se desplaza la página de debajo. */
    .panel-body.lateral-fijada { overflow: hidden; }

    .panel-columna { min-height: calc(100vh - 55px); }

    .panel-columna .container,
    .panel-columna .container-fluid { padding-left: 1rem; padding-right: 1rem; }

    .panel-cabecera-caja { padding: .5rem .75rem; gap: .5rem; }

    /* La etiqueta «Dashboard» junto al logo sobra cuando el ancho aprieta. */
    .panel-etiqueta { display: none; }
}

@media (min-width: 992px) {
    /* En escritorio no hay cajón: la barra está siempre y el botón no pinta nada. */
    .panel-hamburguesa { display: none; }
}

@media (max-width: 575px) {
    /* El nombre de usuario se queda en el icono: el texto empuja fuera al botón de
       salir, que es el que no puede faltar. */
    .panel-usuario span,
    .panel-titulo { display: none; }
    .panel-cabecera-caja { gap: .35rem; }
}


/* =====================================================================
   FORMULARIOS del panel.

   Al soltarle el ancho al contenido, los formularios se lo tomaron entero: en la
   pantalla de Eduardo el campo «Password» de «New user» medía **1750 px**. Un campo
   así no se lee como un campo, y el ojo tiene que recorrer media pantalla para ir de
   la etiqueta al final del recuadro.

   No afecta a las tablas: los filtros de las tablas los construye web/js/tabla.js
   directamente en las celdas, no van dentro de ningún <form>. Comprobado.
   ===================================================================== */

.panel-contenido form { max-width: 46rem; }

/* El de editar un reporte es la excepción: lleva mapa, adjuntos y dos columnas, así
   que con 46rem se ahoga. */
.panel-contenido .reports-form { max-width: 72rem; }

/* Los formularios que son solo un botón —borrar, publicar— no se acotan: son parte
   de una fila o de una barra de acciones y el tope les rompería la colocación. */
.panel-contenido .seccion-acciones form,
.panel-contenido td form,
.panel-contenido .tabla-acciones form { max-width: none; }