/*==================================================*/
/* TEMAS                                            */
/*==================================================*/

:root[data-theme=light]{

    /* Fondo */
    --fondo:#F8F9FA;

    /* Paneles */
    --panel:#F8F9FA;

    /* Títulos */
    --titulo:#003366;

    /* Texto */
    --texto:#222222;
    --txt-verde:#008000;

    /* Inputs */
    --input:#FFFFFF;
    --input-text:#000000;
    --input-border:#B8C2CC;

    /* Header listado */
    --header:#2C3E50;
    --header-text:#FFFFFF;

    /* Footer */
    --footer:#F8F9FA;

    /* Leyenda */
    --leyenda:#F5F5F5;
    
    --border:#222222;

    /* Botones */
    --azul:#0D6EFD;
    --gris:#6C757D;
    --rojo:#DC3545;
    --verde:#008000;
    --naranja:#DF7514;

	/* Texto */
    --tbl-text:#222;

    /* Bordes */
    --tbl-border:#C0C0C0;

    /* Fondo filas */
    --tbl-row1-1:#FFFFFF;
    --tbl-row1-2:#F5F5F5;

    /* Filas pares */
    --tbl-row2-1:#F0F5FF;
    --tbl-row2-2:#DEECFF;

    /* Hover */
    --tbl-hover1:#DCE9FF;
    --tbl-hover2:#90BAF9;

    /* Sombra */
    --tbl-shadow:rgba(0,0,0,.20);

    /* Colores especiales */
    --bg-warning:#FFE08A;
    --bg-success:#B6F5C2;
    --bg-danger:#FFB3B3;
    --bg-info:#B3D9FF;
    
    --bg-modal:#F8F9FA;
    
    --bg-linea:#C0C0C0;

    --bg-boton:#003366;
    
}

/*============== DARK =================*/

:root[data-theme=dark]{

    --fondo:#2D3138;

    --panel:#2D3138;

    --titulo:#58A6FF;

    --texto:#F2F2F2;
    --txt-verde:#CCFF99;

    --input:#3B3F45;
    --input-text:#FFFFFF;
    --input-border:#666666;

    --header:#1A1D22;
    --header-text:#FFFFFF;

    --footer:#2D3138;

    --leyenda:#353A40;
    
    --border:#C0C0C0;

    --azul:#2D8CFF;
    --gris:#7A828B;
    --rojo:#E74C3C;
    --verde:#28A745;
    --naranja:#CC6600;
    
    --tbl-text:#F2F2F2;

    --tbl-border:#555;

    --tbl-row1-1:#353535;
    --tbl-row1-2:#2C2C2C;

	--tbl-row2-1:#3B4252;
    --tbl-row2-2:#2F3642;
    
    --tbl-hover1:#4A628A;
    --tbl-hover2:#3A7BD5;

    --tbl-shadow:rgba(0,0,0,.50);

    --bg-warning:#8A6D1E;
    --bg-success:#296D3A;
    --bg-danger:#8A2D2D;
    --bg-info:#225C87;

    --bg-modal:#2D3138;
    
    --bg-linea:#A2A2A3;
    
    --bg-boton:#00CCFF;


}

/****************************************************/
/* ESTILO GENERAL                                   */
/****************************************************/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Segoe UI,Arial,Helvetica,sans-serif;
}
html,
body{
    width:100%;
    height:auto;
    overflow:auto;
	background:var(--bg-modal);
    color:var(--texto);
}

.cuadro{
    width:100%;
    height:calc(100vh - 350px);
    border:none;
}
/****************************************************/
/* CONTENEDOR PRINCIPAL                             */
/****************************************************/

.contenedor{
    width:100%;
    height:calc(100vh - 80px);
    display:grid;
    grid-template-rows:
        140px
        minmax(0,1fr)
        60px;

    gap:10px;
    padding:10px;
}

.contenedor2{

    width:100%;
    display:grid;
    height:calc(100vh - 80px);
    grid-template-rows:
        140px
        minmax(0,1fr)
        60px;

    gap:10px;
    padding:10px;
    box-sizing:border-box;
    overflow:hidden;

}
/****************************************************/
/* CONTENEDOR LISTA                                 */
/****************************************************/

