/* =====================================================
   VARIABLES
   ===================================================== */

:root {
  --bg-main:#f8fafc;
  --bg-card:#ffffff;
  --bg-soft:#f1f5f9;
  --border-color:#e2e8f0;
  --text-main:#0f172a;
  --text-muted:#64748b;
  --primary:#2563eb;
  --primary-hover:#1d4ed8;
  --radius:0.75rem;
}


/* =====================================================
   BASE
   ===================================================== */

html,body{
height:100%;
margin:0;
}

body{
background:var(--bg-main);
color:var(--text-main);
font-family:"Inter",system-ui,-apple-system,sans-serif;
font-size:1rem;
line-height:1.5;
}


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

.layout-app{
display:flex;
flex-direction:column;
height:100vh;
overflow:hidden;
}

/* ALTO DE LA TABLA */

.app-content{
padding-top:65px;
flex:1;
display:flex;
flex-direction:column;
min-height:0;
}


/* =====================================================
   NAVBAR
   ===================================================== */

.navbar{
border-bottom:1px solid var(--border-color);
background:white;
z-index:1000;
padding: 4px 0;
}

.navbar .nav-link{
color:var(--text-main);
}

.navbar .nav-link:hover{
color:var(--primary);
}


/* =====================================================
   DASHBOARD LAYOUT
   ===================================================== */

.dashboard-layout{
flex:1;
display:flex;
flex-direction:column;
min-height:0;
}


/* filtros fijos */

.dashboard-filtros{
position:sticky;
top:65px;
z-index:200;
background:white;
padding-bottom:8px;
}


/* contenedor scroll */

.tabla-wrapper{
flex:1;
overflow-y:auto;
min-height:0;
}


/* =====================================================
   TABLA
   ===================================================== */

.table{
background:var(--bg-card);
border-radius:var(--radius);
}

.table th{
font-size:0.85rem;
text-transform:uppercase;
letter-spacing:0.04em;
}

.table td{
font-size:0.8rem;
vertical-align:middle;
}


/* cabecera fija */

.tabla-dashboard thead th{
position:sticky;
top:0;
z-index:50;
background:#218cd3;
color:white;
}


/* layout tabla */

.tabla-dashboard{
table-layout:fixed;
width:100%;
}


/* espaciado */

.tabla-dashboard th,
.tabla-dashboard td{
padding:0.4rem 0.5rem;
white-space:nowrap;
overflow:hidden;
}


/* =====================================================
   COLUMNAS
   ===================================================== */

.col-inst{width:8rem}
.col-fecha{width:7.5rem;text-align:center}
.col-dia{width:2.6rem;text-align:center}
.col-hora{width:5.5rem;text-align:center}
.col-com{width:3rem;text-align:center}
.col-bh{width:2.8rem;text-align:center}
.col-acc{width:5.2rem}


/* =====================================================
   ACCIONES
   ===================================================== */

.tabla-dashboard td.col-acc{
opacity:0;
pointer-events:none;
transition:opacity .15s ease;
}

.tabla-dashboard tbody tr:hover td.col-acc,
.tabla-dashboard tr.fila-edicion td.col-acc{
opacity:1;
pointer-events:auto;
}

.icono-accion{
display:inline-flex;
align-items:center;
justify-content:center;
font-size:1rem;
padding:.25rem .35rem;
border-radius:6px;
color:var(--text-muted);
text-decoration:none;
transition:.15s;
}

.icono-accion:hover{
background:var(--bg-soft);
transform:scale(1.1);
}

.icono-accion.eliminar:hover{
color:#dc3545;
}


/* =====================================================
   INPUTS TABLA
   ===================================================== */

.tabla-dashboard td input,
.tabla-dashboard td select{
box-sizing:border-box;
margin:0;
vertical-align:middle;
}

.tabla-dashboard td.col-dia input{  /*DIA*/
width:1.6rem;
text-align:center;
}

.tabla-dashboard td.col-hora input[type="time"]{ /*HORA*/
width:5.5rem;
text-align:center;
}

.tabla-dashboard td.col-fecha input[type="date"]{ /*FECHA*/
width:6.8rem;
text-align:center; 
}

.tabla-dashboard td.col-inst select{
max-width:9rem;
min-width:6rem;
}


/* =====================================================
   COMENTARIOS
   ===================================================== */

.btn-comentario{
background:none;
border:none;
cursor:pointer;
font-size:1rem;
}

.btn-comentario:hover{
transform:scale(1.1);
}

.popup-comentario{
position:absolute;
z-index:9999;
background:#020617;
border:1px solid var(--primary);
border-radius:.5rem;
padding:.5rem;
width:260px;
box-shadow:0 10px 25px rgba(0,0,0,.6);
}

.popup-comentario textarea{
width:100%;
min-height:80px;
background:transparent;
color:#fdfdfc;
border:none;
resize:vertical;
}

.popup-comentario textarea:focus{
outline:none;
}


/* =====================================================
   BUSCADOR
   ===================================================== */

.buscador-wrapper{
max-width:200px;
width:100%;
}

/*COLOR DEL ERROR DEL BUSCADOR DE FECHAS*/
.fecha-invalida{
border-color:#dc3545 !important;
background-color:#ffe6e6;
}

/* =====================================================
   LOGO MARCA DE AGUA
   ===================================================== */

body::before{
    content: "";
    position: fixed;

    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 90vw;
    height: 90vh;

    background-image: url("/static/logo.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    opacity: 0.15;

    pointer-events: none;

    z-index: 999;
}
/* =====================================================
   PANEL SUPERIOR INFORMATIVO – VISTA PÚBLICA (VISITANTE)
   ===================================================== */

.panel-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 0.6rem 1rem;
  box-shadow: 0 6px 18px rgba(0,0,0,0.04);
}

/* LADO IZQUIERDO */
.panel-izq {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.panel-izq .label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.panel-izq .rango {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.panel-izq .flecha {
  color: var(--primary);
}

/* LADO DERECHO */
.panel-der {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding-left: 0.75rem;
  border-left: 1px solid var(--border-color);
}

.panel-der .hoy-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  color: var(--text-muted);
}

.panel-der .hoy-fecha {
  font-size: 0.9rem;
  font-weight: 500;
}





/* =====================================================
   COLOR DE LOS ENLACES DE LA CABECERA DE LA TABLA
   ===================================================== */
.sort-link {
  color: #ffffff;  /* texto blanco */
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

/* =====================================================
   DETALLES DE LA TABLA
   ===================================================== */

/*color de la fila cuando entra en edicion*/
.tabla-dashboard tr.fila-edicion td{
  background:#fff8cc !important;
}

/*color suave para el día actual.*/
.fila-hoy{
background-color:#fff7d1;
}



/* =====================================================
   ---------------------- MOBIL ------------------------
   ===================================================== */

   @media (max-width: 768px) {

  .panel-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }

  .panel-der {
    border-left: none;
    padding-left: 0;
  }

  .panel-izq .rango {
    font-size: 0.95rem;
  }

}

/*  =================== RESPONSIVE ==================== */

@media(max-width:768px){

html{font-size:18px}

.tabla-dashboard{
display:block;
overflow-x:auto;
}

}