/*<editor-fold defaultstate="collapsed" desc="VARIABLES GLOBALES">*/
:root{
    /* Gamas color principal */
    --color-fondo-aplicacion: #F1F5F8;
    --color-principal: #108FCF;
    --color-principal-oscuro: #0054A1;
    --color-principal-claro: #EDF3FB;/*BBE0F3*/
    --color-iconos: #6BA3BF;

    --color-blanco: #FFFFFF;
    --color-verde: #2F8935;
    --color-verde-claro: #D9F5DA;
    --color-rojo: #EF4444;
    --color-rojo-claro: #FFCDD2;

    --color-gris-muy-claro: #F0F0F0;
    --color-gris-claro: #E8E8E8;
    --color-gris: #E1E2E1;
    --color-gris-oscuro: #C5C5C5;
    --color-gris-muy-oscuro: #808080;

    --color-componente-gris-oscuro: #495057;
    --color-componente-gris-claro: #CED4DA;
    --color-componente-label: #7F7F7F;
    --color-componente-enlace: #108FCF; /*#2196F3;*/
    --color-componente-destacado:#0D7CB4;

    --color-texto:#495057;
    --color-texto-oscuro:#111827;
    --color-texto-secundario:#6C757D;

    --color-boton-peligro: #EF4444;

    --sombra: 1px 1px 5px 2px rgba(100, 116, 139, 0.16);

}
/*</editor-fold>*/

html, body,.pagina,.pagina-no-menu {
    margin:0;
    height:100%;
}

.pagina {
    display: grid;
    grid-template-rows: 60px auto 20px;
    align-items: stretch;
    align-content: stretch;
    background-color:var(--color-fondo-aplicacion);
}

.cabecera {
    padding:12px;
    background-color:var(--color-principal);
}
.cabecera, .cabecera .ui-widget {
    color: var(--color-blanco);
}

.contenido {
    padding:5px 10px 5px 10px;
    overflow: auto;
}

@media (min-width: 640px) {
    .contenido {
        padding:10px 30px 10px 30px;
    }
}

.footer {
    background-color:var(--color-principal);
    color: var(--color-blanco);
}

.form-principal {
    height: 100%;
}

/* Dashboard */
.dashboard {
    display: grid;
    gap: 1rem;
    padding-bottom: 1rem;
}

/* Móvil */
.dashboard {
    grid-template-columns: 1fr;
}

/* Escritorio */
@media (min-width: 768px) {
    .dashboard {
        grid-template-columns: repeat(3, 1fr);
    }

    .dashboard > .dashboard-full {
        grid-column: 1 / -1;
    }
}

.dashboard-panel-content{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding:1rem;
    min-height:260px;
}

.dashboard-panel-header{
    padding:1rem;
    border-bottom:1px solid var(--color-gris-claro);
}

/*<editor-fold defaultstate="collapsed" desc="FONTS">*/
@font-face {
    font-family: "GothamBook";
    src: url("/jakarta.faces.resource/fonts/GothamBook.ttf.xhtml");
}
@font-face {
    font-family: "GothamBold";
    src: url("/jakarta.faces.resource/fonts/GothamBold.ttf.xhtml");
}
/*</editor-fold>*/

/*<editor-fold defaultstate="collapsed" desc="TIPOGRAFÍA">*/

/* Títulos Login */
.login-h1 {
    font-family: GothamBold;
    letter-spacing: 6px !important;
    font-size: 80px !important;
    color: var(--color-blanco) !important;
}

body .ui-widget .login-h2 {
    font-family: GothamBook;
    letter-spacing: 10px;
    font-size: 40px;
    color: var(--color-blanco);
}

@media (max-width: 764px) {
    .login-h1{
        font-size: 50px !important;
    }
    .login-h2{
        font-size: 25px !important;
    }
}

@media (max-width: 558px) {
    .login-h1{
        font-size: 32px !important;
    }
    .login-h2{
        font-size: 16px !important;
    }
}
@media (max-width: 362px) {
    .login-h1{
        font-size: 24px !important;
    }
    .login-h2{
        font-size: 12px !important;
    }
}

/* Títulos de página y código del panel principal */
body .ui-widget .header-1 {
    font-style: normal;
    font-weight: 600;
    font-size: 28px;
    color: var(--color-texto);
}

/* Títulos de panel o card */
/* Si se cambia este estilo, se debe cambiar tambien "body .ui-panel .ui-panel-titlebar"*/
body .ui-widget .header-2 {
    font-style: normal;
    font-weight: 700;
    font-size: 21px;
    color: var(--color-texto);
}
body .ui-widget .header-2-oscuro {
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    color: var(--color-texto-oscuro);
}

body .ui-widget .header-3 {
    font-size: 18px !important;
    font-weight: 700;
    color: var(--color-texto);
}

.label{
    color: var(--color-componente-label);
    font-size: 10.5px !important;
    letter-spacing: 0.05em;
    font-weight: 500;
}

.campo-lectura {
    color: var(--color-texto);
    font-weight: 400;
    white-space: pre-wrap;
}

.campo-lectura-negrita {
    font-weight:600;
    color: var(--color-texto);
    white-space: pre-wrap;
}

.titulo-entidad-datatable {
    font-weight: bold;
    color: var(--color-principal);
}
/*</editor-fold>*/

/*<editor-fold defaultstate="collapsed" desc="SCROLL BAR">*/
/* Firefox */
* {
    scrollbar-width: auto;
    scrollbar-color: #dbdbdb #ffffff;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    width: 16px;
}

*::-webkit-scrollbar-track {
    background: #ffffff;
}

*::-webkit-scrollbar-thumb {
    background-color: #dbdbdb;
    border-radius: 10px;
    border: 3px solid #ffffff;
}
/*</editor-fold>*/

