/* ===================================
   BARBERPRO
   NUEVA CITA - FORMULARIO COMPACTO
=================================== */


/* ===================================
   CONTENEDOR PRINCIPAL
=================================== */

.form-cita {

    width: 100%;

    max-width: 900px;

    margin: 0 auto;

    box-sizing: border-box;

}


/* ===================================
   TARJETAS DEL FORMULARIO
=================================== */

.form-cita .form-card {

    width: 100%;

    box-sizing: border-box;

    padding: 12px 14px;

    margin-bottom: 10px;

    background: #ffffff;

    border: 1px solid #eef0f3;

    border-radius: 14px;

    box-shadow: 0 3px 10px rgba(0,0,0,.04);

}


/* ===================================
   TÍTULOS
=================================== */

.form-cita h3 {

    margin: 0 0 8px;

    font-size: 15px;

    font-weight: 700;

    color: #1e293b;

}


/* ===================================
   DATOS DEL CLIENTE
=================================== */

/*
   El primer form-card es el bloque del cliente.

   4 columnas permiten:

   Nombre | Apellido
   Teléfono | Email
*/

.form-cita form > .form-card:first-child {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 8px 10px;

}


/* TÍTULO */

.form-cita form > .form-card:first-child h3 {

    grid-column: 1 / -1;

}


/* TELÉFONO */

#telefono {

    grid-column: span 2;

}


/* NOMBRE */

#nombre {

    grid-column: span 2;

}


/* APELLIDO */

#apellido {

    grid-column: span 2;

}


/* EMAIL */

#email {

    grid-column: span 2;

}


/* MENSAJE */

#cliente_msg {

    grid-column: 1 / -1;

}


/* ===================================
   INPUTS Y SELECTS
=================================== */

.form-cita input,
.form-cita select,
.form-cita textarea,
.form-cita .input {

    width: 100%;

    height: 36px;

    box-sizing: border-box;

    margin: 0;

    padding: 7px 10px;

    border: 1px solid #e5e7eb;

    border-radius: 9px;

    background: #f8fafc;

    color: #1e293b;

    font-size: 13px;

    outline: none;

}


.form-cita input:focus,
.form-cita select:focus,
.form-cita textarea:focus {

    background: #ffffff;

    border-color: #2563eb;

}


/* ===================================
   MENSAJE CLIENTE
=================================== */

#cliente_msg {

    font-size: 11px;

    margin-top: 0;

}


/* ===================================
   BARBERO
=================================== */

#barbero {

    height: 36px;

}


/* ===================================
   SERVICIOS
=================================== */

#servicios_container {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 7px;

}


.servicio-card {

    display: flex;

    align-items: center;

    gap: 6px;

    min-width: 0;

    padding: 8px;

    border-radius: 9px;

    background: #f8fafc;

    border: 1px solid #e5e7eb;

}


.servicio-card input {

    width: 15px !important;

    height: 15px !important;

    flex-shrink: 0;

    margin: 0 !important;

}


.servicio-info {

    min-width: 0;

}


.servicio-info strong {

    display: block;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 12px;

}


.servicio-info span {

    font-size: 11px;

    font-weight: 600;

}


.servicio-info small {

    font-size: 10px;

}


/* ===================================
   FECHA - CALENDARIO SEMANAL
=================================== */

.fecha-cita-card {

    overflow: hidden;

}


/* CONTENEDOR DEL CALENDARIO */

.calendario-semana {

    display: flex;

    align-items: center;

    gap: 8px;

    width: 100%;

    margin-top: 14px;

}


/* CONTENEDOR DE LOS DÍAS */

.dias-semana {

    display: flex;

    gap: 7px;

    flex: 1;

    min-width: 0;

    overflow-x: auto;

    scroll-behavior: smooth;

    scrollbar-width: none;

    padding: 4px 2px 8px;

}


.dias-semana::-webkit-scrollbar {

    display: none;

}


/* ===================================
   BOTONES ANTERIOR / SIGUIENTE
=================================== */

.cal-nav {

    flex: 0 0 34px;

    width: 34px;

    height: 52px;

    padding: 0;

    border: 1px solid #e5e7eb;

    border-radius: 10px;

    background: #f8fafc;

    color: #1e293b;

    font-size: 26px;

    line-height: 1;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;

}


.cal-nav:hover {

    background: #f1f5f9;

    border-color: #cbd5e1;

    transform: scale(1.03);

}


