/* =========================
RESET
========================= */

*{
box-sizing:border-box;
margin:0;
padding:0;
}


/* =========================
BODY
========================= */

body{

font-family:"Segoe UI",Arial,sans-serif;

background:#F9F9F9;

display:flex;
justify-content:center;

min-height:100vh;

padding-top:40px;

}

/* =========================
WRAPPER
========================= */

.appWrapper{

display:flex;
flex-direction:column;
align-items:center;

width:100%;

}


/* =========================
LOGO
========================= */

.logoApp{

margin-bottom:20px;
text-align:center;

}

.logoApp img{

width:140px;
display:block;
margin:0 auto;

}


/* =========================
APP
========================= */

#app{

width:100%;
max-width:720px;

margin:auto;
padding:0 12px;

}


/* =========================
PANTALLAS
========================= */

.pantalla{

position:relative;

background:white;

padding:35px;

border-radius:12px;

box-shadow:0 10px 28px rgba(0,0,0,0.08);

margin:0 auto 25px auto;

border:1px solid #e2e8f0;

}

.oculto{
display:none !important;
}


/* =========================
TITULOS
========================= */

h2{

text-align:center;
margin-bottom:28px;

font-weight:600;
color:#2b3445;

}

.pantallaTopBar{
display:flex;
justify-content:flex-start;
flex-wrap:wrap;
gap:8px;
margin-bottom:16px;
}

.pantallaTopBackBtn{
width:auto;
min-width:0;
margin-top:0;
padding:8px 14px;
background:#e2e8f0;
color:#1e293b;
box-shadow:none;
}

.pantallaTopBackBtn:hover{
background:#cbd5e1;
transform:none;
box-shadow:none;
}

.nombreUsuarioLogueado{
text-align:center;
margin:-16px 0 20px;
font-size:14px;
font-weight:600;
letter-spacing:0.02em;
color:#475569;
}


/* =========================
FORMULARIOS
========================= */

.campo{

display:flex;
flex-direction:column;

margin-bottom:12px;

}

label{

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

margin-bottom:6px;

color:#3b455a;

}


/* INPUTS */

input,
select,
textarea{

padding:10px;

margin-top:4px;

border-radius:8px;

border:1px solid #cfd6e4;

font-size:16px;

width:100%;

background:white;

transition:all .15s;

}

#solMotivo,
#motivoRechazoSolicitud{
min-height:110px;
resize:none;
}

input:focus,
select:focus,
textarea:focus{

outline:none;

border-color:#1e6edb;

box-shadow:0 0 0 3px rgba(30,110,219,0.15);

}


/* =========================
BOTONES
========================= */

button{

padding:12px 18px;

border:none;

border-radius:8px;

background:#0b2f5c;   /* azul oscuro serio */

color:white;

font-size:14px;

font-weight:500;

cursor:pointer;

margin-top:8px;

transition:all .15s;

box-shadow:0 4px 10px rgba(0,0,0,0.15);

white-space:normal;
line-height:1.3;
max-width:100%;

}

button:hover{

background:#0b2f5c;   /* hover más oscuro */

transform:translateY(-1px);

box-shadow:0 6px 14px rgba(0,0,0,0.2);

}

button:active{

transform:translateY(0);

box-shadow:0 2px 6px rgba(0,0,0,0.2);

}

/* LOGIN BOTONES */

#pantallaLogin button{

width:100%;

}


/* =========================
PANEL ADMIN
========================= */

.gridAdmin{

display:grid;

grid-template-columns:repeat(2, 170px);

gap:18px;

justify-content:center;

margin:30px auto;

width:max-content;

}

.gridAdmin button{

width:170px;

height:60px;

border-radius:10px;

background:#0f3d75;

box-shadow:0 6px 14px rgba(0,0,0,0.15);

display:flex;

align-items:center;

justify-content:center;

font-size:14px;

}

/* =========================
LISTAS / TABLAS
========================= */

#listaTurnos,
#listaUsuarios,
#listaLugares,
#listaSolicitudes,
#listaEquipo,
#listaTurnosAdmin,
#listaAuditoria{

margin-top:20px;

padding:14px;

border-radius:10px;

background:white;

border:1px solid #e3e8f2;

}