.contenedor-listas{

    display:grid;
    grid-template-columns:minmax(0,38%) minmax(0,62%);
    gap:15px;
    min-height:0;

}

.contenedor-listas2{

    display:grid;
    grid-template-columns:minmax(0,38%) minmax(0,62%);
    gap:15px;
    min-height:0;

}

.panel-izquierda{

    display:grid;
    grid-template-rows:1fr 1fr;
    gap:15px;

}

/****************************************************/
/* PANELES                                          */
/****************************************************/

.panel{

    background:var(--panel);
    border-radius:8px;
    box-shadow:0 2px 5px rgba(0,0,0,.20);
    overflow:hidden;
    display:flex;
    flex-direction:column;

}

/****************************************************/
/* PANEL FILTROS                                    */
/****************************************************/

.panel-filtros{
    padding:15px;

}

.titulo{
    font-size:clamp(14px,2vw,20px);
    font-weight:bold;
    color:var(--titulo);
    margin-bottom:15px;
}

.subtitulo{
    font-size:clamp(7px,2vw,10px);
    font-weight:bold;
    color:var(--titulo);
    margin-left:30px;
}

.lineadivide{
    background:linear-gradient(to right, var(--tbl-row2-1),  var(--tbl-row2-2));
}

/****************************************************/
/* FILA DE CONTROLES                                */
/****************************************************/

.fila{
    display:flex;
    align-items:flex-end;
    gap:15px;
    flex-wrap:wrap;
}

.campo{
    display:flex;
    flex-direction:column;
    min-width:80px;
}

.campo label{
    font-size:12px;
    margin-bottom:4px;
    color:var(--texto);
}

.campo input,
.campo select{
    width:120px;
    height:30px;
    border-radius:4px;
    padding-left:8px;
 	background:var(--input);
    color:var(--input-text);
    border:1px solid var(--border);
}

.campo2{
    display:flex;
    flex-direction:column;
    min-width:40px;
}

.campo2 label{
    font-size:12px;
    margin-bottom:4px;
    color:var(--texto);
}

.campo2 input,
.campo2 select{
    width:80px;
    height:30px;
    border-radius:4px;
    padding-left:8px;
 	background:var(--input);
    color:var(--input-text);
    border:1px solid var(--border);
}

.campo3{
    display:flex;
    flex-direction:column;
    min-width:20px;
}

.campo3 label{
    font-size:12px;
    margin-bottom:4px;
    color:var(--texto);
}

.campo3 input,
.campo3 select{
    width:50px;
    height:30px;
    border-radius:4px;
    padding-left:8px;
 	background:var(--input);
    color:var(--input-text);
    border:1px solid var(--border);
}

.campo-form {
    display:flex;
}

campo-form td{
	height:25px;
}

.campo-form label{
    font-size:clamp(8pt, 1vw, 12pt);
    margin-bottom:4px;
    margin-right:10px;
    color:var(--texto);
}

.campo-form span{
    font-size:clamp(8pt, 1vw, 12pt);
    margin-bottom:4px;
    margin-right:10px;
}

.campo-form input,
.campo-form select{
    width:85%;
    height:25px;
    border-radius:4px;
    padding-left:8px;
 	background:var(--input);
    color:var(--input-text);
    border:1px solid var(--border);
}

.campo-form textarea{
    width:85%;
    height:95%;
    border-radius:4px;
    padding-left:8px;
 	background:var(--input);
    color:var(--input-text);
    border:1px solid var(--border);
}

.campo-form button {
    width:90%;
    height:25px;
    border:none;
    border-radius:5px;
    color:white;
    cursor:pointer;
    transition:.20s;
 	background:var(--titulo);
    color:var(--text);
}

.botones{
    display:flex;
    gap:10px;
}

.adicional{
    display:flex;
    flex-direction:column;
    gap:5px;
}

.adicional select{
    flex:1;
    width:95%;
    min-height:0;
    border-radius:4px;
    padding-left:8px;
 	background:var(--input);
    color:var(--input-text);
    border:1px solid var(--border);
    margin-bottom:5px;
    margin-left:5px;
    font-size:11px;      /* Tamaño de la letra */
    line-height:1.3;
}

