:root {
  --primary: #005A9C;
  --primary-light: #0074C2;
  --bg: #F7F9FC;  /* Fondo claro */
  --text: #1D2433;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
}
]:root{
  --blue:#005A9C;
  --blue-light:#0074C2;
  --bg:#F5F6FA;
  --sidebar:#02658E;
  --text:#1D2433;
  --azul:#3B82F6;
  --verde:#22C55E;
  --amarillo:#EAB308;
  --calipso:#06B6D4;
  --celeste:#7DD3FC;
  --gris:#9CA3AF;
}
*{box-sizing:border-box;font-family:Inter, sans-serif;}
body{margin:0;background:var(--bg);color:var(--text);}

/* Barra superior */
.topbar{display:flex;align-items:center;padding:.5rem 1rem;background:#1F2937;color:#fff;gap:1rem;}
.topbar button{background:none;border:none;color:#fff;font-size:1.2rem;cursor:pointer;}
.week-nav{display:flex;align-items:center;gap:.5rem;font-size:1rem;}
.legend{margin-left:auto;display:flex;gap:.5rem;font-size:.75rem;}
.chip{padding:.2rem .4rem;border-radius:4px;color:#fff}
.chip.azul{background:var(--azul);} .chip.verde{background:var(--verde);}
.chip.amarillo{background:var(--amarillo);} .chip.calipso{background:var(--calipso);}
.chip.celeste{background:var(--celeste);} .chip.gris{background:var(--gris);}

/* Layout */
.layout{display:flex;height:calc(100vh - 48px);}
#sidebar{width:260px;background:var(--sidebar);color:#fff;display:flex;flex-direction:column;}
#miniCalendar{padding:1rem;}
#medSearch{margin:0 .7rem .5rem;border:none;border-radius:4px;padding:.4rem;width:calc(100% - 
1.4rem);}
#medList{flex:1;overflow-y:auto;margin:0;padding:0 0 .5rem;list-style:none;}
#medList li{padding:.4rem .7rem;cursor:pointer;}
#medList li.active{background:#0388BE;}
.btn-full{margin:.5rem .7rem;padding:.5rem;border:none;width:calc(100% - 
1.4rem);border-radius:4px;background:var(--verde);color:#fff;font-weight:600;cursor:pointer;}
.count-box{margin:.2rem .7rem 
.7rem;font-size:.8rem;text-align:center;padding:.3rem;background:#014460;border-radius:4px;}
.content{flex:1;padding:.5rem;overflow:hidden;}
#calendar{height:100%;}

/* FAB */
#fab{position:fixed;right:24px;bottom:24px;width:56px;height:56px;border:none;border-radius:50%;background:var(--blue);color:#fff;font-size:2rem;cursor:pointer;box-shadow:0 
4px 12px rgba(0,0,0,.2);}

/* Modal */
.modal{
  position:fixed; inset:0;
  background:rgba(0,0,0,.5);   /* + oscura */
  display:flex; align-items:center; justify-content:center;
  z-index:1000;
}
.hidden{display:none;}

.modal-card{
  background:#fff;
  padding:2rem;
  border-radius:10px;
  width:720px;          /* NUEVO ancho */
  max-width:95%;
  box-shadow:0 8px 24px rgba(0,0,0,.2);
  position:relative;
  font-size:.95rem;
}
/* grid de filas */
.modal-card .row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
  margin-bottom:1rem;
}
.modal-card label{display:flex;flex-direction:column;font-weight:600;}
.modal-card input, .modal-card select, .modal-card textarea{
  margin-top:.25rem;
  padding:.45rem;
  border:1px solid #ccc;
  border-radius:4px;
  font-size:1rem;
}
.actions{
  display:flex;gap:.5rem;justify-content:flex-start;margin-top:1rem;
}
.close{
  position:absolute;top:8px;right:8px;
  background:none;border:none;font-size:1.25rem;cursor:pointer;
}

}/* -------- Layout 2 columnas dentro del modal --------------------- 
*/
.grid-2col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem .75rem;
}
.grid-2col label{
  font-size:.85rem;
  display:flex;
  flex-direction:column;
}

/* Botonera inferior */
.actions{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin-top:1.25rem;
}


