/* ============================================================
   style.css - Estilos globales portal web_clientes
   Industrias Relax S.L.
   Color corporativo: Pantone 298 C  #41B6E6
   Ubicacion: web_clientes/assets/style.css
   ============================================================ */

/* ============================================================
   VARIABLES CSS
   ============================================================ */
:root {
    --color-principal: #41B6E6;
    /* Pantone 298 C */
    --color-oscuro: #1a8bb8;
    /* hover / bordes activos */
    --color-muy-oscuro: #0d6a8f;
    /* texto sobre fondo blanco */
    --color-claro: #d0eef9;
    /* fondo suave / highlights */
    --color-fondo: #f0f8fc;
    /* fondo general de pagina */
    --color-texto: #1a2a35;
    /* texto principal */
    --color-blanco: #ffffff;
    --color-error: #c0392b;
    --color-error-fondo: #fdecea;
    --color-borde: #cde8f5;

    --fuente-base: 'Segoe UI', Arial, sans-serif;
    --radio-borde: 6px;
    --sombra-card: 0 2px 12px rgba(65, 182, 230, 0.15);

    /* color indicador modo debug - naranja oscuro brillante */
    --color-debug: #e65c00;

    /* NUEVO: colores reservas */
    --color-reserva: #e67e22;
    --color-reserva-oscuro: #ca6f1e;
    --color-reserva-fondo: #fef5ec;
    --color-reserva-borde: #f5cba7;
    --color-reserva-propia: #27ae60;
    --color-reserva-propia-oscuro: #1e8449;
    --color-reserva-propia-fondo: #eafaf1;
    --color-reserva-propia-borde: #a9dfbf;
}

/* ============================================================
   RESET BASICO
   ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
}

body {
    font-family: var(--fuente-base);
    background-color: var(--color-fondo);
    color: var(--color-texto);
    font-size: 16px;
    line-height: 1.5;
}

/* ============================================================
   CABECERA (header comun a todas las paginas)
   ============================================================ */
.cabecera {
    background-color: var(--color-principal);
    padding: 12px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Borde inferior visible solo en MODO_DEBUG (D46) */
body.modo-debug .cabecera {
    border-bottom: 3px solid var(--color-debug);
}

/* Espacio reservado para el icono/pluma corporativa */
.cabecera__icono {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    object-fit: contain;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
}

/* Logo con el nombre: R  E  L  A  X */
.cabecera__logo {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-blanco);
    letter-spacing: 0.45em;
    /* separacion entre letras tipo R  E  L  A  X */
    text-transform: uppercase;
    /* TODO: reemplazar por <img> cuando tengamos el logo vectorial */
}

/* Logo R  E  L  A  X en vectorial*/
.cabecera__logo-img {
    height: 36px;
    width: auto;
    /* mantiene proporcion del SVG original     */
    display: block;
}


.cabecera__subtitulo {
    font-size: 0.85rem;
    color: var(--color-claro);
    margin-left: auto;
    /* empuja el subtitulo a la derecha */
}

/* ============================================================
   LAYOUT PRINCIPAL
   ============================================================ */
.contenido-principal {
    min-height: calc(100vh - 70px);
    /* resta altura de cabecera */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

/* ============================================================
   CARD GENERICA (login, mensajes, etc.)
   ============================================================ */
.card {
    background-color: var(--color-blanco);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-borde);
    box-shadow: var(--sombra-card);
    padding: 36px 40px;
    width: 100%;
    max-width: 420px;
}

.card__titulo {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-muy-oscuro);
    margin-bottom: 24px;
    text-align: center;
}

/* ============================================================
   FORMULARIOS
   ============================================================ */
.form-grupo {
    margin-bottom: 18px;
}

.form-grupo label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-muy-oscuro);
    margin-bottom: 6px;
}

.form-grupo input[type="text"],
.form-grupo input[type="password"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-borde);
    font-size: 1rem;
    font-family: var(--fuente-base);
    color: var(--color-texto);
    background-color: var(--color-blanco);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-grupo input[type="text"]:focus,
.form-grupo input[type="password"]:focus {
    outline: none;
    border-color: var(--color-principal);
    box-shadow: 0 0 0 3px rgba(65, 182, 230, 0.2);
}

/* ============================================================
   BOTONES
   ============================================================ */
