/* agenda.css - La disponibilidad del profesional.
 *
 * La semana se dibuja como SIETE COLUMNAS que caben de un vistazo. Es la forma
 * en que la gente ya piensa su semana; una lista vertical de catorce filas
 * obliga a reconstruirla mentalmente.
 *
 * En telefono las columnas se vuelven filas, porque siete columnas de 50px no
 * son una semana: son una cuadricula ilegible.
 */

.ag-semana {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.ag-dia {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: 11px 10px 13px;
    border: 1px solid var(--kctp-borde);
    border-radius: 14px;
    background: var(--kctp-blanco);
}

.ag-dia > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.ag-dia h4 {
    margin: 0;
    font: 600 13px/1.2 var(--kctp-fuente, inherit);
    color: var(--kctp-tinto);
    /* Los nombres largos ("Miércoles") no deben ensanchar su columna y
       descuadrar la semana entera. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ag-mas {
    flex: none;
    width: 24px; height: 24px;
    display: grid; place-items: center;
    border: 1px solid var(--kctp-borde-f);
    border-radius: 7px;
    background: var(--kctp-panel);
    color: var(--kctp-acento);
    font-size: 11px;
    cursor: pointer;
}

.ag-mas:hover { background: var(--kctp-acento); color: #fff; border-color: var(--kctp-acento); }

.ag-franjas { display: grid; gap: 6px; }

/* LAS DOS HORAS VAN UNA DEBAJO DE OTRA, y la equis al costado.
 *
 * Dos intentos hicieron falta, los dos vistos en pantalla y no en el codigo:
 *   1. Una cuadricula donde la "a" pedia la columna 1 y la equis pedia la 2 en
 *      todas las filas. Las horas se empujaban entre si y salia una caja
 *      aplastada arriba y la otra perdida abajo.
 *   2. Flex en una sola linea. Un campo de hora en espanol dice "09:00 a. m."
 *      y trae su relojito: pide unos 120 px. Dos de esos no caben en una
 *      columna de 150 px, asi que se partia igual, pero dejando la "a" colgada
 *      al final de la primera linea.
 *
 * Con areas nombradas no hay nada que interpretar: cada pieza tiene su sitio.
 */
.ag-franja {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "ini x"
        "sep x"
        "fin x";
    align-items: center;
    gap: 2px 5px;
    padding: 7px 8px;
    border-radius: 10px;
    background: var(--kctp-crema);
}

.ag-franja [name="inicio[]"] { grid-area: ini; }
.ag-franja > span            { grid-area: sep; }
.ag-franja [name="fin[]"]    { grid-area: fin; }

.ag-franja input[type="time"] {
    width: 100%;
    min-width: 0;
    padding: 4px 5px;
    border: 1px solid var(--kctp-borde);
    border-radius: 6px;
    background: #fff;
    color: var(--kctp-tinta);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
}

.ag-franja input[type="time"]:disabled { background: var(--kctp-panel); color: var(--kctp-tenue); }

/* El relojito nativo de Chrome se lleva 20 px de una columna de 150, y con eso
   "09:00 a. m." se corta en "09:00 a.". Se encoge, no se quita: sin el, en
   telefono no hay como abrir el selector y habria que escribir la hora a mano. */
.ag-franja input[type="time"]::-webkit-calendar-picker-indicator {
    width: 12px;
    margin-left: 0;
    padding: 0;
    opacity: .55;
}

/* La "a" de "de 9:00 a 13:00". */
.ag-franja > span {
    font-size: 11px;
    color: var(--kctp-tenue-2);
    line-height: 1;
}

.ag-quita {
    grid-area: x;
    width: 22px; height: 22px;
    display: grid; place-items: center;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--kctp-tenue-2);
    font-size: 10px;
    cursor: pointer;
}

.ag-quita:hover { background: var(--kctp-alerta-sw); color: var(--kctp-alerta); }

.ag-libre {
    margin: 0;
    font-size: 12px;
    color: var(--kctp-tenue-2);
}

.ag-acciones { display: flex; flex-wrap: wrap; gap: 9px; }

/* --- La previa: cuantas horas produce la semana -------------------------- */

.ag-previa { display: grid; gap: 6px; }

.ag-previa-dia {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--kctp-crema);
    font-size: 13px;
}

.ag-previa-dia strong { color: var(--kctp-tinto); min-width: 118px; }
.ag-previa-dia span { color: var(--kctp-tenue); font-variant-numeric: tabular-nums; }

/* --- Ausencias ----------------------------------------------------------- */

.ag-ausencias { display: grid; gap: 8px; margin-bottom: 14px; }

.ag-ausencia {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 11px;
    padding: 10px 13px;
    border: 1px solid var(--kctp-borde);
    border-radius: 12px;
    background: var(--kctp-blanco);
}

.ag-ausencia-icono {
    display: grid; place-items: center;
    width: 32px; height: 32px;
    border-radius: 9px;
    background: var(--kctp-aviso-sw);
    color: var(--kctp-aviso);
}

.ag-ausencia strong { display: block; font-size: 14px; color: var(--kctp-tinta); }
.ag-ausencia small { font-size: 12.5px; color: var(--kctp-tenue); }

.ag-nueva-ausencia {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 10px;
    padding-top: 13px;
    border-top: 1px solid var(--kctp-linea);
}