/* ---- LOGIN CARD (centrado) ------------------------- */
.login-wrapper{
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}
.card{
  background:#fff;
  padding:2rem 3rem;
  width:320px;
  border-radius:8px;
  box-shadow:0 4px 12px rgba(0,0,0,.1);
  text-align:center;
}
.card img{max-width:160px;margin:0 auto 1rem;display:block;}
.card input{
  width:100%;
  margin:.4rem 0;
  padding:.45rem;
  border:1px solid #ccc;
  border-radius:4px;
}
.card button{
  width:100%;
  padding:.5rem;
  border:none;
  border-radius:4px;
  background:var(--blue);
  color:#fff;
  font-weight:600;
  cursor:pointer;
}
.card button:hover{background:var(--blue-light);}
/* ---- MINI-CALENDARIO COMPACTO -------------------- */
#miniCalendar{
  width:100%;           /* ← ocupa todo el ancho */
  max-width:240px;      /* ← evita desbordar si la barra se ensancha */
  margin:0 auto;        /* ← centra dentro del sidebar */
  font-size:.72rem;
  border:1px solid #d0d5db;
  border-radius:4px;
  background:#fff;
}
.mc-header{
  display:flex;align-items:center;justify-content:center;
  gap:.25rem;
  background:#005A9C;        /* azul corporativo */
  color:#fff;
  font-size:.75rem;
  padding:.15rem 0;
  border-radius:4px 4px 0 0;
}
.mc-header button{
  background:none;border:none;color:#fff;font-weight:600;
  cursor:pointer;font-size:.8rem;padding:0 .25rem;
}
#miniGrid .fc-col-header-cell{
  background:#eaf2fb;color:#005A9C;padding:.1rem 0;font-size:.65rem;
}
#miniGrid .fc-daygrid-day{height:26px;width:26px;}
#miniGrid .fc-day-today{background:#3B82F6;color:#fff;}
#miniGrid .fc-daygrid-day.fc-day-selected{background:#22C55E;color:#fff;}

/* ---- OVERLAY DEL MODAL --------------------------- */
.modal{
  position:fixed;inset:0;
  background:rgba(0,0,0,.45);           /* oscurecido */
  backdrop-filter:blur(3px);            /* desenfoque */
}
.modal-card{
  box-shadow:0 8px 24px rgba(0,0,0,.25);/* resalta la tarjeta */
}
/* Ajuste fino: mostrar números del mini-calendario */
#miniGrid .fc-daygrid-day-number{
  position:absolute;      /* se coloca sobre la celda */
  top:2px; left:0; right:0;
  line-height:inherit;
  text-align:center;
  font-size:.75rem;
}
#miniGrid .fc-daygrid-day{
  position:relative;      /* referencia para el número */
}
/* Forzar color y visibilidad de los números en mini-calendario */
#miniGrid .fc-daygrid-day-number{
  color:#1D2433 !important;     /* gris oscuro corporativo */
  font-weight:600;
  z-index:2;                    /* delante de la cuadrícula */
}
/* ====== CONTEXT MENU (clic derecho) ====== */
.ctx-menu{
  position:absolute; z-index:1000;
  list-style:none; margin:0; padding:.25rem 0;
  background:#fff; border:1px solid #d1d5db; border-radius:4px;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
  font-size:.85rem;
}
.ctx-menu li{
  padding:.35rem 1.25rem; cursor:pointer; white-space:nowrap;
}
.ctx-menu li:hover{ background:#f1f5f9; }
/* Corrige color fijo de barra superior */
.topbar {
  background: #0d3a66 !important;
}/* -------------------------------------------------
   BOTÓN "ENTRAR"  (login)
--------------------------------------------------*/
.card button{
  width:100%;
  padding:.6rem;
  border:none;
  border-radius:4px;
  background:var(--primary);      /* azul corporativo */
  color:#fff;
  font-weight:600;
  cursor:pointer;
}
.card button:hover{
  background:var(--primary-light);/* azul un poco más claro */
}

/* -------------------------------------------------
   FONDO GRADIENTE (login y resto de páginas)
--------------------------------------------------*/
/* Fondo por defecto para todo el sitio */
body{
  margin:0;
  background: var(--bg);      /* gris claro */
  color: var(--text);
}

/* Fondo degradado SOLO para la página de login */
body.login{
  background: linear-gradient(135deg,#0099cc 0%,#00ccff 100%);
}
/* =========================================================
   SLOTS DE 20 MIN Y ESTILOS DE EVENTOS (Agenda principal)
   ========================================================= */

/* Altura fija de cada bloque de 20 minutos */
.fc .fc-timegrid-slot {
  height: 40px;
  max-height: 40px;
  padding: 0;
}

/* Etiqueta de la hora (columna izquierda) centrada vertical */
.fc .fc-timegrid-slot-label {
  line-height: 40px;
  font-size: .80rem;
  font-weight: 500;
  color: #0d2238;
}

/* (Opcional) leve diferenciación visual – desactiva si no te gusta */
.fc .fc-timegrid-slot:nth-child(odd) {
  background: #f9fbfd;
}

/* Estilos base de los eventos (citas) */
.fc .fc-event {
  font-size: .70rem;
  line-height: 1.05;
  padding: 2px 4px;
  border-radius: 4px;
  border: 1px solid #1d6fd8;
  background: linear-gradient(90deg,#1976d2,#2196f3);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

/* Permitir varias líneas (nombre + prestación) */
.fc .fc-event-title,
.fc .fc-event-time {
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Segunda línea para la prestación (cuando la agreguemos vía eventContent) */
.fc .fc-event .prestacion {
  font-weight: 400;
  opacity: .85;
  margin-top: 2px;
  display: block;
  font-size: .60rem;
  line-height: 1.05;
}

/* Ajustes cuando se seleccionan varios slots (selección de rango) */
.fc .fc-timegrid-col-frame .fc-highlight {
  background: rgba(25,118,210,.18);
}

/* Hover opcional sobre slot vacío (feedback visual) */
.fc .fc-timegrid-col-frame:hover {
  cursor: pointer;
}