.adicional input[type=text], 
.adicional input[type=number], 
.adicional input[type=date], 
.adicional input[type=email],
.adicional input[type=file] {
  	width: calc(100% - 20px);
    height: 30px;
    border-radius:4px;
    padding-left:8px;
 	background:var(--input);
    color:var(--input-text);
    border:1px solid var(--border);
    margin-bottom:5px;
    margin-left:5px;
}

.adicional textarea{
    flex:1;
    width:95%;
    min-height: 90px;
    max-height: 180px;
 	background:var(--input);
    color:var(--input-text);
    border:1px solid var(--border);
    border-radius:4px;
    padding-left:8px;
    margin-bottom:5px;
    margin-left:5px;
}
.adicional input[type=checkbox]{
    width:20px;
    height:20px;
    flex:none;
    border-radius:4px;
    border:1px solid var(--border);
    margin-left:5px;
}

.adicional label{
    font-size:12px;
    margin-bottom:4px;
    color:var(--titulo);
    margin-left:5px;
}

/****************************************************/
/* RADIO BUTTONS                                    */
/****************************************************/

.grupo-radio{
    margin-left:25px;
    display:flex;
    align-items:center;
    gap:20px;
    white-space:nowrap;
    font-size:14px;
}

.grupo-radio span{
    font-weight:bold;
    color:var(--texto);
}

.grupo-radio label{
    font-size:12px;
    margin-bottom:4px;
    color:var(--texto);
}

.grupo-radio input[type=radio]{
    margin:0;
 	width:18px;
    height:18px;
    transform:scale(1.3);
}

/****************************************************/
/* BOTONES                                          */
/****************************************************/

.btn{
    width:120px;
    height:30px;
    border:none;
    border-radius:5px;
    color:white;
    cursor:pointer;
    transition:.20s;
    margin-right:5px;
}

.btn2{
    width:80px;
    height:30px;
    border:none;
    border-radius:5px;
    color:white;
    cursor:pointer;
    transition:.20s;
    margin-right:5px;
}

.btn3{
    width:90%;
    height:25px;
    border:none;
    border-radius:5px;
    color:white;
    cursor:pointer;
    transition:.20s;
    margin-right:5px;
}

.btn:hover:not(:disabled){
    transform:scale(1.03);
}

.btn:disabled{
	background: #888888;
	cursor:not-allowed;
    opacity:.65;

}

.btn2:hover:not(:disabled){
    transform:scale(1.03);
}

.btn2:disabled{
	background: #888888;
	cursor:not-allowed;
    opacity:.65;

}

.btn3:hover:not(:disabled){
    transform:scale(1.03);
}

.btn3:disabled{
	background: #888888;
	cursor:not-allowed;
    opacity:.65;

}

.azul{
    background:var(--azul);
}

.gris{
    background:var(--gris)
}

.rojo{
    background:var(--rojo);
}

.verde{
    background:var(--verde);
}

.naranja{
    background:var(--naranja);
}



/****************************************************/
/* PANEL DEL LISTADO                                */
/****************************************************/

.panel-listado{
    flex:1;
    min-height:0;
    min-width:0;
 	overflow:hidden;
}

.panel-listado-2c{

    display:grid;
    grid-template-rows:1fr 220px;
    height:calc(100vh - 650px);
    gap:8px;
}
/****************************************************/
/* TITULO DEL LISTADO                               */
/****************************************************/

.titulo-listado{
    height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#FFFFFF;
    color:#222222;
    font-size:clamp(.80rem,1vw,.95rem);
    font-weight:bold;
}

/****************************************************/
/* CABECERA                                         */
/****************************************************/

.header-lista{
    height:40px;
    display:flex;
    align-items:center;
    background:var(--header);
    color:var(--header-text);
    font-size:clamp(6pt, 2vw, 8pt);
    text-align:center;
    flex-shrink:0;
}

.header-lista div{
    padding-left:10px;
    border-right:1px solid #4E657C;
    border-bottom:1px solid #4E657C;
    height:100%;
    display:flex;
    align-items:center;
}