/* =========================
TABLAS
========================= */

table{

width:100%;

border-collapse:collapse;

margin-top:15px;

}

th{

background:white;

color:white;

padding:10px;

font-weight:500;

}

td{

padding:8px;

border-bottom:1px solid #e2e8f0;

}


/* =========================
MENU USUARIO
========================= */

.menuUsuario{

display:flex;
flex-direction:column;

gap:12px;

max-width:260px;

margin:30px auto;

}

.menuUsuario button{
width:100%;
}


/* =========================
FOOTER
========================= */

.firmaApp{

margin:8px auto 24px;

font-size:12px;

color:#6b7280;

text-align:center;

width:100%;

}

.filtrosGrid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:12px;
}

.resumenResultados{
margin-top:12px;
margin-bottom:12px;
padding:10px 12px;
border-radius:10px;
background:#eff6ff;
border:1px solid #bfdbfe;
color:#1e3a8a;
font-size:14px;
font-weight:600;
}

.turnoCompacto{
padding:10px 12px;
}

.turnoCompacto strong{
display:block;
margin-bottom:4px;
color:#0f172a;
}

.turnoCompactoMeta{
font-size:13px;
line-height:1.45;
color:#475569;
}

.turnoCompactoAcciones{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:8px;
}

.turnoCompactoAcciones button{
margin-top:0;
}

.cargaMasivaCard{
padding:10px 12px;
}

.cargaMasivaCard select{
margin-top:8px;
}

.cargaSnapshot{
margin-top:6px;
font-size:13px;
line-height:1.45;
color:#475569;
}

.botonPeligro{
background:#b91c1c;
}

.botonPeligro:hover{
background:#991b1b;
}

.firmaLinks{
display:flex;
justify-content:center;
gap:14px;
margin-top:8px;
flex-wrap:wrap;
}

.firmaLinks a,
.legalLinks a{
color:#0b2f5c;
text-decoration:none;
font-weight:600;
}

.firmaLinks a:hover,
.legalLinks a:hover{
text-decoration:underline;
}


.bloquePlanilla{

background:#f8f9fc;

border:1px solid #e2e8f0;

border-radius:8px;

padding:12px;

margin-bottom:12px;

}

.cabeceraPlanilla{

font-weight:600;

margin-bottom:8px;

color:#1f2937;

}

.listaFunciones{

list-style:none;

padding-left:0;

font-size:14px;

line-height:1.6;

}

.itemBusqueda{

padding:8px 10px;

cursor:pointer;

border-bottom:1px solid #eee;

background:white;

font-size:14px;

}

.itemBusqueda:last-child{

border-bottom:none;

}

.itemBusqueda:hover{

background:#eef2f7;

}

/* =========================
LISTAS DESPLEGABLES BUSQUEDA
========================= */

.listaBusqueda{

border:1px solid #d1d5db;

border-radius:6px;

background:white;

margin-top:4px;

max-height:200px;

overflow-y:auto;

box-shadow:0 6px 12px rgba(0,0,0,0.08);

}


.solicitudItem{

border:1px solid #e5e7eb;

border-radius:6px;

padding:10px;

margin-bottom:10px;

background:white;

}

.solicitudItem button{

margin-right:6px;

}

.notificacion{

border:1px solid #e5e7eb;

border-radius:8px;

padding:10px;

margin-bottom:10px;

background:white;

}

.fechaNoti{

font-size:12px;

color:#6b7280;

}

.marcarLeidaBtn{
margin-top:8px;
}

.tablaPlanilla{
width:100%;
border-collapse:collapse;
margin-top:12px;
}

.tablaPlanilla th{
background:#0b2f5c;
color:#ffffff;
padding:8px;
text-align:left;
font-size:13px;
}

.tablaPlanilla td{
border:1px solid #dbe2ef;
padding:8px;
font-size:13px;
vertical-align:top;
}


/* CAMPANA NOTIFICACIONES */

.notificacionesBtn{

position:absolute;

top:20px;
right:25px;

width:48px;
height:48px;

padding:0;
margin:0;

border-radius:12px;

background:#1e3a8a;

color:white;

display:flex;
align-items:center;
justify-content:center;

font-size:18px;

cursor:pointer;

box-shadow:0 4px 10px rgba(0,0,0,0.2);

}


