/*
 |--------------------------------------------------------------------------
 | Rejilla del calendario
 |--------------------------------------------------------------------------
 | AQUI SOLO VA LA GEOMETRIA DE LA REJILLA. Todo lo demas de la pagina
 | (botones, selects, badges, secciones) usa componentes nativos de Filament,
 | no clases propias.
 |
 | Se escribe a mano porque Filament no trae componente de calendario y la
 | vista de "recursos" de FullCalendar (una columna por van) es de pago.
 | Los colores salen de las variables de petvan.css, con respaldo por si
 | esa hoja no cargara.
 */

.pv-cal-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.pv-cal-grid {
    display: grid;
    border: 1px solid var(--pv-line, rgba(255,255,255,.08));
    border-radius: 12px; overflow: hidden;
    background: var(--pv-surface, #191919);
    min-width: 520px;
}

.pv-cal-corner { border-bottom: 1px solid var(--pv-line, rgba(255,255,255,.08)); }

.pv-cal-head {
    padding: 12px 10px; text-align: center;
    font-size: 12px; font-weight: 700; letter-spacing: .04em;
    color: var(--van); background: color-mix(in srgb, var(--van) 7%, transparent);
    border-bottom: 1px solid var(--pv-line, rgba(255,255,255,.08));
    border-left: 1px solid var(--pv-line, rgba(255,255,255,.08));
}
.pv-cal-head small { display: block; font-weight: 400; opacity: .65; font-size: 10px; font-family: 'Geist Mono', monospace; }
.pv-cal-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--van); margin-right: 5px; }