.header-lista2{
    height:60px;
    display:grid;
    grid-template-rows:20px 40px;
	grid-template-columns:
        6% 12% 5% 9% 2% 2%
        6% 6% 6%
        6% 6% 6%
        6% 6% 6%
        4% 6%;
    align-items:center;
    background:var(--header);
    color:var(--header-text);
    font-size:clamp(6pt, 2vw, 8pt);
    text-align:center;
}

.header-lista2 > div{
    padding-left:10px;
    border-right:1px solid #4E657C;
    border-bottom:1px solid #4E657C;
    justify-content:flex-start;   /* o center */
    display:flex;
    align-items:center;
    box-sizing:border-box;

    white-space:nowrap;
    word-break:keep-all;
    text-overflow:ellipsis;

}

.grupo2{
    background:var(--header);
    color:var(--header-text);
    font-size:clamp(7pt, 2vw, 9pt);
}

/****************************************************/
/* IFRAME                                           */
/****************************************************/

.frame{
    flex:1 1 auto;
   	min-height:0;
    background:transparent;
    marginwidth:1;
    marginheight:1;
    overflow:hidden;
}

.frame iframe{
    width:100%;
    height:100%;
    border:none;
    display:block;
    overflow:hidden;
}


/****************************************************/
/* MAS DE UN IFRAME                                 */
/****************************************************/

.frame-contenedor {

    width:100%;
    height:100%;
    display:grid;
    grid-template-columns:45% 55%;
    gap:5px;
    overflow:hidden;
    min-height:0;
}


.iframe-izquierdo {
    height:99%;
    min-height:0;
    overflow:hidden;
}


/* columna derecha */

.iframe-derecha {
    height:100%;
    display:grid;
 	grid-template-rows:
        0.60fr
        20px
        0.40fr;
    gap:5px;
    min-height:0;
    overflow:hidden;

}

.zona-frame {
    min-height:0;
    height:100%;
    overflow:hidden;

}

/* todos los iframe */

.frame-contenedor iframe {

    width:100%;
    height:100%;
    border:0;
    display:block;

}
/****************************************************/
/* CONTENIDO                                        */
/****************************************************/

.contenido{

    flex:1;
    overflow:auto;

}

/****************************************************/
/* LEYENDA                                          */
/****************************************************/

.leyenda{
    height:35px;
    display:flex;
    align-items:center;
    gap:20px;
    padding-left:15px;
    background:var(--leyenda);
    border-top:1px solid silver;
    flex-shrink:0;
}

.on{
    width:18px;
    height:18px;
    background:#28A745;
    display:inline-block;
    border-radius:3px;
}

.alarma{
    width:18px;
    height:18px;
    background:#FFC107;
    display:inline-block;
    border-radius:3px;
}

.off{
    width:18px;
    height:18px;
    background:#DC3545;
    display:inline-block;
    border-radius:3px;
}

/****************************************************/
/* FOOTER                                           */
/****************************************************/

.footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:var(--footer);
    padding:0 20px;
    border-radius:8px;
    box-shadow:
        0 2px 5px rgba(0,0,0,.20);
}

/****************************************************/
/* SCROLL                                           */
/****************************************************/

::-webkit-scrollbar{
    width:10px;
    height:10px;
}

::-webkit-scrollbar-track{
    background:#E6E6E6;
}

::-webkit-scrollbar-thumb{
    background:#7F8C8D;
    border-radius:5px;
}

::-webkit-scrollbar-thumb:hover{
    background:#34495E;
}

/****************************************************/
/* RESPONSIVE                                       */
/****************************************************/

@media (max-width:1200px){
    .fila{
        flex-wrap:wrap;

    }

    .campo input,
    .campo select{
        width:140px;

    }
}

@media (max-width:900px){
    .contenedor{
        grid-template-rows:
            190px
            1fr
            60px;
    }
    .fila{
        gap:8px;
    }
}


/****************************************************/
/* TABLA ANIMADA                                       */
/****************************************************/

.tabla-animada {
    border-collapse: separate; /* importante */
    border-spacing: 0;
    font-family: Inter, sans-serif;
    font-size: clamp(7pt, 1vw, 9pt);
    color:var(--tbl-text);
}

