:root {
    --primario: #001D44;
    --secundario: #ffffff;
    --terciario: #ff0000;
    --tamano: 700px;
}

body {
    margin: 0;
    font-family: sans-serif;
    background-color: var(--secundario);
    color: var(--primario);
}


a {
  color: #fff ;   /* blanco siempre */
  text-decoration: none;    /* quita el subrayado */
}

a:hover,
a:visited,
a:active {
  color: #fff;   /* mantiene blanco en todos los estados */
}


.container {
    display: flex;
    height: 100vh;

    
    background-image: url("img/suma2.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain; /* o "cover" si quieres que lo rellene todo */
    
}



.sidebar {
    width: 220px;
    background-color: var(--primario);
    color: var(--secundario);
    padding: 20px;
    position: relative;
    
    background-image: url("img/raquel2.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain; /* o "cover" si quieres que lo rellene todo */
}


.sidebar h2 {
    font-size: 1.5em;
    margin-bottom: 30px;
}

.sidebar ul {
    list-style: none;
    padding: 0;
}

.sidebar li {

    margin: 15px 0;
    position: relative;
    display: block;
    height: 20px;
}

.sidebar li::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--terciario);
    transition: width 0.3s ease-in-out;
}

.sidebar li:hover::after {
    width: 100%;
}

.body-content {
    flex: 1;
    padding: 30px;
    overflow-y: auto;
    align-items: center;
}


.login-body {
    background-color: var(--primario);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.login-container {
  display: block;
    background: var(--secundario);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0,0,0,0.3);
    width: 300px;
}

.login-container h2 {
    color: var(--primario);
    text-align: center;
}

.login-container a {
    color: var(--primario);
    text-align: center;
}

.login-container form {
    display: flex;
    flex-direction: column;
}

.login-container label {
    margin-top: 10px;
    font-weight: bold;
}