.notificacionesBtn:hover{

background:#1e40af;

}


/* CONTADOR */

#contadorNotificaciones{

position:absolute;

top:-6px;
right:-6px;

background:#dc2626;

color:white;

font-size:11px;

border-radius:50%;

min-width:18px;
height:18px;

padding:0 4px;

display:flex;
align-items:center;
justify-content:center;

}

.accionesPantalla{
margin-top:20px;
text-align:center;
}

.soloAdmin {
display:none;
}

.turno{
border:1px solid #ddd;
padding:10px;
margin:8px 0;
border-radius:6px;
background:#fff;
}

.card{
border:1px solid #ddd;
padding:10px;
margin:8px 0;
border-radius:6px;
background:#fff;
}

.legalLinks{
display:flex;
justify-content:center;
gap:14px;
flex-wrap:wrap;
margin-bottom:22px;
}

.legalContent{
display:grid;
gap:16px;
line-height:1.6;
color:#334155;
width:100%;
max-width:860px;
margin:0 auto;
}

.legalSection{
background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);
border:1px solid #dbe4ee;
border-radius:16px;
padding:20px 22px;
box-shadow:0 10px 28px rgba(15,23,42,0.06);
}

.legalSection h3{
margin:0 0 10px;
color:#0f172a;
font-size:20px;
line-height:1.2;
}

.legalSection p{
margin:0 0 10px;
}

.legalSection p:last-child,
.legalSection ul:last-child{
margin-bottom:0;
}

.legalSection ul{
margin:10px 0 12px 18px;
padding:0;
}

.legalSection li{
margin-bottom:6px;
}

.legalSection a{
color:#0f766e;
font-weight:700;
text-decoration:none;
}

.legalSection a:hover{
text-decoration:underline;
}

.legalForm{
display:grid;
gap:12px;
}

.legalForm .campo{
margin-bottom:0;
}

.legalCheckbox{
display:flex;
align-items:flex-start;
gap:10px;
font-size:14px;
line-height:1.5;
color:#1f2937;
}

.legalCheckbox input{
width:auto;
margin:2px 0 0;
}

.legalStatus{
min-height:22px;
font-size:14px;
font-weight:600;
}

.legalStatus[data-state="success"]{
color:#0f766e;
}

.legalStatus[data-state="error"]{
color:#b91c1c;
}

.solicitudCuentaCard{
margin-top:10px;
}