.ag-nueva-ausencia label {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--kctp-tenue);
}

.ag-nueva-ausencia input {
    padding: 6px 9px;
    border: 1px solid var(--kctp-borde);
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    font-weight: 400;
    color: var(--kctp-tinta);
}

.ag-nueva-ausencia .ag-motivo { flex: 1 1 200px; }
.ag-nueva-ausencia .ag-motivo input { width: 100%; }

/* --- Elegir profesional -------------------------------------------------- */

.ag-medicos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }

.ag-medico {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 14px 16px;
    border: 1px solid var(--kctp-borde);
    border-radius: 14px;
    background: var(--kctp-blanco);
    text-decoration: none;
    color: inherit;
}

.ag-medico:hover { border-color: var(--kctp-borde-f); }
.ag-medico strong { font-size: 15px; color: var(--kctp-tinto); }
.ag-medico small { font-size: 12.5px; color: var(--kctp-tenue); }

.ag-pill {
    align-self: start;
    margin-top: 5px;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--kctp-panel);
    color: var(--kctp-tenue);
    font-size: 11.5px;
    font-weight: 600;
}

.ag-pill-si { background: var(--kctp-ok-sw); color: var(--kctp-ok); }

.ag-vacio { margin: 0; font-size: 14px; color: var(--kctp-tenue); }

/* --- Teléfono ------------------------------------------------------------ */

@media (max-width: 900px) {
    /* Siete columnas de 50px no son una semana, son una cuadricula ilegible.
       Cada dia pasa a ser una fila con su nombre a la izquierda. */
    .ag-semana { grid-template-columns: 1fr; }
    .ag-dia { flex-direction: row; align-items: center; flex-wrap: wrap; }
    .ag-dia > header { flex: 0 0 130px; }
    .ag-franjas { flex: 1 1 240px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
    .ag-libre { flex: 1 1 auto; }
}

/* --- Los huecos, dentro del formulario de agendar ------------------------ */

.va-huecos {
    margin: 0 0 12px;
    padding: 11px 13px;
    border: 1px solid var(--kctp-borde);
    border-radius: 12px;
    background: var(--kctp-crema);
}

.va-huecos-tit {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--kctp-tinto);
}

.va-huecos-tit span { font-weight: 400; color: var(--kctp-tenue-2); }

.va-chip-fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    padding: 4px 0;
}

/* El nombre del dia con ancho fijo: asi las horas de todos los dias arrancan
   en la misma columna y se leen como una tabla, no como texto corrido. */
.va-chip-fila b {
    flex: 0 0 108px;
    font-size: 12px;
    font-weight: 600;
    color: var(--kctp-tenue);
    text-transform: capitalize;
}

.va-chip {
    padding: 3px 9px;
    border: 1px solid var(--kctp-borde-f);
    border-radius: 999px;
    background: #fff;
    color: var(--kctp-acento);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.va-chip:hover { background: var(--kctp-acento-sw); }
.va-chip.elegido { background: var(--kctp-acento); border-color: var(--kctp-acento); color: #fff; }

.va-forzar {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 12px;
    font-size: 12.5px;
    color: var(--kctp-tenue);
    cursor: pointer;
}

@media (max-width: 560px) {
    .va-chip-fila b { flex: 1 0 100%; }
}

/* --- Las horas, en el portal de la paciente ------------------------------ */

.pv-agenda { display: grid; gap: 9px; }

.pv-dia {
    display: grid;
    grid-template-columns: 92px 1fr;
    align-items: start;
    gap: 10px;
}

.pv-dia-rotulo {
    padding-top: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--kctp-tinto);
    line-height: 1.25;
}

.pv-dia-rotulo small { display: block; font-weight: 400; color: var(--kctp-tenue-2); font-size: 12px; }

.pv-horas { display: flex; flex-wrap: wrap; gap: 6px; }

.pv-hora { position: relative; cursor: pointer; }

/* El radio no se ve, pero SIGUE AHI: quitarlo con display:none lo saca del
   recorrido del teclado y de los lectores de pantalla. Se tapa con la etiqueta. */
.pv-hora input {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.pv-hora span {
    display: block;
    padding: 9px 14px;
    border: 1.5px solid var(--kctp-borde);
    border-radius: 999px;
    background: var(--kctp-blanco);
    color: var(--kctp-tinta);
    font-size: 14.5px;
    font-variant-numeric: tabular-nums;
    transition: border-color .15s ease, background .15s ease;
}

.pv-hora input:hover + span { border-color: var(--kctp-borde-f); }
.pv-hora input:focus-visible + span { outline: 2px solid var(--kctp-acento); outline-offset: 2px; }

.pv-hora input:checked + span {
    border-color: var(--kctp-acento);
    background: var(--kctp-acento);
    color: #fff;
}

.pv-ninguna { margin-top: 3px; }
.pv-ninguna span {
    border-style: dashed;
    background: transparent;
    color: var(--kctp-tenue);
    font-size: 13.5px;
}

@media (max-width: 560px) {
    .pv-dia { grid-template-columns: 1fr; gap: 4px; }
    .pv-dia-rotulo { padding-top: 0; }
    .pv-dia-rotulo small { display: inline; margin-left: 5px; }
}

@media (prefers-reduced-motion: reduce) {
    .pv-hora span { transition: none; }
}