/* Celdas */
.tabla-animada td, 
.tabla-animada th {
    padding: 4px 6px;
    border-bottom: 1px solid var(--tbl-border);
    background: transparent;
    transition: background 0.35s ease;
}

/* FILAS NORMALES */
.tabla-animada tbody tr td {
	background:linear-gradient(to right, var(--tbl-row1-1), var(--tbl-row1-2));
}

/* FILAS PARES */
.tabla-animada tbody tr:nth-child(even) td {
    background:linear-gradient(to right, var(--tbl-row2-1),  var(--tbl-row2-2));
}

/* 🔥 HOVER REAL */
.tabla-animada tbody tr:hover td {
    background:linear-gradient(to right, var(--tbl-hover1), var(--tbl-hover2));
}

/* OPCIONAL: animación tipo tarjeta */
.tabla-animada tbody tr {
    transition:
        transform .25s,
        box-shadow .25s;
}

.tabla-animada tbody tr:hover {
    transform:translateY(4px);
    box-shadow:
        2px 0 8px
        var(--tbl-shadow);
}

/* ===== 🎯 CELDAS PERSONALIZADAS ===== */
.tabla-animada td.bg {
    background:var(--bg-warning)!important;
}

.tabla-animada td.bg-success {
    background:var(--bg-success)!important;
}

.tabla-animada td.bg-danger {
    background:var(--bg-danger)!important;
}

.tabla-animada td.bg-info {
    background:var(--bg-info)!important;
}


.tabla-animada4 {
    border-collapse: separate;
    border-spacing: 0; /* sin interlineado */
    font-family: Inter, sans-serif;
    font-size: clamp(7pt, 1vw, 9pt);
    color:var(--tbl-text);
}

.tabla-animada4 label,
.tabla-animada4 span {
	font-size: clamp(7pt, 1vw, 9pt);
    margin-bottom:4px;
    color:var(--tbl-text);
}

/* ===== CELDAS ===== */
.tabla-animada4 td, 
.tabla-animada4 th {
    padding: 4px 6px;
    border-bottom: 1px solid var(--tbl-border);
    background: transparent;
    transition: background 0.35s ease, box-shadow 0.25s ease;
}

/* ===== COLOR POR GRUPO (2 FILAS = 1 BLOQUE) ===== */
.tabla-animada4 tbody.grupo:nth-of-type(odd) td {
	background:linear-gradient(to right, var(--tbl-row1-1), var(--tbl-row1-2));
}

.tabla-animada4 tbody.grupo:nth-of-type(even) td {
    background: linear-gradient(to right, var(--tbl-row2-1),  var(--tbl-row2-2));
}

/* ===== UNIR VISUALMENTE LAS 2 FILAS ===== */
.tabla-animada4 tbody.grupo tr:first-child td {
    border-bottom: none;
}

.tabla-animada4 tbody.grupo tr:last-child td {
    border-top: none;
}

/* ===== HOVER ===== */
.tabla-animada4 tbody.grupo:hover td {
    background:linear-gradient(to right, var(--tbl-hover1), var(--tbl-hover2));
}

/* leve elevación del grupo (simulada en celdas) */
.tabla-animada4 tbody.grupo:hover tr td {
    box-shadow: 0 3px 8px rgba(0,0,0,0.12);
}

/* ===== 🎯 CELDAS PERSONALIZADAS ===== */
.tabla-animada4 td.bg {
    background:var(--bg-warning)!important;
}

.tabla-animada4 td.bg-success {
    background:var(--bg-success)!important;
}

.tabla-animada4 td.bg-danger {
    background:var(--bg-danger)!important;
}

.tabla-animada4 td.bg-info {
    background:var(--bg-info)!important;
}


.boton-lista-ver {
	border: none;
	font-family: Tahoma;
	font-size: clamp(7pt, 1vw, 8pt);
	padding: 1px;
	width: 85%;
	height: 25px;
	color: #FFFFFF;
    cursor: pointer;
    text-align: center;
	border-radius: 2px;
}

.ver-over {
    background-color: #DF7514;
}

.ver-over:hover {
    background-color: #404040;
}