.login-container input {
    padding: 8px;
    margin-top: 4px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.login-container button {
    margin-top: 20px;
    background: var(--primario);
    color: var(--secundario);
    padding: 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.login-container button:hover {
    background: var(--terciario);
}

.error {
    color: red;
    text-align: center;
    margin-bottom: 10px;
}


.logout-container {
    position: absolute;
    bottom: 30px;
    width: 80%;
    text-align: center;
}

.logout-button {
    background-color: var(--terciario);
    color: var(--secundario);
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    width: 100%;
}

.logout-button:hover {
    background-color: #cc0000;
}


.form-registro {
    background: var(--secundario);
    padding: 20px;
    border-radius: 10px;
    max-width: 600px;
    margin: auto;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

.form-registro h2 {
    color: var(--primario);
    text-align: center;
}

.form-group {
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-weight: bold;
    margin-bottom: 5px;
    color: var(--primario);
}

.form-group input,
.form-group select {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.form-group input[readonly],
.form-group select:disabled {
    background-color: #f0f0f0;
    color: #555;
    cursor: not-allowed;
}

.btn-registrar {
    background: var(--primario);
    color: var(--secundario);
    border: none;
    padding: 10px 20px;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
}

.btn-registrar:hover {
    background: var(--terciario);
}

.logo-container {
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
}


.logo {
    position: relative;
    left: -20px;
    max-width: calc(100% + 40px);
    height: auto;
}


.tabla-barra {
    max-width: 400px;
    margin: 30px auto;
    font-family: sans-serif;
    background: var(--secundario);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.header {
    display: flex;
    justify-content: space-between;
    padding: 12px 16px;
    font-weight: bold;
    background-color: var(--primario);
    color: var(--secundario);
}

.fila {
    display: flex;
    justify-content: space-between;
    padding: 10px 16px;
    align-items: center;
    border-bottom: 1px solid #ddd;
    transition: background 0.3s;
}

.fila:hover {
    background-color: #f9f9f9;
}

.col-nombre {
    width: 80%;
    color: #222;
    font-weight: 500;
}

.col-titulo {
    width: 40%;
    text-align: center;
    color: #FFF;
    font-weight: 500;
}

.col-barra {
    width: 20%;
    position: relative;
    background: #dfefff;
    border-radius: 6px;
    height: 22px;
    overflow: hidden;
    box-shadow: inset 0 0 4px rgba(0,0,0,0.2);
}

.barra {
    background: linear-gradient(90deg, var(--primario), #003399);
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 8px;
    color: #fff;
    font-weight: bold;
    font-size: 13px;
    border-radius: 6px 0 0 6px;
    white-space: nowrap;
}

.cantidad {
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}


.estadistica-bloque {
    background: #fff;
    border: 1px solid #ddd;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.estadistica-bloque h3 {
    color: var(--primario);
    margin-bottom: 12px;
    font-size: 1.2em;
}

.estadistica-bloque ul {
    list-style: none;
    padding-left: 0;
}

.estadistica-bloque li {
    padding: 6px 0;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    font-size: 15px;
}




.esquina-inferior {
    position: fixed;
    bottom: 10px;
    right: 10px;
    width: 60px; /* ajusta el tamaño según necesites */
    height: auto;
    opacity: 0.8;
    z-index: 9999;
    transition: opacity 0.3s ease;
}

.esquina-inferior:hover {
    opacity: 1;
}


.icono-superior {
    position: absolute;
    top: 10px;
    left: 280px; /* si tu sidebar mide 220px, ajusta según tu diseño */
    width: 100px;
    height: auto;
    z-index: 1000;
    opacity: 0.9;
}
.form-filtros {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
    background: #fff;
    padding: 16px;
    border-radius: 10px;
    max-width: 400px;
    margin: auto;
}

.form-filtros select,
.form-filtros button {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 15px;
}

.resultados {
    list-style: none;
    padding: 0;
    max-width: 800px;
    margin: auto;
}

.resultados li {
    padding: 12px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.btn-wa {
    background: #25D366;
    color: white;
    padding: 6px 12px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
}


.tabla-resultados {
    width: 100%;
    max-width: 800px;
    margin: 20px auto;
    border-collapse: collapse;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 6px rgba(0,0,0,0.1);
}

.tabla-resultados th, .tabla-resultados td {
    padding: 12px;
    border-bottom: 1px solid #eee;
    text-align: left;
}

.tabla-resultados th {
    background-color: var(--primario);
    color: white;
    font-weight: normal;
}

.tabla-resultados tbody tr:hover {
    background-color: #f9f9f9;
}

.btn-wa {
    background: #25D366;
    color: white;
    padding: 6px 12px;
    text-decoration: none;
    border-radius: 6px;
    display: inline-block;
    font-weight: bold;
}


.calendario-container {
  width: 100%;
  max-width: 800px;
  background: #ffffff;
  border: 2px solid var(--primario);
  border-radius: 10px;
  padding: 16px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  margin: auto;
}

.calendario-titulo {
  text-align: center;
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 10px;
  color: var(--primario);
}

.calendario-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.dia-header {
  font-weight: bold;
  text-align: center;
  color: #333;
  border-bottom: 1px solid #ccc;
  padding: 4px;
}

.dia {
  text-align: center;
  padding: 10px 0;
  border-radius: 6px;
  background: var(--primario);
  font-weight: bold;
  color: #FFF;
}

.dia.empty {
  background: transparent;
  border: none;
}

.dia.resaltado {
  background-color: var(--terciario);
  color: white;
}


.detalle-dia {
    max-width: 800px;
    margin: 20px auto;
    padding: 16px;
    border: 2px solid var(--primario);
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    font-size: 16px;
    color: #333;
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}




.cal-wrapper{ max-width: 980px; margin: 0 auto; }
.cal-wrapper h2{ text-align:center; margin:10px 0 14px; color:var(--primario); }

.cal-filtros{
  display:flex; gap:10px; justify-content:center; margin-bottom:14px;
}
.cal-filtros select{
  padding:10px; border:1px solid #cbd5e1; border-radius:8px; min-width:200px;
}

.cal-card{
  background:#fff; border:2px solid var(--primario);
  border-radius:12px; padding:16px; box-shadow:0 2px 8px rgba(0,0,0,.06);
}

.cal-header{
  text-align:center; font-weight:800; font-size:28px; color:var(--primario);
  margin-bottom:12px;
}

.cal-grid{
  display:grid; grid-template-columns: repeat(7, 1fr); gap:10px;
}

.cal-day-hd{
  text-align:center; font-weight:700; color:#0f172a; opacity:.8;
  padding:6px 0; border-bottom:1px solid #e2e8f0;
}

.cal-day{
  background:#072443; color:#fff; text-align:center; font-weight:700;
  padding:14px 0; border-radius:10px; cursor:default; user-select:none;
}
.cal-day.empty{ background:transparent; border:none; }
.cal-day.has-event{
  background:var(--terciario); cursor:pointer;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.2);
}
.cal-day.has-event:hover{ filter:brightness(.95); }

.cal-modal{
  position:fixed; inset:0; background:rgba(0,0,0,.55);
  display:none; align-items:center; justify-content:center; z-index:9999;
}
.cal-modal-content{
  background:#fff; border-radius:12px; padding:18px; width:min(620px, 92vw);
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.cal-close{
  float:right; border:none; background:transparent; font-size:26px; cursor:pointer;
  color:#64748b;
}
#cal-modal-titulo{ margin:4px 0 12px; color:#0f172a; }

.cal-ev-item{
  display:flex; gap:12px; padding:10px; border:1px solid #e2e8f0;
  border-radius:8px; margin-bottom:10px; background:#f8fafc;
}
.cal-ev-hora{
  min-width:68px; font-weight:800; color:var(--primario); text-align:center;
}
.cal-ev-lugar{ font-weight:700; color:#111827; }
.cal-ev-desc{ color:#374151; }



.prov-wrapper{ max-width: 1100px; margin: 0 auto; }
.prov-grid{
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 20px;
  align-items: start;
}
.prov-grid label{ display:block; font-weight:600; margin:8px 0 4px; color:var(--primario); }
.prov-grid input[type="text"], .prov-grid select{
  width: 100%; padding:10px; border:1px solid #cbd5e1; border-radius:8px;
}
.help{ font-size: .9rem; color:#475569; margin:10px 0; }
.btns{ display:flex; gap:10px; margin-top:10px; }
.btns button{ padding:10px 14px; border:none; border-radius:8px; cursor:pointer; }
.btns button#undo, .btns button#clear{ background:#e2e8f0; }
.btns button[type="submit"]{ background:var(--primario); color:#fff; font-weight:700; }

.map-stage{ position:relative; border:2px solid var(--primario); border-radius:12px; overflow:hidden; }
.map-stage img{ display:block; width:100%; height:auto; }
.overlay{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; /* solo clic al IMG */
}
.legend{ margin-top:8px; color:#334155; }





.mapa-wrapper{ max-width:1100px; margin:0 auto; }
.mapa-wrapper h2{ color:var(--primario); text-align:center; margin:10px 0 14px; }
.mapa-legend{ margin-bottom:10px; display:flex; gap:8px; justify-content:center; }
.pill{ background:#f1f5f9; border:1px solid #e2e8f0; padding:6px 10px; border-radius:999px; }

.mapa-stage{
  position:relative;
  width:var(--tamano);
  height:var(--tamano);
  margin:auto;
  border:0px solid var(--primario);
  border-radius:12px;
  overflow:hidden;
}

#mapa-fondo{
  width:var(--tamano);
  height:var(--tamano);
  display:block;
  object-fit:cover;
}

#mapa-svg{
  position:absolute;
  inset:0;
  width:var(--tamano);
  height:var(--tamano);
}

#mapa-svg polygon{
  fill: transparent;             /* no color */
  stroke: #111;                  /* contorno por defecto */
  stroke-width: 0;
  transition: all .2s ease;
  cursor:pointer;
}
#mapa-svg polygon:hover{
  fill: #ff0000;
  stroke: #ffffff;
  stroke-width: 0.5;
}


.mapa-tooltip{
  position:fixed; background:#fff; color:#111; border:1px solid #e5e7eb;
  border-radius:8px; padding:8px 10px; font-size:14px; box-shadow:0 6px 18px rgba(0,0,0,.12);
  pointer-events:none; z-index:10000;
}

/* Reutilizamos modal/cal estilos existentes */
.cal-modal{ position:fixed; inset:0; background:rgba(0,0,0,.55); display:none;
  align-items:center; justify-content:center; z-index:9999; }
.cal-modal-content{
  background:#fff; border-radius:12px; padding:18px; width:min(800px,92vw);
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.cal-close{ float:right; border:none; background:transparent; font-size:26px; cursor:pointer; color:#64748b; }

/* Mini tabla / lista dentro del modal */
.mini-list{ list-style:none; padding:0; margin:6px 0 14px; }
.mini-list li{ padding:6px 0; border-bottom:1px solid #eee; }

.tabla-resultados{
  width:100%; border-collapse:collapse; background:#fff; border-radius:10px; overflow:hidden;
}
.tabla-resultados th, .tabla-resultados td{ padding:10px; border-bottom:1px solid #eee; text-align:left; }
.tabla-resultados th{ background:var(--primario); color:#fff; font-weight:600; }
.btn-wa{ background:#25D366; color:#fff; padding:6px 10px; text-decoration:none; border-radius:6px; font-weight:700; display:inline-block; }

/* Contenedor lateral (mapa + tabla) */
.mapa-layout{
  display:flex;
  gap:16px;
  align-items:flex-start;
}


.mapa-tooltip{
  position:fixed; background:#fff; color:#111; border:1px solid #e5e7eb;
  border-radius:8px; padding:8px 10px; font-size:14px;
  box-shadow:0 6px 18px rgba(0,0,0,.12); pointer-events:none; z-index:10000;
}

/* Tabla lateral */
.mapa-table{ flex:1; width: 50%; min-width:150px; }
.tabla-head{ margin-bottom:8px; color:var(--primario); font-weight:700; }
.tabla-scroll{
  max-height:500px; overflow:auto; border:0px solid #e5e7eb; border-radius:10px;
  background:#fff;
}

.tabla-resultados{
  width:100%; border-collapse:collapse;
}
.tabla-resultados th, .tabla-resultados td{
  padding:8px 10px; border-bottom:1px solid #f1f5f9; text-align:left;
  font-size:14px;
}
.tabla-resultados thead th{
  position:sticky; top:0; background:var(--primario); color:#fff; z-index:1;
}
.tabla-compacta td:nth-child(1){ width:150px; }
.tabla-compacta td:nth-child(3){ font-weight:700; }

/* Responsive: en móvil, la tabla se pone debajo del mapa */
@media (max-width: 900px){
  .mapa-layout{ flex-direction:column; }
  .mapa-table{ width:100%; }
}


/* Indicar que la fila de la tabla es clicable */
.fila-prov { cursor: pointer; }
.fila-prov:hover { background: #f9fafb; }

/*=========================================BOTON DE CERRAR MENU=========================================*/

:root{
  --sidebar-w: 240px;   /* ancho normal */
  --sidebar-w-collapsed: 0px; /* colapsado */
}

/* layout base */
.layout{
  display: flex;
  min-height: 100vh;
}

/* topbar + botón */
.topbar{
  display:fixed; 
  position: fixed;
  top: 0px;
  left: 0px;
  align-items:center; 
  gap:8px;
  padding:2px; 
}
.toggle-btn{
  background: var(--primario); color:#fff; border:none; border-radius:8px;
  padding:8px 12px; cursor:pointer; font-weight:600;
}

/* sidebar */
.sidebar{
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  color: #fff;
  transition: width .25s ease, transform .25s ease;
  overflow: hidden;
}

/* contenido */
.content{
  flex: 1 1 auto;
  min-width: 0;                /* importante para que flex permita encoger/expandir */
  padding: 16px;
  transition: padding .2s ease;
}

/* --- Estado colapsado en DESKTOP --- */
body.sidebar-collapsed .sidebar{
  width: var(--sidebar-w-collapsed);
  flex-basis: var(--sidebar-w-collapsed);
}

/* --- MÓVIL: sidebar como panel deslizante --- */
@media (max-width: 900px){
  .layout{ position: relative; }
  .sidebar{
    position: fixed;
    top: 0px;                 /* altura de la topbar (ajusta si cambia) */
    left: 0;
    bottom: 0;
    transform: translateX(-100%);
    width: var(--sidebar-w);
    flex-basis: var(--sidebar-w);   /* no afecta en fixed, pero deja consistente */
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
    z-index: 1000;
  }
  body.sidebar-open .sidebar{
    transform: translateX(0);
  }
  /* opcional: empujar un poco el contenido cuando está abierto en móvil */
  body.sidebar-open .content{
    padding-left: 8px;
  }
}

/* (opcional) overlay oscuro cuando el menú móvil está abierto */
@media (max-width: 900px){
  body.sidebar-open::after{
    content:"";
    position: fixed; inset: 0; top:56px;
    background: rgba(0,0,0,.35);
    z-index: 900;
  }
}

/*=========================================BOTON DE CERRAR MENU=========================================*/

/*==========================================GRAFICOS==================================================*/

.charts-wrapper{ max-width:1100px; margin:0 auto; }
.charts-wrapper h2{ color:var(--primario); text-align:center; margin:10px 0 14px; }

.chart-card{ background:#fff; border:2px solid var(--primario);
  border-radius:12px; padding:14px; box-shadow:0 2px 8px rgba(0,0,0,.06); }

.chart-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.chart-legend-note{ color:#475569; font-size:14px; }

/* 🔧 ALTO CONTROLADO AQUÍ */
.chart-area{ position:relative; height:360px; }

/* el canvas ocupa el área fija sin forzar reflow */
.chart-area canvas{ width:100% !important; height:100% !important; display:block; }


/*==========================================GRAFICOS==================================================*/

/*===============================================DERIVACIONES=========================================*/
.deriv-wrapper{ max-width:1100px; margin:0 auto; }
.deriv-wrapper h2{ color:var(--primario); text-align:center; margin:10px 0 14px; }

.deriv-toolbar{ display:flex; gap:8px; align-items:center; margin-bottom:10px; }
.deriv-toolbar select{ padding:8px 10px; border:1px solid #cbd5e1; border-radius:8px; }

/* Lista de árboles */
.deriv-list{ display:grid; gap:18px; }
.deriv-loading,.deriv-empty{ padding:12px; color:#475569; }

/* Un árbol A -> B list */
.tree{
  position:relative;
  background:#fff;
  border:2px solid var(--primario);
  border-radius:12px;
  padding:16px 16px 14px 16px;
  overflow-x:auto; /* por si hay muchos B en móviles */
}

/* Nodo base A (rojo) */
.node-card{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:10px 14px; border-radius:10px; border:2px solid #111827;
  box-shadow: 0 2px 0 rgba(0,0,0,.25);
  color:#fff; font-weight:700; letter-spacing:.2px; white-space:nowrap;
}
.node-name{ font-size:18px; }
.node-count{ font-size:18px; opacity:.95; }

.node-a-card{ background:#ff0033; }              /* rojo */
.node-b-card{ background:var(--primario); }              /* azul */

/* Tronco y niños */
.trunk{
  width:2px; background:#111827; height:18px; margin:6px 0 10px 24px;
}
.children{
  display:flex;            /* SIEMPRE columna */
  flex-direction:column;
  gap:10px;
  padding-left:24px;
  position:relative;
}
.children .node-b{
  position:relative;
}

.children .node-b::before{
  content:none !important;
}










/* Responsive: si hay muchos B, hacer columnas en desktop */
@media (min-width: 900px){
  .children{ display:grid; grid-template-columns: repeat(2, minmax(280px, 1fr)); gap:10px 16px; }
  .children .node-b::before{ top:22px; } /* centrar línea en tarjetas más altas */
}


/*===============================================DERIVACIONES=========================================*/

/*================================================FORMULARIO EVENTOS==============================================*/


.formulario-evento {
  display: flex;
  flex-direction: column;
  gap: 10px;
 /* background: #ffffff;*/
  padding: 15px;
  border-radius: 10px;
  margin-bottom: 30px;
}

.formulario-evento input, .formulario-evento textarea {
  display: flex;
  padding: 8px;
  font-size: 1em;
  border-radius: 5px;
  border: 1px solid #ccc;

}

.tabla-eventos {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}

.tabla-eventos th, .tabla-eventos td {
  padding: 10px;
  border: 1px solid #ccc;
  text-align: left;
}

.tabla-eventos th {
  background: #003366;
  color: white;
}


/*================================================FORMULARIO EVENTOS==============================================*/



.centered-logo {              /* ocupa el alto de la ventana */
  display: flex;
  align-items: center;              /* centra vertical */
  justify-content: center;          /* centra horizontal */
  padding: 2rem;
}

.centered-logo img {
  width: 200px;
  height: 200px;
  object-fit: contain;              /* evita deformaciones si tu logo no es cuadrado */
  display: block;
}