.cal-nav:active {

    transform: scale(.97);

}


/* ===================================
   DÍA INDIVIDUAL
=================================== */

.dia-semana {

    flex: 1 1 0;

    min-width: 70px;

    padding: 9px 5px;

    border: 1px solid #e5e7eb;

    border-radius: 12px;

    background: #ffffff;

    text-align: center;

    cursor: pointer;

    user-select: none;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;

}


.dia-semana:hover {

    border-color: #94a3b8;

    transform: translateY(-1px);

}


/* NOMBRE DEL DÍA */

.dia-semana .nombre-dia {

    display: block;

    margin-bottom: 4px;

    font-size: 10px;

    font-weight: 700;

    text-transform: uppercase;

    color: #64748b;

}


/* NÚMERO */

.dia-semana .numero-dia {

    display: block;

    font-size: 21px;

    font-weight: 800;

    line-height: 1.1;

    color: #1e293b;

}


/* MES */

.dia-semana .mes-dia {

    display: block;

    margin-top: 3px;

    font-size: 9px;

    font-weight: 600;

    text-transform: uppercase;

    color: #94a3b8;

}


/* ===================================
   DÍA ACTUAL
=================================== */

.dia-semana.hoy {

    border-color: #2563eb;

}


.dia-semana.hoy .nombre-dia {

    color: #2563eb;

}


/* ===================================
   DÍA SELECCIONADO
=================================== */

.dia-semana.seleccionado {

    background: #2563eb;

    border-color: #2563eb;

    box-shadow: 0 4px 12px rgba(37,99,235,.20);

}


.dia-semana.seleccionado:hover {

    border-color: #2563eb;

    transform: translateY(-1px);

}


.dia-semana.seleccionado .nombre-dia,
.dia-semana.seleccionado .numero-dia,
.dia-semana.seleccionado .mes-dia {

    color: #ffffff;

}


/* ===================================
   FECHA SELECCIONADA
=================================== */

.fecha-seleccionada {

    margin-top: 10px;

    padding: 9px 12px;

    border-radius: 9px;

    background: #f8fafc;

    border: 1px solid #eef0f3;

    text-align: center;

    font-size: 12px;

    font-weight: 700;

    color: #1e293b;

}


/* ===================================
   HORARIOS
=================================== */

.horarios-titulo {

    margin-top: 18px !important;

}


#horas_container {

    display: grid;

    grid-template-columns:
        repeat(6, minmax(0, 1fr));

    gap: 6px;

    margin-top: 8px;

}


.hora-btn {

    width: 100%;

    height: 34px;

    padding: 0 4px;

    border: none;

    border-radius: 8px;

    font-size: 12px;

    font-weight: 600;

}


/* HORAS LIBRES */

.hora-libre {

    background: #dcfce7;

    color: #166534;

    border: 1px solid #86efac;

    cursor: pointer;

}


.hora-libre:hover {

    background: #bbf7d0;

}


/* HORA SELECCIONADA */

.hora-seleccionada {

    background: #2563eb !important;

    color: #ffffff !important;

    border-color: #2563eb !important;

}


/* HORA OCUPADA */

.hora-ocupada {

    background: #fee2e2;

    color: #991b1b;

    border: 1px solid #fecaca;

    cursor: not-allowed;

}


/* HORA BLOQUEADA */

.hora-bloqueada {

    background: #e5e7eb;

    color: #6b7280;

    cursor: not-allowed;

}


/* ===================================
   TOTAL
=================================== */

.total-cita {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 7px;

}


.total-cita p {

    margin: 0;

    padding: 8px;

    border-radius: 8px;

    background: #f8fafc;

    text-align: center;

    font-size: 12px;

}


/* ===================================
   OPCIONES
=================================== */

.opciones-cita {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 7px;

}


.radio-opcion {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    padding: 8px;

    border-radius: 8px;

    background: #f8fafc;

    border: 1px solid #e5e7eb;

    font-size: 12px;

}


.radio-opcion input {

    width: 15px !important;

    height: 15px !important;

    margin: 0 !important;

}


.radio-opcion:has(input:checked) {

    background: #dcfce7;

    border-color: #16a34a;

}


/* ===================================
   BOTÓN
=================================== */

.form-cita > form > .btn {

    width: 100%;

    height: 40px;

    border-radius: 10px;

    font-size: 14px;

}