.btn-primario {
    display: block;
    width: 100%;
    padding: 11px;
    background-color: var(--color-principal);
    color: var(--color-blanco);
    border: none;
    border-radius: var(--radio-borde);
    font-size: 1rem;
    font-weight: 600;
    font-family: var(--fuente-base);
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-primario:hover {
    background-color: var(--color-oscuro);
}

.btn-primario:active {
    background-color: var(--color-muy-oscuro);
}

.btn-secundario {
    display: inline-block;
    padding: 8px 16px;
    background-color: transparent;
    color: var(--color-oscuro);
    border: 1px solid var(--color-oscuro);
    border-radius: var(--radio-borde);
    font-size: 0.875rem;
    font-family: var(--fuente-base);
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
}

.btn-secundario:hover {
    background-color: var(--color-claro);
}

/* ============================================================
   MENSAJES DE ALERTA
   ============================================================ */
.alerta {
    padding: 10px 14px;
    border-radius: var(--radio-borde);
    font-size: 0.9rem;
    margin-bottom: 18px;
}

.alerta--error {
    background-color: var(--color-error-fondo);
    color: var(--color-error);
    border: 1px solid #f1a9a0;
}

.alerta--info {
    background-color: var(--color-claro);
    color: var(--color-muy-oscuro);
    border: 1px solid var(--color-borde);
}

/* ============================================================
   PIE DE PAGINA
   ============================================================ */
.pie-pagina {
    text-align: center;
    padding: 12px;
    font-size: 0.75rem;
    color: #7a9aaa;
    border-top: 1px solid var(--color-borde);
    background: var(--color-blanco);
}

/* ============================================================
   CABECERA - zona de usuario
   ============================================================ */
.cabecera__zona-usuario {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.cabecera__saludo {
    font-size: 0.9rem;
    color: var(--color-claro);
}

.cabecera__form-logout {
    margin: 0;
}

.btn-logout {
    padding: 6px 14px;
    background-color: transparent;
    color: var(--color-blanco);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--radio-borde);
    font-size: 0.85rem;
    font-family: var(--fuente-base);
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.btn-logout:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: var(--color-blanco);
}

/* ============================================================
   LAYOUT STOCKS
   ============================================================ */
.contenido-stocks {
    padding: 20px 24px;
}

/* ============================================================
   BARRA DE CONTROLES
   ============================================================ */
.barra-controles {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.barra-controles__acciones {
    display: flex;
    gap: 8px;
}

.contador-articulos {
    font-size: 0.9rem;
    color: var(--color-texto);
}

.contador-articulos strong {
    color: var(--color-muy-oscuro);
    font-weight: 600;
}

/* ============================================================
   TABLA DE STOCKS
   ============================================================ */
.tabla-contenedor {
    overflow-x: auto;
    /* scroll horizontal en pantallas pequeñas */
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-borde);
    box-shadow: var(--sombra-card);
}

/* Texto disponible para filtros/lectores de pantalla, sin ocupar espacio visual. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.cliente-principal {
    cursor: help;
}

.cliente-mas {
    margin-left: 4px;
    color: var(--color-oscuro);
    font-size: 0.75em;
    font-weight: 600;
}

.tabla-stocks {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    background: var(--color-blanco);
}

.tabla-stocks th,
.tabla-stocks td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid var(--color-borde);
    white-space: nowrap;
}

/* Fila de filtros: fondo ligeramente diferente para distinguirla */
.fila-filtros th {
    background-color: var(--color-claro);
    padding: 6px 8px;
    vertical-align: middle;
    overflow: visible;
}

/* Fila de cabeceras de columna */
.fila-cabecera th {
    background-color: var(--color-principal);
    color: var(--color-blanco);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Filas de datos */
.tabla-stocks tbody tr:last-child td {
    border-bottom: none;
}

.tabla-stocks tbody tr:hover {
    background-color: var(--color-claro);
}

/* ============================================================
   INPUTS DE FILTRO
   ============================================================ */
.input-filtro {
    width: 100%;
    padding: 5px 8px;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-borde);
    font-size: 0.85rem;
    font-family: var(--fuente-base);
    background-color: var(--color-blanco);
    color: var(--color-texto);
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.input-filtro:focus {
    outline: none;
    border-color: var(--color-principal);
    box-shadow: 0 0 0 2px rgba(65, 182, 230, 0.2);
}

/* Filtro multi-termino: input + boton AND/OR en linea */
.filtro-multi-contenedor {
    display: flex;
    align-items: center;
    gap: 4px;
}

.input-filtro--multi {
    flex: 1;
}

/* ============================================================
   BOTON TOGGLE AND/OR
   ============================================================ */
.filtro-modo-toggle {
    flex-shrink: 0;
    padding: 4px 7px;
    background-color: var(--color-muy-oscuro);
    color: var(--color-blanco);
    border: none;
    border-radius: var(--radio-borde);
    font-size: 0.75rem;
    font-weight: 600;
    font-family: var(--fuente-base);
    cursor: pointer;
    letter-spacing: 0.04em;
    transition: background-color 0.2s;
    position: relative;
    /* necesario para el tooltip */
}

.filtro-modo-toggle:hover {
    background-color: var(--color-oscuro);
}

/* Modo OR: color distinto para distinguirlo visualmente del AND */
.filtro-modo-toggle[data-modo="OR"] {
    background-color: var(--color-oscuro);
}

/* ============================================================
   TOOLTIP CSS PURO
   Se activa con el atributo data-tooltip en cualquier elemento.
   ============================================================ */
[data-tooltip] {
    position: relative;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-texto);
    color: var(--color-blanco);
    padding: 7px 10px;
    border-radius: var(--radio-borde);
    font-size: 0.8rem;
    font-weight: 400;
    white-space: normal;
    width: 230px;
    line-height: 1.5;
    text-align: left;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease;
    z-index: 200;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

[data-tooltip]:hover::after {
    opacity: 1;
}

/* En la tabla el tooltip va hacia ABAJO para no quedar tapado por el thead */
.fila-filtros [data-tooltip]::after {
    bottom: auto;
    top: calc(100% + 6px);
}

/* ============================================================
   NUEVO: BOTON MODO GLOBAL Y/O (entre columnas distintas)
   Aparece en la barra de controles junto a Limpiar/Exportar.
   Hereda el sistema de tooltip via [data-tooltip]::after.
   AND (default): color oscuro, igual que .filtro-modo-toggle
   OR:            color principal (azul corporativo), mas llamativo
                  para avisar de que el modo es distinto al default
   ============================================================ */
.btn-modo-global {
    flex-shrink: 0;
    padding: 8px 14px;
    background-color: var(--color-muy-oscuro);
    color: var(--color-blanco);
    border: none;
    border-radius: var(--radio-borde);
    font-size: 0.875rem;
    font-weight: 600;
    font-family: var(--fuente-base);
    cursor: pointer;
    letter-spacing: 0.04em;
    transition: background-color 0.2s;
}

.btn-modo-global:hover {
    background-color: var(--color-oscuro);
}

/* Modo OR: azul corporativo para destacar que el modo NO es el default */
.btn-modo-global[data-modo="OR"] {
    background-color: var(--color-principal);
}

.btn-modo-global[data-modo="OR"]:hover {
    background-color: var(--color-oscuro);
}

/* ============================================================
   MODIFICADO: correccion .btn-primario en la barra de controles
   .btn-primario define display:block y width:100% para el form
   de login (boton a todo el ancho del card). Cuando se usa en
   .barra-controles__acciones (flex) ese width:100% lo expande
   al 100% del flex-container rompiendo el layout del toolbar.
   Este override lo restaura al tamano natural del texto.
   ============================================================ */
.barra-controles__acciones .btn-primario {
    display: inline-block;
    width: auto;
}


/* ============================================================
   NUEVO: Ordenacion de tabla por columna
   ============================================================ */

.th-ordenable {
    cursor: pointer;
    user-select: none;
}

.th-ordenable:hover {
    background-color: var(--color-oscuro);
    /* #1a8bb8 — un tono más oscuro que el principal */
}

.th-ordenable--activo {
    background-color: var(--color-muy-oscuro);
    /* #0d6a8f — cabecera activa bien diferenciada */
}

.th-orden-icono {
    display: inline-block;
    margin-left: 0.35rem;
    font-size: 0.8em;
    opacity: 0.65;
    min-width: 1ch;
    /* evita que la cabecera salte de ancho al aparecer el icono */
}

.th-ordenable--activo .th-orden-icono {
    opacity: 1;
}

/* ============================================================
   NUEVO: SISTEMA DE RESERVAS — columna, indicador, botón, modal
   ============================================================ */

/* --- Cabecera y celda de la columna de reservas --- */
.th-reservas {
    min-width: 90px;
    text-align: center;
}

.td-reservas {
    text-align: center;
    vertical-align: middle;
}

/* --- Indicador visual pill (total reservado) --- */
.reserva-indicador {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    background-color: var(--color-reserva-fondo);
    color: var(--color-reserva-oscuro);
    border: 1px solid var(--color-reserva-borde);
    white-space: nowrap;
}

/* Modificador: el usuario tiene reserva propia en este artículo */
.reserva-indicador--propia {
    background-color: var(--color-reserva-propia-fondo);
    color: var(--color-reserva-propia-oscuro);
    border-color: var(--color-reserva-propia-borde);
}

/* Punto indicador de reserva propia */
.reserva-indicador__punto {
    font-size: 0.65rem;
    line-height: 1;
    color: var(--color-reserva-propia);
}

/* Sin reservas: guión neutro */
.reserva-indicador--vacio {
    background: none;
    border-color: transparent;
    color: var(--color-texto);
    opacity: 0.35;
    font-weight: 400;
}

/* --- Botón Reservar / Editar reserva por fila --- */
.btn-reservar {
    display: inline-block;
    padding: 4px 10px;
    background-color: transparent;
    color: var(--color-reserva-oscuro);
    border: 1px solid var(--color-reserva-borde);
    border-radius: var(--radio-borde);
    font-size: 0.8rem;
    font-family: var(--fuente-base);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.18s, border-color 0.18s, color 0.18s;
}

.btn-reservar:hover {
    background-color: var(--color-reserva-fondo);
    border-color: var(--color-reserva-oscuro);
    color: var(--color-reserva-oscuro);
}

/* Variante cuando ya hay reserva propia: acento verde */
.btn-reservar--editar {
    color: var(--color-reserva-propia-oscuro);
    border-color: var(--color-reserva-propia-borde);
}

.btn-reservar--editar:hover {
    background-color: var(--color-reserva-propia-fondo);
    border-color: var(--color-reserva-propia-oscuro);
}

/* MODIFICADO2: Corrección de clases CSS del modal de reservas para alinearse con la arquitectura BEM y soporte del atributo [hidden] nativo */

/* --- Contenedor del modal (Overlay) --- */
/* MODIFICADO3: Añadido isolation: isolate para crear un contexto de apilamiento propio y prevenir fugas de z-index */
.modal-reserva {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    isolation: isolate;
    padding: 16px;
    /* evita que el panel toque los bordes en móvil */
}

/* Oculto por defecto mediante el atributo hidden de HTML5 */
.modal-reserva[hidden] {
    display: none !important;
}

/* Fondo oscuro semi-transparente del modal */
.modal-reserva__fondo {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.45);
    z-index: 1;
}

/* --- Panel del modal --- */
.modal-reserva__panel {
    position: relative;
    z-index: 2;
    background-color: var(--color-blanco);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-borde);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    padding: 24px 28px 20px;
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* --- Título del modal --- */
.modal-reserva__titulo {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-muy-oscuro);
    margin: 0;
    line-height: 1.3;
}