/*<editor-fold defaultstate="collapsed" desc="GRIDS LAYOUTS (para distribución de página)">*/
[class*="grid-layout"] {
    height: 100%;
    padding-bottom:1rem;
    display:grid;
    gap:1rem;
    grid-template-columns: repeat(1, 1fr);
}
[class*="grid-layout"] > div {
    grid-column-end: span 1;
}

/* Layout 1-1-2 */
@media (min-width: 640px) {
    .grid-layout-1-1-2 {
        grid-template-rows: max-content max-content auto;
        grid-template-columns:  minmax(200px, 430px) 1fr;
    }
    .grid-layout-1-1-2 > *:first-child {
        grid-column-end: span 2;
    }
    .grid-layout-1-1-2 > *:nth-child(2){
        grid-column-end: span 2;
    }
}

/* Layout Mosaico */
@media (min-width: 1080px) {
    .grid-layout-mosaico {
        grid-template-columns:  repeat(2, minmax(180px, 1fr))
    }
}
@media (min-width: 1300px) {
    .grid-layout-mosaico {
        grid-template-columns:  repeat(3, minmax(180px, 1fr))
    }
}
@media (min-width: 1600px) {
    .grid-layout-mosaico {
        grid-template-columns:  repeat(4, minmax(180px, 1fr))
    }
}

/* Layout listados */
@media (min-width: 640px) {
    .grid-layout-listado {
        grid-template-rows: min-content min-content 1fr;
    }
}

/* Layout Descripcion-Imagen */
@media (min-width: 640px) {
    .grid-layout-desc-imagen {
        grid-template-columns: auto minmax(200px, 430px);
        grid-template-rows: min-content min-content auto;
        padding:0;
    }

    .grid-layout-desc-imagen > :nth-child(3) {
        grid-column-end: span 2;
    }
    .grid-layout-desc-imagen > *:last-child {
        grid-column-end: span 2;
    }
}


/*</editor-fold>*/

/*<editor-fold defaultstate="collapsed" desc="GRIDS FORMs (para distribución de campos)">*/

[class*="grid-form"] {
    display: grid;
    gap: 0.5rem;
    align-items: baseline;
    padding: 0px 0px 0px 0px;
    grid-template-columns: auto;
}
@media (min-width: 640px) {
    .grid-form-1 {
        text-align: center;
        grid-template-columns: auto;
    }
    .grid-form-2 {
        grid-template-columns: max-content auto;
    }
    .grid-form-2-space-between {
        grid-template-columns: max-content auto;
        justify-content: space-between;
        align-items: center;
    }
    .grid-form-2-fixed {
        grid-template-columns: 130px auto;
    }
    .grid-form-3 {
        grid-template-columns: max-content max-content auto;
    }
    .grid-form-4 {
        grid-template-columns: max-content auto max-content auto;
    }
    .grid-form-6 {
        grid-template-columns: max-content auto max-content auto max-content auto;
    }
}
/*</editor-fold>*/

/*<editor-fold defaultstate="collapsed" desc="CARS">*/
body .ui-card .ui-card-title{
    border-bottom: 4px solid var(--color-principal);
}

body .ui-card .ui-card-body {
    height: inherit;
}

body .ui-card .ui-card-content {
    height: 90%; /* Se pone 90% por que se sabe que tiene de alto total el "card" de 15rem */
    padding: 0rem 0rem 1rem 0rem;
}

.car-contenedor {
    width: 25rem;
    height: 15rem; /* Si se cambia el valor cuidado que tambien hay que cambiar la clase de arriba body .ui-card .ui-card-content */
    margin: 1em 0em 0em 1em;
    border: 1px solid var(--color-principal);
}

.card-contenido {
    display: grid;
    grid-template-rows: auto auto;   /* Dos filas de altura automática */
    grid-template-columns: auto 3rem;
    gap: 5px;                        /* Espacio entre elementos */
    height: 100%;
}