.ver-over:disabled {
    background-color: #DDDDDD;
}

.ver-over:active {
    background-color: #003366;
}

.boton-lista-editar {
	border: none;
	font-family: Tahoma;
	font-size: clamp(7pt, 1vw, 8pt);
	padding: 1px;
	width: 85%;
	height: 25px;
	color: #FFFFFF;
    cursor: pointer;
    text-align: center;
	border-radius: 2px;
}

.editar-over {
	background: rgb(28, 184, 65); 
}

.editar-over:hover {
    background-color: #404040;
}

.editar-over:disabled {
    background-color: #DDDDDD;
}

.editar-over:active {
    background-color: #003366;
}

.boton-lista-alerta {
	border: none;
	font-family: Tahoma;
	font-size: clamp(7pt, 1vw, 8pt);
	padding: 1px;
	width: 85%;
	height: 25px;
	color: #FFFFFF;
    cursor: pointer;
	border-radius: 2px;
}

.lista-alerta-over {
	background: rgb(98, 98, 255);
}

.lista-alerta-over:hover {
    background-color: #404040;
}

.lista-alerta-over:disabled {
    background-color: #DDDDDD;
}

.lista-alerta-over:active {
    background-color: #003366;
}

.boton-lista-alerta2 {
	border: none;
	font-family: Tahoma;
	font-size: clamp(7pt, 1vw, 8pt);
	padding: 1px;
	width: 85%;
	height: 25px;
	color: #FFFFFF;
    cursor: pointer;
	border-radius: 2px;
}

.lista-alerta2-over {
	background: rgb(255, 98, 127); 
}

.lista-alerta2-over:hover {
    background-color: #404040;
}

.lista-alerta2-over:disabled {
    background-color: #DDDDDD;
}

.lista-alerta2-over:active {
    background-color: #CC6600;
}

.boton-lista-alerta3 {
	border: none;
	font-family: Tahoma;
	font-size: clamp(7pt, 1vw, 8pt);
	padding: 1px;
	width: 85%;
	height: 25px;
	color: #FFFFFF;
    cursor: pointer;
	border-radius: 2px;
}

.lista-alerta3-over {
	background: #CC00CC; 
}

.lista-alerta3-over:hover {
    background-color: #404040;
}

.lista-alerta3-over:disabled {
    background-color: #DDDDDD;
}

.lista-alerta3-over:active {
    background-color: #666699;
}

.boton-lista-alerta4 {
	border: none;
	font-family: Tahoma;
	font-size: clamp(7pt, 1vw, 8pt);
	padding: 1px;
	width: 85%;
	height: 25px;
	color: #FFFFFF;
    cursor: pointer;
	border-radius: 2px;
}

.lista-alerta4-over {
	background: #009900; 
}

.lista-alerta4-over:hover {
    background-color: #404040;
}

.lista-alerta4-over:disabled {
    background-color: #DDDDDD;
}

.lista-alerta4-over:active {
    background-color: #666699;
}

.boton-lista-alerta5 {
	border: none;
	font-family: Tahoma;
	font-size: clamp(7pt, 1vw, 8pt);
	padding: 1px;
	width: 85%;
	height: 25px;
	color: #FFFFFF;
    cursor: pointer;
	border-radius: 2px;
}

.lista-alerta5-over {
	background: #CC3300; 
}

.lista-alerta5-over:hover {
    background-color: #404040;
}

.lista-alerta5-over:disabled {
    background-color: #DDDDDD;
}

.lista-alerta5-over:active {
    background-color: #666699;
}

.boton-lista-alerta6 {
	border: none;
	font-family: Tahoma;
	font-size: clamp(7pt, 1vw, 8pt);
	padding: 1px;
	width: 85%;
	height: 25px;
	color: #FFFFFF;
    cursor: pointer;
	border-radius: 2px;
}

.lista-alerta6-over {
	background: #6666FF; 
}

.lista-alerta6-over:hover {
    background-color: #404040;
}

.lista-alerta6-over:disabled {
    background-color: #DDDDDD;
}

.lista-alerta6-over:active {
    background-color: #666699;
}