.modal-reserva__titulo span {
    display: block;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--color-texto);
    opacity: 0.7;
    margin-top: 2px;
}

/* --- Label de campo --- */
.modal-reserva__label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-muy-oscuro);
    margin-bottom: 6px;
}

/* --- Widget +/- de unidades --- */
.control-unidades {
    display: flex;
    align-items: center;
    gap: 8px;
}

.control-unidades__btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-claro);
    color: var(--color-muy-oscuro);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-borde);
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s;
    line-height: 1;
    flex-shrink: 0;
}

.control-unidades__btn:hover {
    background-color: var(--color-borde);
}

.control-unidades__btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.control-unidades__input {
    width: 64px;
    text-align: center;
    padding: 5px 8px;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-borde);
    font-size: 1rem;
    font-family: var(--fuente-base);
    color: var(--color-texto);
    background-color: var(--color-blanco);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.control-unidades__input:focus {
    outline: none;
    border-color: var(--color-principal);
    box-shadow: 0 0 0 2px rgba(65, 182, 230, 0.2);
}

.control-unidades__max {
    font-size: 0.75rem;
    color: var(--color-texto);
    opacity: 0.55;
}

/* --- Textarea de nota --- */
.modal-reserva__textarea {
    width: 100%;
    min-height: 80px;
    resize: vertical;
    padding: 8px 10px;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-borde);
    font-size: 0.875rem;
    font-family: var(--fuente-base);
    color: var(--color-texto);
    background-color: var(--color-blanco);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.modal-reserva__textarea:focus {
    outline: none;
    border-color: var(--color-principal);
    box-shadow: 0 0 0 2px rgba(65, 182, 230, 0.2);
}