.card-contenido > .info {
    grid-column: 1 / -1;             /* La primera fila ocupa las dos columnas */
    height: 7.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.card-contenido > .subinfo {
    grid-row: 2;
    grid-column: 1;
    height: 1.5rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.card-contenido > .botones {
    grid-row: 2;
    grid-column: 2;
    height: 1.5rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
/*</editor-fold>*/

/*<editor-fold defaultstate="collapsed" desc="DIV">*/
.div-centrado {
    height:100%;
    width:100%;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;
}

.div-filas {
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
}
.div-con-sombra {
    box-shadow: var(--sombra);
}

.div-como-panel{
    border-radius: 6px;
    box-shadow: var(--sombra);
    background-color: var(--color-blanco);
    padding: 6px;
}

.div-como-panel-redondeado32{
    border-radius: 32px;
    box-shadow: var(--sombra);
    background-color: var(--color-blanco);
    padding: 6px;
}

.div-tabla-scroll-horizontal {
    height:100%;
    min-height:200px;
    overflow:hidden;
}

.div-marco-foto {
    border:1px solid var(--color-gris-claro);
    border-radius:8px;
    padding:4px 5px 4px 5px;
}

.div-marco-foto > img {
    width:100%;
    height:100%;
    border-radius:8px;
    object-fit: contain;
}

.div-con-fondo {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.div-arrastre-ficheros {
    height:100%;
    border: 1px dashed var(--color-gris-oscuro);/*#BDBDBD;*/
    border-radius: 8px;
    padding:8px;
    min-height:40px;
    text-align:center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
}

.error .div-arrastre-ficheros {
    border: 1px dashed var(--color-rojo);
    color: var(--color-rojo);
}

/** Home **/
.div-home-cabecera {
    border-radius:16px;
    height:200px;
    background-color:var(--color-principal-claro);
    background-image: linear-gradient(270deg, rgba(0, 108, 253, 0.22) 35%, var(--color-principal-claro) 55%), url('../images/fondo-gradiente.png');
    background-position: right;
    background-repeat: no-repeat;
    background-size: auto 100%;
    box-shadow: var(--sombra);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding:15px
}

.div-home-acceso-directo {
    padding:2rem;
    background-color:var(--color-blanco);
    border-radius:1px;
    box-shadow: var(--sombra);
    border-left:10px solid var(--color-principal-oscuro);
    display:grid;
    grid-template-rows: auto auto;
    grid-template-columns: min-content auto;
    align-items: center;
}
.div-home-acceso-directo > div:last-child{
    grid-column-end: span 2;
    color: #6B7280;
}

.div-home-acceso-directo-imagen {
    display:flex;
    align-items: center;
    justify-content: center;
    height:30px;
    width:30px;
    border-radius:6px;
    background-color: var(--color-principal-claro);
    color: var(--color-principal-oscuro);
    padding:5px;
    margin-right:5px;
}

/** Secciones **/
.div-seccion-cabecera {
    background: var(--color-principal-claro);
    border: 1px solid #E8E8E8;
    box-shadow: var(--sombra);
    border-radius: 16px;
    min-height:50px;
}
.div-seccion-cabecera .img-cabecera-seccion {
    border-radius: 16px;
}
.div-seccion-cabecera .texto-cabecera-seccion {
    padding:10px !important;
}

/** Otros **/
.div-borde-redondeado {
    border: 1px solid var(--color-gris-claro);
    border-radius: 8px;
    padding:4px;
}

[class*="div-fichero-adjunto"] {
    display:grid;
    align-items: center;
    padding:12px;
    font-weight: 600;
    color:var(--color-componente-destacado);
}
[class*="div-fichero-adjunto"] > a {
    display:flex;
    align-items:center;
}
[class*="div-fichero-adjunto"] > a:first-child > i {
    font-size:24px;
    padding-right:5px;
    color:var(--color-componente-destacado);
}
[class*="div-fichero-adjunto"] > a > i {
    color:var(--color-componente-label);
}

.div-fichero-adjunto-edicion {
    grid-template-columns: auto 15px;
    gap: 1rem;
}

.div-seleccion-tipo {
    display:flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-weight:600;
}
.div-seleccion-tipo > a {
    border: 1px solid var(--color-gris-claro);
    border-radius: 8px;
    height:120px;
    width:140px;
    padding:1rem;
    text-align:center;
    color:var(--color-texto) !important;
    text-decoration:none;
}
.div-seleccion-tipo i {
    margin-bottom:5px;
}

.div-foto-editable {
    position:relative;
}
.div-foto-editable .ui-button{
    display:none;
    position:absolute;
    top:calc(50% - 16px);
    right:calc(50% - 50px);
}
.div-foto-editable:hover img {
    opacity: 0.3;
}
.div-foto-editable:hover .ui-button {
    opacity: 1;
    display:inherit;
}
/*</editor-fold>*/

/*<editor-fold defaultstate="collapsed" desc="PANEL">*/
body .ui-panel.panel-con-tabla .ui-panel-content {
    position:relative;
}
body .ui-panel.panel-con-tabla .ui-panel-content > div {
    position:absolute;
    top:14px;
    bottom:14px;
    left:14px;
    right:14px;
    height:auto
}

body .ui-outputpanel.panel-con-tabview .ui-tabs{
    height: 100%;
    position: relative;
}
body .ui-outputpanel.panel-con-tabview .ui-tabs .ui-tabs-panels{
    position: absolute;
    top: 48px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}
body .ui-outputpanel.panel-con-tabview .ui-tabs .ui-tabs-panels .ui-tabs-panel{
    height: 100%;
}

/* Panel que no se estira para abarcar sus contenidos, sino que mantiene su tamaño */
body .ui-panel.panel-no-overflow {
    /*    height:100%;*/
    overflow:hidden;
}

body .ui-panel.panel-no-overflow .ui-panel-content {
    /*    height:100%;*/
    overflow:hidden;
}

/* Panel destacado */
body .ui-outputpanel.destacado {
    border: 1px solid var(--color-componente-destacado);
    border-radius: 8px;
}

body .ui-panel.destacado > .ui-panel-titlebar {
    border: 1px solid var(--color-componente-destacado);
    border-bottom:0px;
    font-size:21px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
body .ui-panel.destacado > .ui-panel-content {
    border: 1px solid var(--color-componente-destacado);
    border-top:0px solid #dee2e6;
}
body .ui-panel.destacado>div:last-of-type {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.pnlTitulo {
    margin-bottom: 20px;
}

.command-link-cabecera-panel > i{
    margin-right:5px;
}
/*</editor-fold>*/

/*<editor-fold defaultstate="collapsed" desc="IMAGENES">*/
.foto-con-marco {
    border: 1px solid var(--color-gris-claro);
    border-radius: 8px;
    padding: 4px;
}
.foto-sin-marco {
    border-radius: 8px;
}
/*</editor-fold>*/

/*<editor-fold defaultstate="collapsed" desc="ICONOS">*/
.icono-tabla {
    font-size: 33px;
    color:var(--color-iconos)
}
/*</editor-fold>*/

/*<editor-fold defaultstate="collapsed" desc="BOTONES">*/
.botonera {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
}

.botonera-inferior-sticky {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
    width:100%;
    position:sticky;
    bottom:0px;
}

body .ui-button.boton-secundario {
    background: var(--color-blanco);
    color: var(--color-principal);
}

body .ui-menubutton.boton-secundario .ui-button{
    background: var(--color-blanco);
    color: var(--color-principal);
}
body .ui-menubutton.boton-secundario .ui-button:hover {
    background: var(--color-principal-oscuro);
    color: var(--color-blanco);
}

body .ui-menubutton.boton-secundario .ui-button .ui-button-icon-right{
    color: var(--color-principal) !important;
}
body .ui-menubutton.boton-secundario .ui-button:hover .ui-button-icon-right{
    color: var(--color-blanco) !important;
}

body .ui-menubutton.boton-secundario .ui-menuitem-text{
    color: red !important;
}

body .ui-menu.ui-menu-dynamic {
    background:white;
}
body .ui-menu.ui-menu-dynamic .ui-menu-list .ui-menuitem .ui-menuitem-link .ui-menuitem-text,
body .ui-menu.ui-menu-dynamic .ui-menu-list .ui-menuitem .ui-menuitem-link .ui-menuitem-icon{
    color:var(--color-texto);
}
body .ui-menu.ui-menu-dynamic .ui-menu-list .ui-menuitem .ui-menuitem-link.boton-secundario-irreversible .ui-menuitem-text,
body .ui-menu.ui-menu-dynamic .ui-menu-list .ui-menuitem .ui-menuitem-link.boton-secundario-irreversible .ui-menuitem-icon{
    color: var(--color-boton-peligro);
}

.boton-accion-irreversible {
    background: var(--color-boton-peligro) !important;
    border: 1px solid var(--color-boton-peligro) !important;
}
.boton-accion-irreversible:hover {
    background: var(--color-blanco) !important;
    color: var(--color-boton-peligro) !important;
}

body .ui-button.boton-secundario-irreversible {
    background: var(--color-blanco);
    color: var(--color-boton-peligro);
    border: 1px solid var(--color-boton-peligro);
}
body .ui-button.boton-secundario-irreversible:hover {
    background: var(--color-boton-peligro);
    color: var(--color-blanco);
    border: 1px solid var(--color-boton-peligro);
}
/*</editor-fold>*/

/*<editor-fold defaultstate="collapsed" desc="DATATABLES">*/

/* Redondeo de tablas */
.ui-datatable {
    border-radius:6px;
}

.ui-datatable-scrollable-header {
    border-radius:6px 6px 0 0;
}

body .ui-datatable .ui-paginator.ui-paginator-bottom {
    border-radius:0 0 6px 6px;
}

.header-sin-padding .ui-datatable-header {
    padding: 0px !important;
}
/*</editor-fold>*/

/*<editor-fold defaultstate="collapsed" desc="DATAVIEW">*/
body .ui-dataview.dataview-seccion {
    margin-left:-8px;
    margin-right:-8px;
}

body .ui-dataview.dataview-seccion .ui-dataview-header {
    display:none;
}
body .ui-dataview.dataview-seccion .ui-dataview-column a {
    text-decoration:none;
}

body .ui-dataview.dataview-seccion .ui-dataview-column a > div{
    display:flex;
    flex-direction: column;
    align-items: center;
    gap:10px;
    color: #495057;
}

body .ui-dataview.dataview-seccion .ui-dataview-column .dataview-imagen,.dataview-imagen {
    border: 1px solid #EEEEEE;
    border-radius: 8px;
    height:184px;
    width:85%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

body .ui-dataview.dataview-seccion .ui-paginator.ui-paginator-bottom {
    border-width: 0;
}
/*</editor-fold>*/

/*<editor-fold defaultstate="collapsed" desc="TREE">*/

body .ui-tree.tree-botones .ui-tree-container .ui-treenode .ui-treenode-content{
    border-radius:8px;
    outline: 0 none;
    outline-offset: 0;
    /*    box-shadow: inset 0 0 0 0.15rem #a6d5fa;*/
    border:1px solid var(--color-gris-oscuro)
}

body .ui-tree.tree-botones .ui-tree-container .ui-treenode .ui-treenode-content .ui-treenode-label {
    width:100%;
    padding: 0;
    line-height: 32px;
}

body .ui-tree.tree-botones a {
    text-decoration:none;
}

/*</editor-fold>*/

/*<editor-fold defaultstate="collapsed" desc="DIALOGOS">*/
body .ui-dialog .ui-dialog-titlebar{
    background-color: var(--color-gris-muy-claro);
}
body .ui-dialog .ui-dialog-content{
    padding: 1rem !important;
    overflow-y: auto;
}
body .ui-dialog .ui-dialog-footer {
    padding: 1rem;
}
.botonera-dialogo {
    margin-top: 1rem;
    padding-top: 1rem;
    display: flex;
    justify-content: flex-end;
}
/*</editor-fold>*/

/*<editor-fold defaultstate="collapsed" desc="BOTONES FILTROS ESTADO">*/
.btn-filtro-estado > div {
    height: 50px;
    padding: 18px 20px 10px 20px;
    border-bottom: 2px solid var(--color-gris);
    color: var(--color-texto-secundario);
}

.btn-filtro-estado.activo > div {
    border-bottom: 2px solid var(--color-principal);
    color: var(--color-principal);
}

.btn-filtro-estado:hover {
    text-decoration: none !important;
    background-color: var(--color-gris-claro);
}

.btn-filtro-estado .badge {
    display: flex;
    justify-content: center;
    font-size: 10px;
    padding: 4px;
    min-width: 18px;
    margin-left: 8px;
    border-radius: 3px;
    background-color: var(--color-gris-claro);
}

.btn-filtro-estado.activo .badge {
    font-size: 10px;
    padding: 4px;
    margin-left: 8px;
    border-radius: 3px;
    background-color: var(--color-verde-claro);
    color: var(--color-verde);
}
/*</editor-fold>*/

/*<editor-fold defaultstate="collapsed" desc="SIDEBAR CRUD">*/
.ui-sidebar.sidebar-crud {
    width: 500px;
    background-color: var(--color-fondo-aplicacion);
    padding: 30px;
    overflow-y: auto;
}

.ui-sidebar.sidebar-crud h2 {
    margin-top: 4px;
    margin-bottom: 40px;
}

.ui-sidebar.sidebar-crud h3 {
    color: var(--color-texto-secundario);
    font-size: 17px;
    margin-bottom: 10px;
}

.ui-sidebar.sidebar-crud .label {
    margin-top: 15px;
    margin-bottom: 4px;
}
/*</editor-fold>*/

/*<editor-fold defaultstate="collapsed" desc="PLANO">*/
.openseadragon-container:hover, .openseadragon-canvas:focus {
    outline: none;
}

.openseadragon-container {
    border-radius: 8px
}

.navigator {
    background: rgb(255,255,255) !important;
}
.hotspot-circulo {
    border-radius: 50%;
    background: red;
    color: white;
    font-weight: bold;
    height:100%;
    width:100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
/*</editor-fold>*/

/*<editor-fold defaultstate="collapsed" desc="SPLITTER">*/
.ui-splitter.sin-fondo {
    background: none;
    border: 0;
}

.ui-splitter.sin-fondo .ui-splitter-panel {
    background: none;
}

.ui-splitter.sin-fondo .ui-splitter-gutter {
    background: #FFF;
}
/*</editor-fold>*/

/*<editor-fold defaultstate="collapsed" desc="TABVIEW">*/
body .tabView-sin-padding .ui-tabs .ui-tabs-panels .ui-tabs-panel {
    padding: 1rem 0rem 1rem 0rem;
}
/*</editor-fold>*/

/*<editor-fold defaultstate="collapsed" desc="OTROS">*/
body .ui-menu.ui-menubar>.ui-menu-list>.ui-menuitem>.ui-menuitem-link.seccion-actual>span {
    text-decoration: underline 1px;
}

body .ui-overlaypanel.panel-overlay-redondeado,body .ui-overlaypanel.panel-overlay-redondeado .ui-overlaypanel-content{
    border-radius:16px;
}
body .ui-overlaypanel.panel-overlay-sin-padding .ui-overlaypanel-content{
    padding:0;
}

/*<editor-fold defaultstate="collapsed" desc="OVERLAY">*/
body .ui-overlaypanel.panel-overlay-redondeado, body .ui-overlaypanel.panel-overlay-redondeado .ui-overlaypanel-content{
    border-radius:16px;
}
body .ui-overlaypanel.panel-overlay-sin-padding .ui-overlaypanel-content{
    padding:0;
}
/*</editor-fold>*/

/* Oculta ciertos componentes al hacer un reflow en un datatable */
.ocultar-en-reflow {
    display:none;
}
@media (min-width: 640px) {
    .ocultar-en-reflow {
        display:block;
    }
}

/* Muestra un icono de lupa en un input de búsqueda */
body .ui-inputfield.busqueda-input {
    background-image: url('../images/search.png.xhtml');
    background-position: 2px center;
    background-repeat: no-repeat;
    padding-left: 22px;
    width:100%;
}

.separador {
    margin-top: 20px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--color-gris);
}

.text-overflow-3-lineas {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Coloca el growl arriba del todo */
body .ui-growl {
    top: 10px;
}

.seccion-activa-menuitem {
    border-bottom: 2px solid var(--color-blanco) !important;
    border-radius: 0px !important;
}
/*</editor-fold>*/

/*<editor-fold defaultstate="collapsed" desc="PANEL SEMANA (GENERAR RUEDA)">*/
.panel-rueda-semana {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Marcador con los datos de la semana activa (solo lo lee el JS) */
.semana-datos {
    display: none;
}

/* ── Navegación de semana ── */
.semana-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ── Tira de días: el bloque completo es la unidad que se genera ── */
.semana-tira {
    display: flex;
    align-items: stretch;
    gap: 4px;
    padding: 8px;
    border: 2px dashed var(--color-principal);
    border-radius: 10px;
    background-color: var(--color-principal-claro);
}

/* Cada hueco de la tira: la casilla que decide si el día se genera y,
   debajo, el día en sí, que sigue sirviendo para consultarlo. */
.semana-dia-celda {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.semana-dia-celda a.semana-dia {
    flex: 0 0 auto;
    width: 100%;
}

/* Un día desmarcado no se va a generar: se apaga para que cante. */
.semana-dia-celda.excluido a.semana-dia {
    opacity: 0.4;
}

.semana-dia {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 2px;
    border-radius: 6px;
    background-color: var(--color-blanco);
    line-height: 1.1;
}

.semana-dia .dow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-texto-secundario);
}

.semana-dia .num {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-texto-oscuro);
}

/* La tira de días también sirve para cambiar el día consultado */
a.semana-dia {
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

a.semana-dia:hover {
    background-color: var(--color-principal-claro);
    box-shadow: 0 0 0 1px var(--color-principal) inset;
}

a.semana-dia.activo:hover {
    background-color: var(--color-principal);
}

/* Día que se está consultando en el calendario */
.semana-dia.activo {
    background-color: var(--color-principal);
}

.semana-dia.activo .dow,
.semana-dia.activo .num {
    color: var(--color-blanco);
}

/* ── Aclaración del alcance semanal ── */
.semana-nota {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 12px;
    line-height: 1.35;
    color: var(--color-texto-secundario);
}

.semana-nota i {
    color: var(--color-principal);
    margin-top: 2px;
}

/* ── Acciones ── */
.semana-acciones {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: auto;
}

.semana-acciones .btn-generar-semana {
    width: 100%;
    justify-content: center;
}

.semana-acciones-fila {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.semana-acciones-fila .ui-button {
    flex: 1 1 auto;
    justify-content: center;
}
/*</editor-fold>*/

/*<editor-fold defaultstate="collapsed" desc="SELECTOR SEMANAS HOME">*/
.semana-actual{
    flex:1;
    min-width:0;
    text-align:center;
}

.semana-actual .titulo{
    font-size:20px;
    font-weight:700;
    color:var(--color-principal);
}

.semana-actual .fechas{
    margin-top:4px;
    color:var(--color-texto-secundario);
    font-size:14px;
}
/*</editor-fold>*/

/*<editor-fold defaultstate="collapsed" desc="HOME">*/
/* ── Aumentar tamaño de celda para que el icono tenga sitio ── */
.cal-ruedas .ui-datepicker-calendar td {
    padding: 0.1rem !important;
    text-align: center;
    vertical-align: top;
}

/* ── Número del día ── */
.cal-ruedas .ui-datepicker-calendar td span {
    display: block;
    font-weight: 600;
}

/* ── Icono debajo del número ── */
.cal-ruedas .icono-dia {
    display: block;
    font-size: 0.75rem;
    margin-top: 3px;
}

/* Lupa → rueda generada (azul) */
.cal-ruedas .icono-calendario {
    color: var(--color-principal);
}

/* Días de otro mes: ocultar icono */
.cal-ruedas .ui-datepicker-other-month .icono-dia {
    display: none;
}
/* El calendario ocupa toda la tarjeta */
.cal-ruedas.dashboard-panel-content {
    padding: 0.5rem;
    justify-content: center;
}

.cal-ruedas .ui-datepicker {
    width: 100%;
    border: none;
    padding: 0;
}

.cal-ruedas .ui-datepicker-group,
.cal-ruedas .ui-datepicker-calendar-container,
.cal-ruedas .ui-datepicker-calendar {
    width: 100%;
}

/* Cabecera de días de la semana */
.cal-ruedas .ui-datepicker-calendar th {
    font-size: 0.8rem;
    color: var(--color-principal);
}

/* ── Columna con el nº de semana: es el dato que se usa en "Generar rueda" ── */
.cal-ruedas .ui-datepicker-calendar th.ui-datepicker-weekheader {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--color-texto-secundario);
}

.cal-ruedas .ui-datepicker-calendar td.ui-datepicker-weeknumber {
    border-right: 1px solid var(--color-gris-claro);
    cursor: pointer;
}

.cal-ruedas .ui-datepicker-calendar td.ui-datepicker-weeknumber span {
    display: inline-block;
    min-width: 22px;
    padding: 2px 0;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-principal-oscuro) !important;
    background-color: var(--color-principal-claro);
    opacity: 1;
}

.cal-ruedas .ui-datepicker-calendar td.ui-datepicker-weeknumber:hover span {
    color: var(--color-blanco) !important;
    background-color: var(--color-principal);
}

/* Semana seleccionada en la tarjeta "Generar rueda" */
.cal-ruedas .ui-datepicker-calendar td.ui-datepicker-weeknumber.semana-activa span {
    color: var(--color-blanco) !important;
    background-color: var(--color-principal);
}

/* Fila completa de esa semana, para que se lea como un bloque */
.cal-ruedas .ui-datepicker-calendar tbody tr:has(td.semana-activa) {
    background-color: var(--color-principal-claro);
}

.panel-viajes .p-panel-content {
    padding: 1rem 1.25rem;
}

.viaje-fila {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.25rem;
    border-bottom: 1px solid #F1F5F9;
}
.viaje-fila:last-child {
    border-bottom: none;
}

/* Posición en el ranking */
.viaje-pos {
    width: 1.6rem;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: #94A3B8;
}
.viaje-fila:nth-child(1) .viaje-pos {
    color: #CA8A04;
} /* oro */
.viaje-fila:nth-child(2) .viaje-pos {
    color: #94A3B8;
} /* plata */
.viaje-fila:nth-child(3) .viaje-pos {
    color: #B45309;
} /* bronce */

/* Avatar con iniciales */
.viaje-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #EEF2FF;
    color: #4338CA;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* Nombre + barra */
.viaje-info {
    flex: 1;
    min-width: 0;
}
.viaje-nombre {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1E293B;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.25rem;
}
.viaje-barra-fondo {
    background: #F1F5F9;
    border-radius: 99px;
    height: 6px;
    overflow: hidden;
}
.viaje-barra-relleno {
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, #6366F1, #818CF8);
}

/* Número de viajes */
.viaje-numero {
    min-width: 2.2rem;
    text-align: right;
    font-size: 0.95rem;
    font-weight: 700;
    color: #4338CA;
}
.viaje-numero .unidad {
    font-size: 0.65rem;
    font-weight: 500;
    color: #94A3B8;
    display: block;
    text-align: right;
    margin-top: -2px;
}

/* ── Ratio, junto al número de viajes ─────────────────────────────── */
.viaje-numero {
    min-width: 3.4rem;
    text-align: right;
}
.viaje-ratio {
    font-size: 0.7rem;
    font-weight: 500;
    color: #94A3B8;
    display: block;
    text-align: right;
    margin-top: 1px;
}

/* ── Secciones dentro de la tarjeta de viajes (conductores / sin coche) ── */
.viajes-seccion-titulo {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94A3B8;
    padding: 0.75rem 0.25rem 0.4rem;
    border-bottom: 1px solid #F1F5F9;
}
.viajes-seccion-titulo:first-child {
    padding-top: 0;
}

/* Pestañas del ranking (a día de hoy / generado): van dentro de la
   tarjeta, así que sin marco ni fondo propios y sin el relleno lateral. */
body .ui-tabs.ranking-tabs {
    border: none;
    background: transparent;
    padding: 0;
}
body .ui-tabs.ranking-tabs .ui-tabs-panels .ui-tabs-panel {
    padding: 0.75rem 0 0 0;
    background: transparent;
    border: none;
}

/* Viajeros sin coche: mismo formato, otro color, y sin medallas de podio
   (no compiten con los conductores, solo se ve lo que llevan viajado). */
.viaje-fila-pasajero .viaje-pos {
    color: #0D9488;
}
.viaje-fila-pasajero .viaje-numero {
    color: #0F766E;
}
.viaje-fila-pasajero .viaje-barra-relleno {
    background: linear-gradient(90deg, #0D9488, #2DD4BF);
}

/* ── Marca "no tiene coche" en el listado de viajeros ───────────────── */
.chip-sin-coche {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.5rem;
    border-radius: 99px;
    background: #CCFBF1;
    color: #0F766E;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Interruptor "no tiene coche" del formulario de viajero */
.campo-sin-coche {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
}
.campo-sin-coche small {
    flex-basis: 100%;
    color: #94A3B8;
    font-size: 0.75rem;
}
/* ── Scroll explícito, independiente del tema PrimeFaces ────────────── */
.viajes-scroll {
    max-height: 420px;      /* ajusta a la altura de tu calendario */
    overflow-y: auto;
    padding-right: 4px;     /* evita que el scrollbar tape el contenido */
}

.viajes-scroll::-webkit-scrollbar {
    width: 6px;
}
.viajes-scroll::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 99px;
}
.viajes-scroll::-webkit-scrollbar-track {
    background: transparent;
}
/* La tarjeta en sí: SIN overflow, para que el grid no la encoja */
#pnlConductores.div-como-panel {
    padding: 1rem;
    overflow: visible;
    height: auto;
}

/* El contenido interno tampoco debe tener overflow ni altura fija */
#pnlConductores > .dashboard-panel-content {
    overflow: visible;
    height: auto;
    min-height: 0;
}

#pnlConductores .grid {
    overflow: visible;
}

#pnlConductores .dashboard-panel-content {
    min-height: 0;        /* quita el min-height:260px si te sobra espacio vacío */
    height: auto;
    overflow: visible;
}

#pnlConductores .coche-card,
#pnlConductores .seccion {
    overflow: visible !important;
    height: auto !important;
}
/*</editor-fold>*/

/*<editor-fold defaultstate="collapsed" desc="ACOMPAÑANTES">*/
.caja-orderlist .ui-orderlist-list,
        .caja-orderlist .p-orderlist-list {
            min-height: 320px;
        }
        .caja-header {
            font-weight: 700;
            font-size: 0.9rem;
            display: flex;
            align-items: center;
            gap: 0.4rem;
            margin-bottom: 0.5rem;
        }
        .caja-header.disponibles { color: #64748B; }
        .caja-header.grupo1      { color: #15803D; }
        .caja-header.grupo2      { color: #B45309; }

        .item-persona {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
        }
        .item-persona .btn-mover {
            display: flex;
            gap: 0.25rem;
        }
        
        /*</editor-fold>*/

/* ═══════════════════════════════════════════════════════════════════ */
/* RUTAS                                                               */
/* ═══════════════════════════════════════════════════════════════════ */

/* ── Diálogo "¿con qué ruta quieres trabajar?" ──────────────────────── */
.elegir-ruta-ayuda {
    margin: 0 0 1rem;
    font-size: 0.85rem;
    color: #64748B;
}

.lista-rutas {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Cada ruta es un botón grande: se elige de una sola pulsación */
.ruta-opcion {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--color-gris-claro, #E2E8F0);
    border-radius: 12px;
    text-decoration: none;
    color: #1E293B;
    transition: border-color 0.15s, background-color 0.15s;
}
.ruta-opcion:hover,
.ruta-opcion:focus {
    border-color: var(--color-principal, #6366F1);
    background: #F8FAFC;
    text-decoration: none;
}

.ruta-opcion-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #EEF2FF;
    color: #4338CA;
}

.ruta-opcion-texto {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}
.ruta-opcion-nombre {
    font-weight: 600;
    font-size: 0.95rem;
}
.ruta-opcion-desc {
    font-size: 0.78rem;
    color: #94A3B8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ruta-opcion-flecha {
    color: #CBD5E1;
    flex-shrink: 0;
}

/* Aún no hay ninguna ruta creada */
.sin-rutas-aviso {
    text-align: center;
    padding: 1rem 0.5rem;
    color: #64748B;
}
.sin-rutas-aviso i {
    font-size: 2rem;
    color: #F59E0B;
}
.sin-rutas-aviso p {
    margin: 0.75rem 0 1rem;
    font-size: 0.9rem;
}

/* ── Ruta activa: en la cabecera y en el listado ────────────────────── */
.ruta-activa-cabecera {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 1rem;
    padding: 0.2rem 0.7rem;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.18);
    color: #FFFFFF;
    font-size: 0.8rem;
    font-weight: 600;
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chip-ruta-activa {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: 0.5rem;
    padding: 0.1rem 0.5rem;
    border-radius: 99px;
    background: #DCFCE7;
    color: #15803D;
    font-size: 0.7rem;
    font-weight: 600;
}

.fila-ruta-activa > td {
    background: #F0FDF4 !important;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* USUARIOS Y PERFILES                                                 */
/* ═══════════════════════════════════════════════════════════════════ */

/* Marca del usuario que tiene la sesión abierta */
.chip-usuario-conectado {
    display: inline-flex;
    align-items: center;
    margin-left: 0.5rem;
    padding: 0.1rem 0.5rem;
    border-radius: 99px;
    background: #EEF2FF;
    color: #4338CA;
    font-size: 0.7rem;
    font-weight: 600;
}

/* Un administrador no tiene ruta: gestiona todas */
.texto-todas-rutas {
    color: #94A3B8;
    font-style: italic;
    font-size: 0.85rem;
}

.aviso-todas-rutas {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    background: #F8FAFC;
    color: #64748B;
    font-size: 0.8rem;
}

/* Interruptor "activo" del formulario de usuario */
.campo-activo-usuario {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
}
.campo-activo-usuario small {
    flex-basis: 100%;
    color: #94A3B8;
    font-size: 0.75rem;
}

/* Aviso de que los perfiles son datos maestros */
.nota-tabla-maestra {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.6rem 0.85rem;
    border-radius: 8px;
    background: #EFF6FF;
    color: #1D4ED8;
    font-size: 0.82rem;
}

/* Usuarios de un perfil, al desplegar su fila */
.tabla-usuarios-perfil {
    margin: 0.5rem 0;
}

.sin-usuarios-perfil {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    color: #94A3B8;
    font-size: 0.85rem;
}

/* ── Pantalla del viajero (pendiente de desarrollo) ─────────────────── */
.pantalla-pendiente {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3rem 1.5rem;
    color: #64748B;
}
.pantalla-pendiente i {
    font-size: 3rem;
    color: #CBD5E1;
    margin-bottom: 1rem;
}
.pantalla-pendiente h2 {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
    color: #1E293B;
}
.pantalla-pendiente p {
    margin: 0;
    max-width: 460px;
    font-size: 0.9rem;
    line-height: 1.5;
}

.chip-ruta-viajero {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.7rem;
    border-radius: 99px;
    background: #EEF2FF;
    color: #4338CA;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Cabecera de panel con un botón a la derecha (p. ej. exportar el ranking).
   El header normal centra su texto, así que aquí se reparte en dos y se
   deja el botón pegado al borde. */
.dashboard-panel-header.cabecera-con-accion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.dashboard-panel-header.cabecera-con-accion .ui-button {
    color: inherit;
}

/*<editor-fold defaultstate="collapsed" desc="CUADRO DE HORARIOS">*/
/* ═══════════════════════════════════════════════════════════════════ */
/* CUADRO DE HORARIOS (pantalla de horarios)                           */
/*                                                                     */
/* Misma foto que el Excel: dos bloques (IDA y VUELTA) y, dentro de    */
/* cada uno, una rejilla de 1 columna de hora + 5 días.                */
/* ═══════════════════════════════════════════════════════════════════ */

/* Cabecera del panel con los botones de exportar/importar a la derecha */
.cabecera-cuadro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    width: 100%;
}

.cabecera-cuadro-acciones {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* El fileUpload "skinSimple" trae su propio botón: se deja con la misma
   pinta que el de exportar para que la pareja no desentone. */
.cabecera-cuadro-acciones .ui-fileupload-choose {
    font-size: 0.875rem;
    padding: 0.35rem 0.8rem;
}

.cuadro-bloque {
    margin-bottom: 1rem;
    border: 1px solid var(--color-gris);
    border-radius: 10px;
    overflow: hidden;
}

.cuadro-bloque-titulo {
    padding: 0.4rem 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.8rem;
    color: var(--color-blanco);
    background-color: var(--color-principal);
}

.cuadro-bloque.vuelta .cuadro-bloque-titulo {
    background-color: var(--color-principal-oscuro);
}

/* 1 columna para la hora + 5 días. La rejilla no se estrecha por debajo
   de lo legible: en móvil se hace scroll lateral, como en el Excel. */
.cuadro-grid {
    display: grid;
    grid-template-columns: 70px repeat(5, minmax(120px, 1fr));
    overflow-x: auto;
    background-color: var(--color-gris);
    gap: 1px;
}

.cuadro-esquina,
.cuadro-dia-cab,
.cuadro-hora,
.cuadro-celda {
    background-color: var(--color-blanco);
    padding: 0.35rem 0.5rem;
}

.cuadro-dia-cab {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: center;
    color: var(--color-texto-secundario);
    background-color: var(--color-gris-muy-claro);
}

.cuadro-hora {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--color-principal-oscuro);
    background-color: var(--color-principal-claro);
}

.cuadro-celda {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 2rem;
}

.cuadro-apodo {
    display: inline-block;
    font-size: 0.78rem;
    line-height: 1.3;
    color: var(--color-texto-oscuro);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cuadro-apodo.apagado {
    margin-right: 0.35rem;
    color: var(--color-texto-secundario);
}

.cuadro-nota {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.5rem;
    font-size: 12px;
    line-height: 1.35;
    color: var(--color-texto-secundario);
}

.cuadro-nota i {
    color: var(--color-principal);
    margin-top: 2px;
}

/* ── Diálogo de importación ── */
.import-cabecera {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.import-cabecera i {
    color: var(--color-verde);
}

.import-resumen {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-texto-oscuro);
    margin-bottom: 0.5rem;
}

.import-aviso {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    background-color: var(--color-principal-claro);
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--color-texto);
}

.import-aviso i {
    color: var(--color-principal-oscuro);
    margin-top: 2px;
}

.import-chip {
    display: inline-block;
    margin: 0 0.25rem 0.25rem 0;
    padding: 0.1rem 0.5rem;
    border-radius: 99px;
    background-color: var(--color-gris-muy-claro);
    font-size: 0.75rem;
    white-space: nowrap;
}

/* Día al que le falta la ida o la vuelta */
.import-chip.incompleto {
    background-color: var(--color-rojo-claro);
}

/* Nombre del fichero que no existe en la ruta */
.import-chip.desconocido {
    background-color: var(--color-rojo-claro);
    color: var(--color-texto-oscuro);
}

.import-lista {
    margin-bottom: 0.75rem;
}

.import-lista-titulo {
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: var(--color-texto-secundario);
}

.import-avisos {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--color-texto-secundario);
}

.import-acciones {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
/*</editor-fold>*/