/* ===================================
   TABLET
=================================== */

@media (max-width: 1100px) {

    .form-cita {

        max-width: 760px;

    }


    /* SERVICIOS */

    #servicios_container {

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

    }


    /* HORARIOS */

    #horas_container {

        grid-template-columns:
            repeat(5, minmax(0, 1fr));

    }


    /* CALENDARIO */

    .dia-semana {

        min-width: 66px;

    }

}


/* ===================================
   TABLET PEQUEÑA
=================================== */

@media (max-width: 768px) {

    .form-cita {

        max-width: 100%;

    }


    .form-cita .form-card {

        padding: 10px;

        margin-bottom: 8px;

        border-radius: 11px;

    }


    .form-cita h3 {

        font-size: 14px;

        margin-bottom: 6px;

    }


    /* CLIENTE */

    .form-cita form > .form-card:first-child {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 6px 8px;

    }


    #nombre,
    #apellido,
    #telefono,
    #email {

        grid-column: span 1;

    }


    /* INPUTS */

    .form-cita input,
    .form-cita select,
    .form-cita textarea,
    .form-cita .input {

        height: 34px;

        padding: 6px 8px;

        font-size: 12px;

    }


    /* SERVICIOS */

    #servicios_container {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 5px;

    }


    .servicio-card {

        padding: 6px;

        gap: 5px;

    }


    .servicio-info strong {

        font-size: 11px;

    }


    .servicio-info span {

        font-size: 10px;

    }


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

    .calendario-semana {

        gap: 5px;

    }


    .dias-semana {

        gap: 5px;

    }


    .cal-nav {

        flex: 0 0 30px;

        width: 30px;

        height: 48px;

        font-size: 23px;

    }


    .dia-semana {

        min-width: 62px;

        padding: 8px 4px;

        border-radius: 10px;

    }


    .dia-semana .nombre-dia {

        font-size: 9px;

    }


    .dia-semana .numero-dia {

        font-size: 19px;

    }


    .dia-semana .mes-dia {

        font-size: 8px;

    }


    .fecha-seleccionada {

        margin-top: 8px;

        padding: 8px 10px;

        font-size: 11px;

    }


    /* HORARIOS */

    #horas_container {

        grid-template-columns:
            repeat(4, minmax(0, 1fr));

        gap: 5px;

    }


    .hora-btn {

        height: 31px;

        font-size: 11px;

    }


    /* TOTAL */

    .total-cita {

        gap: 5px;

    }


    .total-cita p {

        padding: 7px;

        font-size: 11px;

    }


    /* OPCIONES */

    .opciones-cita {

        gap: 5px;

    }


    .radio-opcion {

        padding: 7px;

        font-size: 11px;

    }


    /* BOTÓN */

    .form-cita > form > .btn {

        height: 38px;

        font-size: 13px;

    }

}


/* ===================================
   MÓVIL
=================================== */

@media (max-width: 480px) {


    /* CLIENTE EN UNA COLUMNA */

    .form-cita form > .form-card:first-child {

        display: block;

    }


    .form-cita form > .form-card:first-child input {

        margin-bottom: 5px;

    }


    /* SERVICIOS */

    #servicios_container {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }


    /* ===================================
       CALENDARIO MÓVIL
    =================================== */

    .calendario-semana {

        gap: 4px;

        margin-top: 10px;

    }


    .dias-semana {

        gap: 4px;

        padding: 3px 1px 6px;

    }


    .cal-nav {

        flex: 0 0 28px;

        width: 28px;

        height: 44px;

        border-radius: 8px;

        font-size: 21px;

    }


    .dia-semana {

        flex: 0 0 58px;

        min-width: 58px;

        padding: 7px 3px;

        border-radius: 9px;

    }


    .dia-semana .nombre-dia {

        margin-bottom: 3px;

        font-size: 8px;

    }


    .dia-semana .numero-dia {

        font-size: 18px;

    }


    .dia-semana .mes-dia {

        margin-top: 2px;

        font-size: 7px;

    }


    .fecha-seleccionada {

        margin-top: 7px;

        padding: 7px 8px;

        border-radius: 8px;

        font-size: 10px;

    }


    /* HORARIOS */

    #horas_container {

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

    }


    /* CARDS */

    .form-cita .form-card {

        padding: 8px;

    }


    .horarios-titulo {

        margin-top: 15px !important;

    }

}