/* --- Contador de caracteres del textarea --- */
.modal-reserva__contador {
    font-size: 0.75rem;
    color: var(--color-texto);
    opacity: 0.5;
    text-align: right;
    margin-top: -10px;
    /* sube para pegarse visualmente al textarea */
}

.modal-reserva__contador--alerta {
    color: var(--color-error);
    opacity: 1;
    font-weight: 600;
}

/* --- Acciones del modal (guardar / cancelar / eliminar) --- */
.modal-reserva__acciones {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

/* Botón guardar: usa el estilo primario pero dimensionado para modal */
.modal-reserva__acciones .btn-primario {
    display: inline-block;
    width: auto;
    padding: 8px 18px;
    font-size: 0.9rem;
}

/* Botón cerrar/cancelar modal */
.modal-reserva__acciones .btn-secundario {
    font-size: 0.875rem;
}

/* Botón cancelar reserva existente (destructivo, solo visible si ya hay reserva) */
.btn-cancelar-reserva {
    display: inline-block;
    margin-left: auto;
    padding: 6px 12px;
    background-color: transparent;
    color: var(--color-error);
    border: 1px solid #f1a9a0;
    border-radius: var(--radio-borde);
    font-size: 0.8rem;
    font-family: var(--fuente-base);
    cursor: pointer;
    transition: background-color 0.18s;
}

.btn-cancelar-reserva:hover {
    background-color: var(--color-error-fondo);
}

/* --- Panel de error inline dentro del modal --- */
.modal-reserva__error {
    padding: 8px 12px;
    background-color: var(--color-error-fondo);
    color: var(--color-error);
    border: 1px solid #f1a9a0;
    border-radius: var(--radio-borde);
    font-size: 0.85rem;
}

/* Ocultar nativamente el panel de error */
.modal-reserva__error[hidden] {
    display: none !important;
}

/* ============================================================
   DELEGACION (D100-D108) — sistema de pestanas y avisos
   ============================================================ */

/* --- Sistema de pestanas --- */
.tabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: 2px solid var(--color-borde);
    margin-bottom: 1rem;
    overflow-x: auto;
}
.tab {
    padding: 0.5rem 1rem;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font: inherit;
    color: var(--color-texto);
    white-space: nowrap;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.tab:hover {
    color: var(--color-oscuro);
    border-bottom-color: var(--color-claro);
}
.tab:focus {
    outline: 2px solid var(--color-principal);
    outline-offset: -2px;
}
.tab--activa {
    border-bottom-color: var(--color-principal);
    font-weight: 600;
    color: var(--color-muy-oscuro);
}

/* --- Indicador de aviso en pestana (D104) --- */
.tab__aviso {
    display: inline-block;
    width: 0.6em;
    height: 0.6em;
    border-radius: 50%;
    margin-left: 0.4em;
    vertical-align: middle;
}
.tab__aviso--info    { background: #2b8a3e; }  /* verde */
.tab__aviso--warning { background: #f08c00; }  /* amarillo */
.tab__aviso--error   { background: #e03131; }  /* rojo */

/* --- Fallback a <select> cuando hay muchos usuarios (D3) --- */
.tab--select {
    align-self: center;
    margin-left: 0.5rem;
    padding: 0.4rem 0.6rem;
    font: inherit;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-borde);
    background: var(--color-blanco);
    color: var(--color-texto);
    cursor: pointer;
    max-width: 360px;
}
.tab--select:focus {
    outline: 2px solid var(--color-principal);
    outline-offset: 1px;
}

/* --- Opciones coloreadas en <select> de delegacion --- */
.opcion-aviso--info    { color: #2b8a3e; }
.opcion-aviso--warning { color: #f08c00; }
.opcion-aviso--error   { color: #e03131; }

/* --- Columna de accion (delegacion: reservas/usuarios/todos) --- */
.th-accion,
.td-accion {
    text-align: center;
    width: 8em;
    white-space: nowrap;
}
.td-accion .btn-reservar {
    padding: 0.25rem 0.6rem;
    font-size: 0.85rem;
}