/*
 * Estilos del modulo de citas.
 *
 * Dos cosas viven aqui y solo aqui:
 *
 *  1. Las utilidades `tw-` que el bundle del tema NO trae. Ese bundle es un
 *     build PURGADO: solo lleva las clases que el proyecto usaba cuando se
 *     genero, asi que una clase nueva no da error, simplemente no pinta nada.
 *     Se comprueba con `grep '\.tw-whitespace-nowrap' public/assets/builds/tailwind.css`
 *     antes de usarla, y lo que falte se repone aqui en vez de regenerar el
 *     bundle, que lo comparten todas las pantallas de la aplicacion.
 *
 *  2. Los componentes propios del modulo: la etiqueta de estado, la agenda del
 *     dia, la leyenda de tipos y las tablas de catalogo.
 */

/* --- Utilidades que faltan en el build purgado ------------------------- */

.tw-whitespace-nowrap {
    white-space: nowrap;
}

/* --- Etiquetas de estado y de tipo ------------------------------------- */

/*
 * El color lo pone el catalogo con un `style` en linea, asi que aqui solo va la
 * forma. El texto se fuerza a blanco porque los colores por defecto son
 * saturados; quien elija un color muy claro lo vera, y esa es su decision.
 */
.appointment-status-label,
.appointment-type-label {
    display: inline-block;
    color: #fff;
    font-weight: 500;
    letter-spacing: .2px;
    border-radius: 3px;
    padding: 3px 8px;
}

/* --- Agenda del dia ---------------------------------------------------- */

.appointment-today-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.appointment-today-list > li {
    border-left: 3px solid #e5e5e5;
    padding: 0 0 0 10px;
    margin-bottom: 14px;
}

.appointment-today-list > li:last-child {
    margin-bottom: 0;
}

.appointment-today-hour {
    display: block;
    font-weight: 600;
    font-size: 13px;
}

/* --- Leyenda de tipos -------------------------------------------------- */

.appointment-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 13px;
}

.appointment-legend > li {
    margin-bottom: 6px;
}

.appointment-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    margin-right: 6px;
    vertical-align: middle;
}

/* --- Tablas de catalogo ------------------------------------------------ */

/*
 * Los formularios de cada fila se declaran FUERA de la tabla y los controles se
 * unen al suyo con `form="..."` -un `<form>` dentro de un `<tr>` no es HTML
 * valido-. Eso deja celdas con controles, que necesitan menos aire del que da
 * el tema.
 */
.appointment-catalog-table td {
    vertical-align: middle !important;
}

.appointment-catalog-table .form-control {
    margin-bottom: 0;
}

.appointment-narrow-input {
    max-width: 90px;
}

.appointment-color-input {
    max-width: 70px;
    padding: 2px;
}

.appointment-new-row td {
    background-color: #fafafa;
}

.appointment-actions-col {
    width: 110px;
}

/* --- Horario de atencion en la pantalla de ajustes --------------------- */

.appointment-hours-table td {
    vertical-align: middle !important;
}

.appointment-time-input {
    max-width: 110px;
}

/* --- Pagina publica de la cita ----------------------------------------- */

.appointment-summary th {
    width: 40%;
    font-weight: 600;
    border-top: 0 !important;
}

.appointment-summary td {
    border-top: 0 !important;
}

.appointment-terms {
    max-height: 220px;
    overflow-y: auto;
}

/* Un select de huecos vacio no debe parecer un desplegable roto. */
.appointment-booking select:empty {
    color: #999;
}