.legalIntro{
background:linear-gradient(135deg,#0f766e 0%,#155e75 100%);
border-color:transparent;
color:#ecfeff;
padding:24px 24px 22px;
}

.legalIntro h3{
color:#ffffff;
font-size:28px;
margin-bottom:8px;
}

.legalEyebrow{
font-size:12px;
font-weight:800;
letter-spacing:0.14em;
text-transform:uppercase;
opacity:0.9;
}

.legalMeta{
font-size:13px;
font-weight:700;
color:#ccfbf1;
}

.legalLead{
font-size:15px;
line-height:1.7;
max-width:58ch;
}

.legalBlock + .legalBlock{
margin-top:14px;
padding-top:14px;
border-top:1px solid #e2e8f0;
}

@media (max-width:640px){
.legalSection{
padding:18px 16px;
border-radius:14px;
}

.legalIntro h3{
font-size:24px;
}
}

.solicitudCompacta{
padding:8px 10px;
}

.solicitudFila{
display:flex;
justify-content:space-between;
align-items:center;
gap:8px;
margin-bottom:4px;
}

.estadoSolicitud{
font-size:11px;
font-weight:700;
text-transform:uppercase;
letter-spacing:0.04em;
color:#334155;
background:#e2e8f0;
padding:2px 6px;
border-radius:999px;
}

.solicitudMeta{
font-size:12px;
color:#475569;
line-height:1.35;
margin-bottom:2px;
}

.solicitudResumen{
font-size:13px;
color:#1f2937;
line-height:1.35;
margin:4px 0 6px;
word-break:break-word;
}

.btnDetalleInline{
margin-top:4px;
padding:7px 10px;
font-size:12px;
}

.detalleInline{
margin-top:6px;
padding-top:6px;
border-top:1px solid #e2e8f0;
}

.detalleGrid{
display:grid;
gap:4px;
font-size:12px;
line-height:1.35;
color:#334155;
}

.seguimientoCompacto{
padding:8px 10px;
}

.seguimientoFilaTop{
display:flex;
justify-content:space-between;
align-items:center;
gap:8px;
margin-bottom:3px;
}

.seguimientoMeta{
font-size:12px;
color:#475569;
line-height:1.35;
}

.envioCompacto{
padding:8px 10px;
}

.envioFilaTop{
display:flex;
justify-content:space-between;
align-items:center;
gap:8px;
margin-bottom:4px;
}

.envioMetaRow{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-bottom:2px;
}

.envioMeta{
font-size:12px;
color:#475569;
line-height:1.3;
}

.areasChecks{
display:grid;
gap:8px;
margin-top:8px;
}

.sugerenciasInline{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:8px;
margin-bottom:8px;
}

.sugerenciaChip{
width:auto;
min-width:0;
margin-top:0;
padding:7px 12px;
border:1px solid #cbd5e1;
border-radius:999px;
background:#f8fafc;
color:#334155;
font-size:13px;
font-weight:600;
box-shadow:none;
}

.sugerenciaChip:hover{
background:#e2e8f0;
transform:none;
}

.sugerenciaChip:focus{
outline:none;
border-color:#1e6edb;
box-shadow:0 0 0 3px rgba(30,110,219,0.15);
}

.areaCheck{
display:flex;
align-items:center;
gap:8px;
font-size:14px;
}

.areaCheck input{
width:auto;
margin:0;
}

.contadorInline{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:18px;
height:18px;
padding:0 6px;
margin-left:6px;
font-size:11px;
font-weight:700;
line-height:1;
color:#ffffff;
background:#dc2626;
border-radius:999px;
vertical-align:middle;
}

#btnAdminSolicitudes{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
}

#btnAdminSolicitudes .contadorInline{
margin-left:0;
flex-shrink:0;
}

@media (max-width: 640px){

body{
padding-top:20px;
}

.pantalla{
padding:22px 16px;
border-radius:10px;
}

.gridAdmin{
grid-template-columns:1fr;
width:100%;
}

.gridAdmin button{
width:100%;
}

.notificacionesBtn{
top:14px;
right:14px;
width:44px;
height:44px;
}

#app{
max-width:100%;
}

}

#resultadosConsulta,
#resultadosAgentesCM,
#resultadosAgentesGrupo{
width:100%;
margin-top:8px;
border:1px solid #d1d5db;
border-radius:8px;
background:#ffffff;
max-height:220px;
overflow-y:auto;
}

#resultadosConsulta:empty,
#resultadosAgentesCM:empty,
#resultadosAgentesGrupo:empty{
display:none;
}

#resultadosConsulta > p,
#resultadosAgentesCM > p,
#resultadosAgentesGrupo > p{
padding:10px 12px;
font-size:14px;
line-height:1.45;
color:#475569;
}

.campo,
.filtrosGrid > *,
.turno,
.card,
.turnoCompacto,
.cargaMasivaCard,
.resumenResultados{
min-width:0;
}

.resumenResultados,
.turnoCompacto,
.turnoCompactoMeta,
.cargaSnapshot,
.itemBusqueda,
.solicitudResumen,
.envioMeta,
.seguimientoMeta{
overflow-wrap:anywhere;
}

@media (max-width: 640px){
.filtrosGrid{
grid-template-columns:1fr;
gap:10px;
}

.pantallaTopBar{
margin-bottom:12px;
}

.pantallaTopBackBtn{
width:100%;
}

.resumenResultados{
font-size:13px;
line-height:1.45;
}

.turnoCompactoAcciones{
flex-direction:column;
}

.turnoCompactoAcciones button,
.cargaMasivaCard button,
.cargaMasivaCard select{
width:100%;
}

.solicitudFila,
.seguimientoFilaTop,
.envioFilaTop{
flex-direction:column;
align-items:flex-start;
}

.envioMetaRow{
gap:4px 8px;
}

#resultadosConsulta,
#resultadosAgentesCM,
#resultadosAgentesGrupo{
max-height:180px;
}
}