.boton-lista-borrar {
	border: none;
	font-family: Tahoma;
	font-size: clamp(7pt, 1vw, 8pt);
	padding: 1px;
	width: 85%;
	height: 25px;
	color: #FFFFFF;
    cursor: pointer;
    text-align: center;
	border-radius: 2px;
}

.borrar-over {
	background: rgb(202, 60, 60); 
}

.borrar-over:hover {
    background-color: #404040;
}

.borrar-over:disabled {
    background-color: #DDDDDD;
}

.borrar-over:active {
    background-color: #003366;
}

.boton-opciones {
	border: none;
	font-family: Tahoma;
	font-size: clamp(7pt, 1vw, 9pt);
	padding: 1px;
	width: 90%;
	height: 25px;
	color: #FFFFFF;
    cursor: pointer;
	border-radius: 2px;
	box-shadow: 1px 1px 1px #111111;
}

.opciones-over {
	background: rgb(52, 152, 219); 
}

.opciones-over:hover {
    background-color: #404040;
}

.opciones-over:disabled {
    background-color: #DDDDDD;
}

.opciones-over:active {
    background-color: #003366;
}

.boton-lista-pagina {
	border:1px solid #003399;
	font-family: Tahoma;
	font-size: clamp(7pt, 1vw, 8pt);
	padding: 1px;
	width: 25px;
	height: 20px;
	color: #000000;
    cursor: pointer;
	border-radius: 4px;
}

.pagina-over {
	background: #00CCFF; 
}

.pagina-over:hover {
    background-color: #404040;
}

.pagina-over:disabled {
    background-color: #DDDDDD;
}

.pagina-over:active {
    background-color: #003366;
}

.boton-lista-pagina-actual {
	border:1px solid #800000;
	font-family: Tahoma;
	font-size: clamp(7pt, 1vw, 8pt);
	padding: 1px;
	width: 25px;
	height: 20px;
	color: #FFFFFF;
    cursor: pointer;
	border-radius: 4px;
    background-color: #CC0000;
}

.boton-cerrar-modal {
	border:1px solid #C0C0C0;
	font-family: Tahoma;
	font-size: 8pt;
	padding: 2px;
	width: 20px;
	height: 20px;
	color: #FFFFFF;
    cursor: pointer;
	border-radius: 75%;
}

.modal-over {
	background: #CC3300; 
}

.modal-over:hover {
    background-color: #404040;
}

.modal-over:disabled {
    background-color: #DDDDDD;
}

.modal-over:active {
    background-color: #003366;
}

.filtro-mensajes {
    padding: 10px 15px;
}


/* =========================
   BOTONES ENTRADA / SALIDA
   ========================= */

.botones-bandeja {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.btn-bandeja {
    min-width: 120px;
    height: 38px;

    border: 1px solid #555;
    border-radius: 5px;

    background: #252a33;
    color: #ddd;

    cursor: pointer;

    font-size: 13px;
    font-weight: bold;

    transition: all .2s ease;
}

.btn-bandeja:hover {
    background: #343b48;
}


/* Botón seleccionado */

.btn-bandeja.activo {
    background: #2196f3;
    border-color: #2196f3;
    color: white;

    box-shadow: 0 0 5px rgba(33,150,243,.5);
}


/* =========================
   FILTRO TODOS / NUEVOS / LEÍDOS
   ========================= */

.botones-tipo-msj {
    display: flex;
    align-items: center;
    gap: 15px;

    font-size: 12px;
}

.btn-tipo-msj {
    min-width: 150px;
    height: 30px;

    border: 1px solid #555;
    border-radius: 5px;

    background: #252a33;
    color: #ddd;

    cursor: pointer;

    font-size: 14px;
    font-weight: bold;

    transition: all .2s ease;
}

.btn-tipo-msj:hover {
    background: #343b48;
}


/* Botón seleccionado */

.btn-tipo-msj.activo {
    background: #CA3C3C;
    border-color: #2196f3;
    color: white;

    box-shadow: 0 0 5px rgba(33,150,243,.5);
}

.btn-tipo-msj.disabled {
    background: #D0D0D0;
    border-color: #444444;
    color: white;

    box-shadow: 0 0 5px rgba(33,150,243,.5);
}