/* Cabecera de la vista semanal (sin color de van). */
.pv-cal-head-day {
    color: var(--pv-text-2, #C4C4C4); background: transparent; text-transform: capitalize;
}
.pv-cal-head-day.is-today { color: var(--pv-accent, #FD671C); background: rgba(253,103,28,.08); }

.pv-cal-time {
    padding: 6px 8px; text-align: right;
    font-family: 'Geist Mono', monospace; font-size: 10.5px;
    color: var(--pv-text-3, #989898);
    border-right: 1px solid var(--pv-line, rgba(255,255,255,.08));
    border-bottom: 1px solid var(--pv-line, rgba(255,255,255,.08));
    min-height: 64px;
}

/* Alto de una hora. Toda la geometria del calendario se mide con esto. */
:root { --pv-hora: 64px; }

.pv-cal-cell {
    /* height fija, NO min-height: los bloques se posicionan multiplicando por
       el alto de una hora, y si las filas crecieran cada una por su lado la
       escala dejaria de ser uniforme. */
    height: var(--pv-hora); padding: 3px;
    position: relative; overflow: visible;
    border-left: 1px solid var(--pv-line, rgba(255,255,255,.08));
    border-bottom: 1px solid var(--pv-line, rgba(255,255,255,.08));
    display: flex; flex-direction: column; gap: 3px;
}
.pv-cal-cell.is-today { background: rgba(253,103,28,.03); }

/* Tarjeta de cita (dia y semana). */
.pv-cal-appt {
    /* Posicionada por hora de inicio y duracion real: una cita de dos horas
       ocupa dos celdas de alto e invade visualmente las horas siguientes. */
    position: absolute;
    top: calc(var(--pv-min, 0) / 60 * var(--pv-hora));
    height: calc(var(--pv-dur, 60) / 60 * var(--pv-hora) - 4px);
    left: calc(3px + var(--pv-i, 0) * (100% - 6px) / var(--pv-n, 1));
    width: calc((100% - 6px) / var(--pv-n, 1) - 2px);
    min-height: 18px;
    overflow: hidden;
    z-index: 2;

    display: flex; flex-direction: column; gap: 1px;
    padding: 6px 8px; border-radius: 6px;
    border-left: 3px solid var(--van);
    background: color-mix(in srgb, var(--van) 14%, transparent);
    /* El token, no un blanco fijo: en modo claro el texto blanco sobre el
       tinte de la van era invisible. --pv-text ya cambia con el tema. */
    color: var(--pv-text, #fff); text-decoration: none;
    font-size: 11.5px; font-weight: 600;
    transition: transform .1s ease;
}
.pv-cal-appt:hover { transform: scale(1.02); z-index: 6; overflow: visible; }
.pv-cal-appt-time { font-family: 'Geist Mono', monospace; font-size: 10px; color: var(--van); }
.pv-cal-appt-pet { font-weight: 700; }
.pv-cal-appt small { font-weight: 400; opacity: .7; font-size: 10px; }
.pv-cal-appt-status {
    margin-top: 2px; font-size: 9px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em; opacity: .85;
    font-family: 'Geist Mono', monospace;
}
.pv-cal-appt-status[data-status="completed"] { color: #4A7FA6; }
.pv-cal-appt-status[data-status="in_progress"] { color: var(--pv-accent, #FD671C); }
.pv-cal-appt-status[data-status="en_route"] { color: #FFBC7D; }
.pv-cal-appt-status[data-status="pending"] { color: #989898; }

/* ─── Vista mes ────────────────────────────────────────────── */
.pv-cal-month {
    display: grid; grid-template-columns: repeat(7, minmax(120px, 1fr));
    border: 1px solid var(--pv-line, rgba(255,255,255,.08));
    border-radius: 12px; overflow: hidden;
    background: var(--pv-surface, #191919);
    min-width: 760px;
}
.pv-cal-month-dow {
    padding: 10px; text-align: center;
    font-family: 'Geist Mono', monospace; font-size: 10.5px;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--pv-text-3, #989898);
    border-bottom: 1px solid var(--pv-line, rgba(255,255,255,.08));
    border-left: 1px solid var(--pv-line, rgba(255,255,255,.08));
}
.pv-cal-month-cell {
    min-height: 104px; padding: 6px;
    display: flex; flex-direction: column; gap: 3px;
    border-left: 1px solid var(--pv-line, rgba(255,255,255,.08));
    border-bottom: 1px solid var(--pv-line, rgba(255,255,255,.08));
}
/* Los dias de otro mes se atenuan para leer la rejilla de un vistazo. */
.pv-cal-month-cell.is-outside { opacity: .35; }
.pv-cal-month-cell.is-today { background: rgba(253,103,28,.05); }

.pv-cal-month-num {
    display: flex; align-items: center; justify-content: space-between;
    font-family: 'Geist Mono', monospace; font-size: 11.5px;
    color: var(--pv-text-3, #989898); margin-bottom: 2px;
    cursor: pointer; /* salta a la vista de dia */
}
.pv-cal-month-cell.is-today .pv-cal-month-num { color: var(--pv-accent, #FD671C); font-weight: 700; }
.pv-cal-month-count {
    background: rgba(253,103,28,.16); color: var(--pv-accent, #FD671C);
    border-radius: 20px; padding: 0 6px; font-size: 10px; font-weight: 700;
}

.pv-cal-month-item {
    display: flex; align-items: baseline; gap: 5px;
    padding: 3px 6px; border-radius: 5px;
    border-left: 2px solid var(--van);
    background: color-mix(in srgb, var(--van) 13%, transparent);
    /* El token, no un blanco fijo: en modo claro el texto blanco sobre el
       tinte de la van era invisible. --pv-text ya cambia con el tema. */
    color: var(--pv-text, #fff); text-decoration: none;
    font-size: 10.5px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pv-cal-month-item:hover { background: color-mix(in srgb, var(--van) 24%, transparent); }
.pv-cal-month-time { font-family: 'Geist Mono', monospace; font-size: 9.5px; color: var(--van); }
.pv-cal-month-more { font-size: 10px; color: var(--pv-text-3, #989898); padding-left: 6px; }

/* ── Arrastrar y soltar ────────────────────────────────────────────────────
   Filament no trae calendario, asi que estas cuatro reglas no duplican nada
   suyo. Los colores salen de las variables que escribe Branding: si el
   usuario cambia el color de marca en Ajustes, esto lo sigue solo.          */

/* Franja libre: se nota que es pulsable sin gritar. */
.pv-cal-drop { cursor: cell; transition: background .12s ease, box-shadow .12s ease; }
.pv-cal-drop:hover { background: var(--pv-accent-glow); }

/* Destino valido mientras se arrastra encima. */
.pv-cal-drop.is-over {
    background: var(--pv-accent-soft);
    box-shadow: inset 0 0 0 2px var(--pv-accent);
}

/* La tarjeta arrastrada se atenua para no perderla de vista. */
.pv-cal-appt[draggable='true'],
.pv-cal-month-item[draggable='true'] { cursor: grab; }
.pv-cal-appt.is-dragging,
.pv-cal-month-item.is-dragging { opacity: .4; cursor: grabbing; }