/* =========================
   BASE (Mobile First)
========================= */

/* GRID CALENDARIO */
.calendar-grid{
    display:grid;
    grid-template-columns:repeat(7, minmax(120px,1fr));
    gap:8px;
    overflow-x:auto;
    padding-bottom:8px;
}

/* Scroll */
.calendar-grid::-webkit-scrollbar{
    height:6px;
}
.calendar-grid::-webkit-scrollbar-thumb{
    background:#1f3a5f;
    border-radius:10px;
}

/* HEADER */
.header{
    text-align:center;
    font-weight:700;
    padding:8px;
    background:#1f3a5f;
    color:#fff;
    border-radius:6px;
    font-size:18px;
}

/* =========================
   MODAL
========================= */

.modal{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.55);
    justify-content:center;
    align-items:center;
    z-index:9999;
}

.modal-content {
    width: 50%;
    max-width: 700px;   /* evita que crezca demasiado en pantallas grandes */
    min-width: 300px;   /* evita que se rompa en pantallas pequeñas */
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 12px;
    background: #fff;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

/* HEADER MODAL */
.modal-header{
    display:flex;
    position:relative;
    padding-left:50px; /* ← espacio para que el texto no choque con el icono */
    align-items:center;
    justify-content:flex-start;
    gap:8px;

    background:color-mix(in srgb, var(--event-color, #1f3a5f) 80%, black);
    color:#020202;
    font-size:30px;
    height:2em;
}

#modalIcon{
    position:absolute;
    left:25px;          /* ← borde exacto */
    top:50%;
    transform:translateY(-50%);
    font-size:40px;
}

#modalTitle{
    position:static;   /* ← quitar absolute */
    transform:none;    /* ← quitar translate */
    margin:0;
    font-size:16px;
    font-weight:700;
}

/* BODY */
.modal-body{
    padding:14px;
}

.modal-date{
    font-weight:700;
    font-size:15px;
    text-align:center;
    margin-bottom:8px;
}

.modal-desc{
    font-size:14px;
    margin-bottom:10px;
    line-height:1.4;
}

/* GRID INFO */
.modal-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    font-size:13px;
}

.modal-item{
    background:#f5f7fb;
    padding:8px;
    border-radius:8px;
}

.modal-link{
    color:#1f3a5f;
    font-weight:700;
    text-decoration:none;
}
.modal-link:hover{
    text-decoration:underline;
}

/* Header del modal */
.modal-content {
  background: white;
}

/* Usa el color dinámico */
.modal-header {
  background: var(--event-color);
  color: #1f3a5f; /* default */
}

/* 👉 CUANDO ES FERIADO */
.modal-content.holiday .modal-header {
  color: #ffffff !important;
}

/* Opcional: mejorar visibilidad */
.modal-content.holiday .modal-header h2 {
  color: #ffffff;
}

/* BADGES */
.badge{
    display:inline-block;
    padding:4px 8px;
    border-radius:6px;
    font-size:11px;
    font-weight:700;
    color:#fff;
}
.badge.low{ background:#43a047; }
.badge.medium{ background:#f9a825; }
.badge.high{ background:#e53935; }

/* CLOSE */
.close{
    position:absolute;
    top:8px;
    right:10px;
    width:30px;
    height:30px;

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

    font-size:50px;      /* ↓ baja el tamaño */
    line-height:2;       /* clave */
    font-weight:900;

    color:#0e1b2c !important;

    cursor:pointer;
    z-index:999;

    border-radius:50%;
    backdrop-filter: blur(4px);
    transform: translateY(-1px); /* ajuste fino vertical */

    transition: all 0.2s ease;
}

.close span{
    transform: translateY(-1px);
}

.close:hover{
    color:#ffffff !important; /* blanco */
}

/* =========================
   CALENDARIO
========================= */

.cell{
    background:#fff;
    border:1px solid #ddd;
    border-radius:10px;
    min-height:95px;
    padding:4px;
    position:relative;
    overflow:hidden;
}

.cell.today{
    border:2px solid #ff0015;
    background:#f8dde3;
}

.day{
    font-weight:700;
    margin-bottom:4px;
    display:flex;
    justify-content:space-between;
    background-color: #bcc2c5ab;
    font-size:18px;
    color:#1f3a5f
}

.today-label{
    position:absolute;
    top:2px;
    left:50%;
    transform:translateX(-50%);
    color:#d32f2f;
    font-weight:900;
    font-size:16px;
}

.event{
    font-size:14px;
    padding:3px;
    margin-bottom:3px;
    border-radius:6px;
    cursor:pointer;
    background:var(--event-color);
    color:#2c2c29;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.event.holiday{
    font-weight:700;
    color:#fff !important;
    border-left:3px solid #b71c1c;
}

.more-events{
    font-size:14px;
    font-weight:700;
    color:#1f3a5f;
    padding:3px;
    border-radius:6px;
    background:#e3eafc;
    text-align:center;
}

/* =========================
   NAV (GRID CONTROLADO)
========================= */

.calendar-nav{
    margin-bottom:14px;
}

.calendar-controls{
    display:grid;
    grid-template-columns: repeat(3, max-content);
    grid-template-rows: auto auto;
    gap:10px 12px; /* fila / columna */
    align-items:center;
}

.calendar-controls select:nth-of-type(1){
    grid-column:1;
    grid-row:1;
}

.calendar-controls select:nth-of-type(2){
    grid-column:2;
    grid-row:1;
}

.calendar-controls select:nth-of-type(3){
    grid-column:3;
    grid-row:1;
}

.calendar-controls button:nth-of-type(1),
.calendar-controls .button:nth-of-type(1),
.calendar-controls input[type="button"]:nth-of-type(1),
.calendar-controls input[type="submit"]:nth-of-type(1){
    grid-column:1;
    grid-row:2;
}

.calendar-controls button:nth-of-type(2),
.calendar-controls .button:nth-of-type(2),
.calendar-controls input[type="reset"]:nth-of-type(1){
    grid-column:2;
    grid-row:2;
}

.calendar-controls select,
.calendar-controls button,
.calendar-controls .button,
.calendar-controls input{
    width:auto;
}

/* =========================
   LEYENDA
========================= */

.calendar-legend{
    margin-top:16px;
    padding:12px;
    border-radius:10px;
    border:1px solid #e5e7eb;
}

.legend-title{
    font-size:15px;
    font-weight:700;
    margin-bottom:10px;
    color:#1f3a5f;
}

.legend-items{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.legend-item{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:13px;
    font-weight:700;
}

.legend-notes{
    font-size:15px;
    font-weight:700;
    color:#e53935;
    padding-left:10px;
    font-style:italic;
}

.legend-color{
    width:24px;
    height:12px;
    border-radius:4px;
    border:1px solid rgba(0,0,0,0.8);
}

.legend-text{
    color:#333;
}