/* Estilos de acceso, registro y gestión de usuarios - Murciatours */

.auth-wrapper {
    max-width: 900px;
    margin: 30px auto;
    background: #ffffff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.auth-wrapper h2 {
    margin: 0 0 20px;
    color: #0b2d4d;
    border-bottom: 2px solid #0082C9;
    padding-bottom: 10px;
}

.auth-link {
    text-align: center;
    margin-top: 15px;
    color: #0b2d4d;
    font-size: 14px;
}

.auth-link a {
    color: #0082C9;
    text-decoration: none;
}

.auth-link a:hover {
    text-decoration: underline;
}

/* Secciones y formularios */
.seccion-titulo {
    margin: 25px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e0e0e0;
    color: #0082C9;
    font-size: 15px;
}

/* Campos y botones genéricos movidos a public/css/admin.css */

/* Anchuras de campos ajustadas al contenido */
.form-group select.input-tipo-doc {
    width: auto;
    min-width: 120px;
}

/* Documento de identidad: ancho justo para un documento del tipo
   " W-99999999-W " (espacio delante y detrás incluidos en el relleno del campo). */
.form-group input.input-doc {
    width: 120px;
}

.form-group input.input-soporte {
    width: 140px;
}

.form-group select.input-sexo {
    width: 160px;
}

.form-group input.input-fecha {
    width: var(--ancho-fecha);
    min-width: var(--ancho-fecha);
}

.form-group input.input-cp {
    width: 130px;
}

.form-group select.input-poblacion {
    width: 100%;
}

.form-group select.input-provincia {
    width: 100%;
}

.form-group select.input-pais {
    width: 100%;
}

/* Teléfono con selector de país: un único formato en todas las pantallas
   (registro, usuarios, reservas y servicios). Prefijo 105 + hueco 6 + número 101. */
.telefono-con-prefijo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Selector de país: ancho justo para un espacio + bandera + espacio +
   prefijo (+888) + espacio + flecha + espacio. */
.telefono-con-prefijo .select-personalizado {
    width: 105px;
    min-width: 105px;
}

.telefono-con-prefijo .sp-trigger {
    padding: 8px 10px;
}

.telefono-con-prefijo .sp-bandera {
    margin-right: 0;
}

.form-group input.input-tel {
    width: 101px;
    min-width: 101px;
}

/* Fila de campos pequeños */
.row-campos {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 15px;
    margin-bottom: 15px;
}

.row-campos .form-group {
    margin-bottom: 0;
}

.row-campos .form-group-crece {
    flex: 1 1 auto;
    min-width: 120px;
}

/* Teléfono móvil + checkbox de WhatsApp en la misma línea */
.row-whatsapp {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Prefijo telefónico delante de los números */
.prefijo-telefono {
    display: inline-flex;
    align-items: center;
    padding: 8px 10px;
    background: #eef3f8;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    color: #0b2d4d;
    white-space: nowrap;
}

.prefijo-telefono:empty {
    display: none;
}

.prefijo-telefono .fi {
    width: 18px;
    height: 13px;
    margin-right: 4px;
}

/* Selector de país con banderas */
.pais-selector {
    position: relative;
    width: 100%;
}

.pais-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    font-size: 14px;
    color: #0b2d4d;
    cursor: pointer;
    text-align: left;
}

.pais-trigger-nombre {
    flex: 1;
}

.pais-caret {
    font-size: 12px;
    color: #0b2d4d;
}

.pais-trigger .fi,
.pais-opcion .fi {
    width: 20px;
    height: 15px;
    flex-shrink: 0;
    border-radius: 2px;
    box-shadow: 0 0 0 1px #e0e0e0;
}

.tabla-usuarios .fi {
    width: 20px;
    height: 15px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px #e0e0e0;
}

.pais-lista {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 260px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-top: 4px;
    z-index: 100;
    display: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.pais-lista.abierta {
    display: block;
}

.pais-opcion {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: #fff;
    font-size: 14px;
    color: #0b2d4d;
    cursor: pointer;
    text-align: left;
}

.pais-opcion:hover {
    background: #eef3f8;
}

.pais-opcion.resaltada {
    background: #eef3f8;
}

.pais-opcion.seleccionada {
    background: #d1ecf1;
}

/* Selector de prefijo telefónico */
.prefijo-selector {
    position: relative;
}

.prefijo-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    font-size: 14px;
    color: #0b2d4d;
    cursor: pointer;
}

.prefijo-trigger .fi {
    width: 20px;
    height: 15px;
    flex-shrink: 0;
    border-radius: 2px;
    box-shadow: 0 0 0 1px #e0e0e0;
}

.prefijo-lista {
    width: 240px;
    right: auto;
}

.prefijo-valor {
    margin-left: auto;
    color: #6c757d;
    font-size: 12px;
}

/* Mostrar/ocultar contraseña */
.input-con-ojito {
    position: relative;
    display: flex;
    align-items: center;
}

.input-con-ojito input {
    padding-right: 40px;
}

.ojito-cerrado {
    display: none;
}

.grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

/* Fila de provincia: código estrecho + nombre ancho */
.row-provincia {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 15px;
    margin-bottom: 15px;
}

.row-provincia .form-group {
    margin-bottom: 0;
}

.row-provincia .col-codigo {
    flex: 0 0 90px;
    width: 90px;
}

.row-provincia .col-nombre {
    flex: 1 1 auto;
    min-width: 200px;
}

.checkbox-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: normal !important;
}

.checkbox-inline input {
    width: auto;
}

/* Apartado de autorizaciones y consentimientos */
.autorizaciones {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 4px;
    margin-bottom: 18px;
}

.checkbox-consentimiento {
    align-items: flex-start;
    line-height: 1.45;
}

.checkbox-consentimiento input {
    margin-top: 3px;
    flex-shrink: 0;
}

.enlace-legal {
    color: #0082C9;
    text-decoration: underline;
}

.enlace-legal:hover {
    color: #0068A1;
}

/* Estilos genéricos de administración movidos a public/css/admin.css */

.tabla-usuarios .col-nombre {
    width: 32%;
    min-width: 260px;
}

/* Listado de provincias: código al 18% y centrado, resto para nombre */
.tabla-usuarios .col-prov-codigo {
    width: 18%;
    text-align: center;
}

.tabla-usuarios .col-prov-nombre {
    width: 82%;
}

/* Formulario de reservas */
.reserva-info {
    background: #fafbfc;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 12px;
    margin-bottom: 15px;
}

.reserva-info p {
    margin: 2px 0;
    font-size: 14px;
}

.reserva-info .etiqueta-info {
    font-weight: bold;
    color: #0b2d4d;
}

.tabla-referencia {
    width: 100%;
    border-collapse: collapse;
    margin-top: 6px;
    font-size: 13px;
}

.tabla-referencia th,
.tabla-referencia td {
    border: 1px solid #e0e0e0;
    padding: 4px 8px;
    text-align: left;
}

.tabla-referencia th {
    background: #eef3f8;
}

/* Listado de reservas (pestaña Listado) */
.listado-previstas {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #0b2d4d;
    cursor: pointer;
}

.listado-previstas input[type="checkbox"] {
    width: auto;
}

.tabla-reservas-listado th.col-fecha,
.tabla-reservas-listado td.col-fecha {
    width: 88px;
    text-align: center;
    white-space: nowrap;
}

.tabla-reservas-listado th.col-autobus,
.tabla-reservas-listado td.col-autobus {
    width: 34px;
    text-align: center;
    white-space: nowrap;
}

.tabla-reservas-listado th.col-codigo,
.tabla-reservas-listado td.col-codigo {
    width: 96px;
    white-space: nowrap;
}

.tabla-reservas-listado th.col-plazas,
.tabla-reservas-listado td.col-plazas {
    width: 96px;
    text-align: center;
    white-space: nowrap;
}

.tabla-reservas-listado td.acciones {
    display: table-cell;
}

.tabla-reservas-listado td.acciones > a,
.tabla-reservas-listado td.acciones > span,
.tabla-reservas-listado .form-cancelar-reserva {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-right: 6px;
}

.tabla-reservas-listado .form-cancelar-reserva {
    margin: 0 6px 0 0;
}

.btn-accion-icono {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    line-height: 0;
    display: inline-flex;
    align-items: center;
}

.tabla-reservas-listado .icono-estado-reserva {
    line-height: 0;
}

/* Tabla de reservas: ancho fijo por columnas (Nº, AD, NI, A, H e Importe con
   lo justo) y todo el espacio restante para Viajero. Sin scroll horizontal. */
.tabla-viajeros-titulo {
    color: #0082C9;
    font-weight: bold;
    margin-bottom: 6px;
}

.tabla-viajeros-bloque {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 15px;
}

.tabla-viajeros-wrap {
    flex: 1 1 auto;
    min-width: 0;
}

/* La cabecera queda fuera del área que se desplaza, así que no se mueve nunca.
   Su relleno derecho lo ajusta el JS al ancho de la barra de scroll para que
   las columnas coincidan con las del cuerpo. */
.tabla-viajeros-cabecera {
    padding-right: 0;
}

.tabla-viajeros-scroll {
    /* Exactamente 8 líneas de detalle: la barra vertical está siempre visible
       pero inhabilitada mientras no haya más de 8 líneas de viajeros. */
    height: calc(var(--alto-fila-viajeros) * 8);
    overflow-y: scroll;
    overflow-x: hidden;
}

.tabla-viajeros-scroll .tabla-viajeros tr:first-child td {
    border-top: 0;
}

.btn-agregar-reserva {
    margin-left: 0;
    align-self: flex-start;
    margin-top: calc((var(--alto-fila-viajeros) - var(--tamano-boton-insertar-linea)) / 2);
}

.tabla-viajeros {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 13px;
}

.tabla-viajeros th,
.tabla-viajeros td {
    border: 1px solid #e0e0e0;
    padding: 4px 6px;
    text-align: left;
    /* Misma altura para la cabecera y las líneas de detalle. */
    height: var(--alto-fila-viajeros);
}

/* Anchos de columna: Nº/AD/NI/A admiten 888, H una W e Importe 888.888.88 €;
   Viajero se queda con todo el espacio restante. */
.tabla-viajeros col.col-numero {
    width: 36px;
}

.tabla-viajeros col.col-pax {
    width: 36px;
}

.tabla-viajeros col.col-habitacion {
    width: 27px;
}

.tabla-viajeros col.col-importe {
    width: 90px;
}

/* F.Reserva: ancho para 88/88/8888. */
.tabla-viajeros col.col-fecha {
    width: 80px;
}

.tabla-viajeros col.col-acciones {
    width: var(--ancho-acciones);
}

.tabla-viajeros td.td-viajeros {
    white-space: pre-line;
}

.tabla-viajeros th {
    background: #eef3f8;
    color: #0b2d4d;
    white-space: nowrap;
}

.tabla-viajeros th.columna-centrada,
.tabla-viajeros td.columna-centrada {
    text-align: center;
    white-space: nowrap;
}

.tabla-viajeros th.columna-derecha,
.tabla-viajeros td.columna-derecha {
    text-align: right;
    white-space: nowrap;
}

.tabla-viajeros .check-ninos {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    color: #28a745;
}

.tabla-viajeros .check-ninos svg {
    width: 16px;
    height: 16px;
}

.tabla-viajeros input,
.tabla-viajeros select {
    width: 100%;
    padding: 4px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 13px;
    box-sizing: border-box;
}

.tabla-viajeros .input-mini { min-width: 50px; }
.tabla-viajeros .input-dni { min-width: 90px; }
.tabla-viajeros .input-email { min-width: 150px; }
.tabla-viajeros .input-cliente { min-width: 190px; }
.tabla-viajeros .input-fecha { min-width: 120px; }
.tabla-viajeros .select-salida { min-width: 60px; }
.tabla-viajeros .td-numero { text-align: center; }

/* Acciones de cada fila de viajero */
.acciones-viajero {
    white-space: nowrap;
    text-align: center;
}

/* Ancho fijo de la columna Acciones, igual que en los listados */
.tabla-viajeros th:last-child,
.tabla-viajeros td.acciones-viajero {
    width: var(--ancho-acciones);
    min-width: var(--ancho-acciones);
    max-width: var(--ancho-acciones);
    white-space: nowrap;
}

.etiqueta {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: bold;
}

.etiqueta.administrador {
    background: #d4edda;
    color: #155724;
}

.etiqueta.guia {
    background: #e8d5f7;
    color: #5b2d86;
}

.etiqueta.conductor {
    background: #ccefe8;
    color: #0e5a4d;
}

.etiqueta.usuario {
    background: #cce5ff;
    color: #0068A1;
}

.etiqueta.viajero {
    background: #e2e3e5;
    color: #383d41;
}

.etiqueta.activo {
    background: #d4edda;
    color: #155724;
}

.etiqueta.pendiente {
    background: #fff3cd;
    color: #856404;
}

.etiqueta.bloqueado {
    background: #f8d7da;
    color: #721c24;
}

.acciones a {
    color: #0082C9;
    text-decoration: none;
    margin-right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.acciones a:last-child {
    margin-right: 0;
}

.acciones a:hover {
    opacity: 0.7;
}

/* Autocompletar de usuarios por nombre/apellidos */
.usuario-autocompletar-wrapper {
    position: relative;
}

.usuario-lista-autocompletar {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 60;
    background: #fff;
    border: 1px solid #ccc;
    border-top: none;
    border-radius: 0 0 4px 4px;
    max-height: 220px;
    overflow-y: auto;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}

.usuario-item-autocompletar {
    padding: 8px 10px;
    font-size: 13px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
}

.usuario-item-autocompletar:hover,
.usuario-item-autocompletar.resaltada {
    background: #eef3f8;
}

.usuario-item-autocompletar .doc {
    font-weight: bold;
    color: #0b2d4d;
}

/* Autocompletar de circuitos (código o nombre) en la pantalla de reservas */
.circuito-autocompletar-wrapper {
    position: relative;
}

.circuito-label-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    flex-wrap: wrap;
    margin-bottom: 5px;
}

.circuito-label-fila > label {
    margin-bottom: 0;
}

.circuito-label-fila > label:first-child {
    display: inline;
    font-weight: bold;
    color: #0b2d4d;
}

.circuito-label-fila .circuito-solo-previstas {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: normal;
    font-size: 13px;
    color: #0b2d4d;
    cursor: pointer;
}

.circuito-lista-autocompletar {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 60;
    background: #fff;
    border: 1px solid #ccc;
    border-top: none;
    border-radius: 0 0 4px 4px;
    max-height: 220px;
    overflow-y: auto;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}

.circuito-item-autocompletar {
    padding: 8px 10px;
    font-size: 13px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
}

.circuito-item-autocompletar:hover,
.circuito-item-autocompletar.resaltada {
    background: #eef3f8;
}

/* Centra el número del autobús, manteniendo la flecha a la derecha */
.autobus-select .sp-trigger-nombre {
    text-align: center;
}

/* Botón "Detalle" del circuito con flecha abajo/arriba */
.btn-detalle-circuito {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: #0082C9;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    margin-bottom: 10px;
}

.btn-detalle-circuito .detalle-flecha {
    width: 16px;
    height: 16px;
    stroke-width: 3;
}

.btn-detalle-circuito .detalle-flecha-arriba {
    display: none;
}

.btn-detalle-circuito.abierto .detalle-flecha-abajo {
    display: none;
}

.btn-detalle-circuito.abierto .detalle-flecha-arriba {
    display: inline;
}

.detalle-circuito {
    width: 100%;
    font-size: 13px;
}

/* Bloque de Observaciones (desplegable) */
.observaciones-circuito {
    width: 100%;
    margin-bottom: 10px;
}

.observaciones-rect {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: #fff;
    padding: 8px 10px;
    font-size: 13px;
    line-height: 1.5;
    color: #0b2d4d;
    min-height: calc(1.5em * 3 + 16px);
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: break-word;
    overflow: hidden;
}

/* Modal de agregar/editar reserva */
.modal-confirmacion.modal-reserva {
    max-width: 620px;
    max-height: calc(100vh - 40px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    text-align: left;
    padding-left: 32px;
}

.modal-reserva-titulo {
    flex: 0 0 auto;
    font-size: 17px;
    color: #0082C9;
    margin: 0 0 16px;
}

.modal-reserva-contenido {
    min-height: 0;
    overflow-y: auto;
    margin-right: -24px;
    padding-right: 24px;
}

.modal-reserva-campos {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.modal-reserva-campos .form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.modal-reserva-campos .form-group label {
    font-size: 13px;
    color: #0b2d4d;
}

.modal-reserva-campos .form-group input {
    width: 100%;
    padding: 7px 9px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
}

.modal-reserva-campos .form-group input[readonly] {
    background: #f5f5f5;
    color: #0b2d4d;
}

/* Etiquetas e inputs de Viajeros, H y A en dos filas alineadas. */
.modal-reserva-viajeros-entrada {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 6px;
}

.modal-reserva-viajeros-campo {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.modal-reserva-viajeros-campo > label,
.modal-reserva-viajero-dato > label {
    font-size: 13px;
    color: #0b2d4d;
    line-height: 1;
}

.modal-reserva-viajeros-input {
    position: relative;
}

.modal-reserva-viajeros-input input {
    padding-right: 40px !important;
}

.modal-reserva-viajero-dato {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

.modal-reserva-campos .form-group .modal-reserva-viajero-dato input {
    width: 56px;
    padding: 7px 2px;
    text-align: center;
    font-size: 14px;
    line-height: 1;
}

.modal-reserva-campos .form-group #modal_reserva_viajero_asiento {
    background-image: url("../img/bus.svg");
    background-repeat: no-repeat;
    background-position: right 3px center;
    background-size: 20px 20px;
    padding-right: 24px;
}

.modal-reserva-asiento-combo {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.btn-asiento-autobus {
    position: absolute;
    right: 3px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 3px;
    background: transparent;
    cursor: pointer;
}

/* Plano de asientos del autobús */
.modal-autobus-overlay {
    z-index: 10001;
}

.modal-confirmacion.modal-autobus {
    max-width: 340px;
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.modal-autobus .modal-autobus-contenido {
    min-height: 0;
    overflow: auto;
    margin-bottom: 16px;
    text-align: center;
}

.modal-autobus-plano {
    position: relative;
    display: inline-block;
    width: 275px;
    max-width: 100%;
    line-height: 0;
}

.modal-autobus-plano img {
    display: block;
    width: 100%;
    height: auto;
}

.modal-autobus-asientos {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.modal-autobus-asiento {
    position: absolute;
    width: 10.9%;
    height: 3.27%;
    padding: 0;
    border: none;
    background: transparent;
    transform: translate(-50%, -50%);
    cursor: pointer;
}

.modal-autobus-asiento.ocupado {
    cursor: not-allowed;
}

.modal-autobus-asiento.ocupado::before,
.modal-autobus-asiento.ocupado::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 92%;
    height: 3px;
    border-radius: 2px;
    background: #dc3545;
}

.modal-autobus-asiento.ocupado::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.modal-autobus-asiento.ocupado::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.modal-reserva-habitacion-combo {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 56px;
}

.modal-reserva-campos .form-group .modal-reserva-habitacion-combo input {
    width: 100%;
    padding: 7px 18px 7px 2px;
    text-align: center;
    font-size: 14px;
    line-height: 1;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.btn-habitacion-caret {
    position: absolute;
    right: 4px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #0b2d4d;
    font-size: 12px;
    line-height: 1;
    padding: 2px;
}

.modal-reserva-habitacion-lista {
    position: absolute;
    top: calc(100% + 1px);
    right: 0;
    width: 132px;
    z-index: 110;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}

.modal-reserva-habitacion-lista[hidden] {
    display: none;
}

.modal-reserva-habitacion-lista button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 6px 8px;
    border: 0;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    color: #0b2d4d;
}

.modal-reserva-habitacion-lista button:hover {
    background: #eef3f8;
}

.modal-reserva-recogida-lista {
    width: 300px;
    max-width: 70vw;
    max-height: 220px;
    overflow-y: auto;
}

.modal-reserva-recogida-lista button {
    white-space: normal;
    line-height: 1.35;
    text-align: left;
}

.modal-reserva-recogida-campo {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
}

.modal-reserva-recogida-campo > label {
    font-size: 13px;
    color: #0b2d4d;
}

.modal-reserva-observaciones-campo textarea {
    width: 100%;
    padding: 7px 9px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.35;
    color: #0b2d4d;
    background: #fff;
    box-sizing: border-box;
    resize: vertical;
}

.modal-reserva-observaciones-campo textarea:focus {
    outline: none;
    border-color: #0082c9;
    box-shadow: 0 0 0 2px rgba(0, 130, 201, 0.15);
}

.modal-reserva-recogida-combo {
    width: 100%;
}

.modal-reserva-campos .form-group #modal_reserva_recogida {
    width: 100%;
    padding: 7px 28px 7px 9px;
    text-align: left;
    font-size: 14px;
    line-height: 1.2;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    box-sizing: border-box;
    cursor: pointer;
}

.modal-reserva-recogida-combo .modal-reserva-recogida-lista {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

.modal-reserva-viajeros-resultados {
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 100;
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid #ccc;
    border-radius: 0 0 4px 4px;
    background: #fff;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}

.modal-reserva-viajeros-resultados[hidden] {
    display: none;
}

.modal-reserva-viajeros-resultado,
.modal-reserva-viajeros-sin-resultados {
    padding: 8px 10px;
    border-bottom: 1px solid #f0f0f0;
    color: #0b2d4d;
    font-size: 13px;
}

.modal-reserva-viajeros-resultado {
    cursor: pointer;
}

.modal-reserva-viajeros-resultado:hover,
.modal-reserva-viajeros-resultado.seleccionado {
    background: #eef3f8;
}

.modal-reserva-viajeros-sin-resultados {
    color: #666;
}

/* Tabla de viajeros del modal Reserva: anchos fijos por columna.
   Documento con el ancho justo para " W-99999999-W "; Nombre y apellidos
   ocupa todo el espacio restante. */
.modal-reserva-viajeros-lista .tabla-viajeros-reserva {
    table-layout: fixed;
}

.tabla-viajeros-reserva th.columna-documento {
    width: 108px;
}

.modal-reserva-viajeros-lista {
    width: 100%;
    box-sizing: border-box;
    margin-top: 8px;
    height: 110px;
    overflow-y: scroll;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
}

/* Campos estrechos del formulario de Recogidas: código con el ancho de su
   etiqueta y hora con el ancho necesario para HH:MM. */
.form-group-codigo {
    width: 78px;
}

.form-group-hora {
    width: 76px;
}

.modal-reserva-resumen {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-top: 8px;
    font-size: 12px;
    color: #0b2d4d;
}

.resumen-grupo {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.resumen-grupo-derecha {
    margin-left: auto;
}

.resumen-campo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.resumen-etiqueta {
    font-size: 11px;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
}

.resumen-valor {
    width: 42px;
    height: 32px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 2px 5px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background: #fff;
    text-align: right;
    font-size: 13px;
    line-height: 1.2;
}

.modal-reserva-resumen-economico {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 8px;
    font-size: 12px;
    color: #0b2d4d;
}

.resumen-campo-boton {
    justify-content: flex-end;
}

.btn-pagos {
    width: var(--tamano-icono-insertar-linea);
    height: var(--tamano-icono-insertar-linea);
    border-radius: 50%;
    background: transparent;
    border: none;
    color: #0082C9;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
}

.btn-pagos svg {
    width: var(--tamano-icono-insertar-linea);
    height: var(--tamano-icono-insertar-linea);
    stroke: #0082C9;
    stroke-width: 2;
}

.btn-pagos svg text {
    stroke: none;
    fill: #0082C9;
}

.btn-pagos:hover {
    opacity: 0.7;
}

.modal-pagos-overlay {
    z-index: 10001;
}

.modal-pagos .tabla-pagos {
    table-layout: fixed;
}

.modal-pagos .tabla-pagos .columna-fecha-pago {
    width: 100px;
    padding-left: 10px;
    padding-right: 10px;
}

.modal-pagos .tabla-pagos .columna-forma-pago {
    width: 68px;
    text-align: center;
}

.modal-pagos .tabla-pagos .columna-importe-pago {
    width: 88px;
}

.modal-pagos .tabla-pagos .columna-iconos-pago {
    width: 94px;
    text-align: center;
    white-space: nowrap;
}

.modal-pagos .tabla-pagos .columna-acciones {
    width: 56px;
}

.modal-pagos .tabla-pagos td.columna-iconos-pago {
    padding-left: 4px;
    padding-right: 4px;
}

.modal-pagos .tabla-pagos .columna-iconos-pago .icono-pago {
    display: inline-flex;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    cursor: pointer;
}

.modal-pagos .tabla-pagos .columna-iconos-pago button.icono-pago {
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.modal-pagos .tabla-pagos .columna-iconos-pago button.icono-pago:disabled {
    cursor: wait;
    opacity: 0.55;
}

.modal-pagos .tabla-pagos .columna-iconos-pago .icono-pago + .icono-pago {
    margin-left: 8px;
}

.modal-pagos .tabla-pagos .columna-iconos-pago svg {
    display: block;
    width: 18px;
    height: 18px;
}

.modal-pagos .tabla-pagos .icono-pago.pdf {
    color: #E11F26;
}

.modal-pagos .tabla-pagos .icono-pago.email {
    color: #1a73e8;
}

.modal-pagos .tabla-pagos .icono-pago.whatsapp {
    color: #25D366;
}

.modal-pagos-entrada {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.modal-pagos-entrada .modal-pagos-fecha {
    flex: 0 0 auto;
}

.modal-pagos-entrada .modal-pagos-importe {
    flex: 0 0 100px;
}

.modal-pagos-entrada .modal-pagos-concepto {
    flex: 1 1 auto;
    min-width: 0;
}

/* El botón + centra el círculo con la línea de datos: se descuenta el margen
   inferior del form-group (15px) y los 2,7px que el input es más alto que el botón. */
.modal-pagos-entrada #btnAgregarPago {
    width: 33px;
    height: 33px;
    align-self: flex-end;
    margin-bottom: 18px;
}

.modal-pagos-entrada .modal-pagos-forma {
    flex: 0 0 70px;
}

.modal-pagos-entrada .modal-pagos-forma-combo {
    width: 100%;
}

/* Etiqueta del campo F.Pago centrada sobre su desplegable. */
.modal-pagos-entrada .modal-pagos-forma label {
    text-align: center;
}

.modal-pagos-entrada .modal-pagos-concepto-combo {
    width: 100%;
}

/* El concepto es un desplegable: texto a la izquierda y hueco para la flecha
   (se sube la especificidad para ganar a la regla del combo de habitación). */
.modal-reserva-campos .modal-pagos-entrada .modal-pagos-concepto-combo input {
    width: 100%;
    padding: 7px 26px 7px 9px;
    text-align: left;
}

/* Aunque no se escribe a mano, se muestra como un campo normal. */
.modal-reserva-campos .modal-pagos-entrada .modal-pagos-concepto-combo input[readonly] {
    background: #ffffff;
    cursor: pointer;
}

.modal-pagos-forma-lista {
    width: 160px;
}

.modal-pagos-concepto-lista {
    width: 160px;
}

.resumen-valor-importe {
    width: 100px;
    white-space: nowrap;
}

.modal-viajero-error {
    color: #dc3545;
    font-size: 12px;
}

/* Aviso de error de las ventanas Reserva y Pagos: rectángulo rojo bajo el título */
.modal-reserva-viajeros-error {
    background: #fdecec;
    border: 1px solid #f0a8a8;
    border-radius: 4px;
    color: #c82333;
    font-size: 13px;
    font-weight: bold;
    padding: 8px 12px;
    margin: 0 0 14px;
}

.modal-reserva-viajeros-error:empty {
    display: none;
}

.modal-compartir-overlay {
    z-index: 10002;
}

.modal-confirmacion.modal-compartir {
    display: grid;
    justify-items: center;
    gap: 14px;
    max-width: 400px;
    color: #176b35;
}

.modal-compartir-botones {
    width: 100%;
}

.modal-compartir h3,
.modal-compartir p {
    margin: 0;
}

.modal-compartir-botones > a {
    flex: 1;
    text-align: center;
    text-decoration: none;
}

.modal-viajero-overlay {
    z-index: 10001;
}

.modal-confirmacion.modal-viajero {
    max-width: 760px;
}

.modal-viajero form {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-viajero-contenido {
    min-height: 0;
    overflow-y: auto;
}

.modal-viajero .modal-confirmacion-botones {
    flex: 0 0 auto;
    margin-top: 14px;
}

.modal-reserva-habitaciones {
    display: flex;
    gap: 10px;
}

.modal-reserva-habitaciones .form-group {
    flex: 1 1 0;
    min-width: 0;
}

.modal-reserva-acciones {
    margin-bottom: 16px;
}

.modal-reserva-acciones .acciones-seccion {
    margin-top: 0;
}

.modal-reserva-acciones .detalle-subtitulo {
    border-top: 2px solid #0082C9;
    padding-top: 6px;
    font-size: 16px;
}

.modal-reserva-acciones .acciones-fila {
    flex-wrap: nowrap;
    gap: 10px;
}

/* Botones del modal de reserva */
.modal-reserva .modal-confirmacion-botones {
    width: 100%;
}

.btn-modal-guardar-solido {
    flex: 1;
    background: #0082C9;
    color: #ffffff;
    border: 1px solid #0082C9;
    padding: 10px 18px;
    border-radius: 4px;
    font-size: 15px;
    cursor: pointer;
}

.btn-modal-guardar-solido:hover {
    background: #0068A1;
    border-color: #0068A1;
}

.btn-modal-cancelar-solido {
    background: #ffffff;
    color: #dc3545;
    border: 1px solid #dc3545;
    padding: 10px 18px;
    border-radius: 4px;
    font-size: 15px;
    cursor: pointer;
}

.btn-modal-cancelar-solido:hover {
    background: #fdecec;
    color: #c82333;
    border-color: #c82333;
}

/* Botón Cancelar del formulario (borde y texto rojos) */
.btn-cancelar-form {
    padding: 12px 20px;
    border: 1px solid #dc3545;
    background: #fff;
    color: #dc3545;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    white-space: nowrap;
}

.btn-cancelar-form:hover {
    background: #fdecec;
    color: #c82333;
    border-color: #c82333;
}

/* Línea azul de separación al final del detalle */
.detalle-linea-azul {
    width: 100%;
    border-bottom: 2px solid #0082C9;
    margin-top: 12px;
}

/* Dos bloques del detalle del circuito */
.detalle-grid {
    display: flex;
    gap: 20px;
    width: 100%;
    flex-wrap: wrap;
}

.detalle-bloque {
    flex: 1 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
}

/* Empuja el bloque Acciones a la parte baja de su columna */
.acciones-seccion {
    margin-top: auto;
}

.detalle-subtitulo {
    margin: 2px 0 1px;
    color: #0082C9;
    font-size: 13px;
    font-weight: normal;
    padding-bottom: 1px;
}

/* Espacio negativo (-1px) bajo todas las etiquetas azules excepto Acciones. */
.detalle-bloque > .detalle-subtitulo {
    margin: 2px 0 -1px;
    padding-bottom: 0;
}

/* Raya azul encima del primer subtítulo de cada columna (Recogidas y Hoteles). */
.detalle-bloque .detalle-subtitulo:first-child {
    border-top: 2px solid #0082C9;
    padding-top: 6px;
}

.tabla-recogidas {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.tabla-recogidas th,
.tabla-recogidas td {
    border: 1px solid #e0e0e0;
    padding: 6px 8px;
    text-align: left;
}

.tabla-recogidas th {
    background: #eef3f8;
    color: #0b2d4d;
}

/* Columna fija (fecha / teléfono) de las tablas de Hoteles, Guía y Conductor. */
.tabla-recogidas td.celda-dato-fija {
    width: 110px;
    min-width: 110px;
    white-space: nowrap;
}

/* Estrellas doradas junto al nombre del hotel en el detalle de reservas. */
.tabla-recogidas .estrellas {
    color: #FFD700;
    font-size: inherit;
    letter-spacing: -2px;
}

.importes-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    width: 100%;
}

.importe-item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.importe-etiqueta {
    font-size: 13px;
    color: #0b2d4d;
    text-align: right;
}

.importe-rect {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 8px 10px;
    background: #fff;
    box-sizing: border-box;
    text-align: right;
}

.importe-valor {
    font-size: 13px;
    font-weight: normal;
    color: #0b2d4d;
    display: block;
}

/* Bloque Acciones (Transporte, Alojamiento y botones de acción) */
.acciones-block {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 10px 12px;
    background: #fff;
    box-sizing: border-box;
}

.acciones-fila {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.acciones-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #0b2d4d;
    cursor: pointer;
    white-space: nowrap;
}

.acciones-check input[type="checkbox"],
.acciones-check input[type="radio"] {
margin: 0;
}

/* Validación del documento */
.error-documento {
    display: block;
    color: #d9534f;
    font-size: 12px;
    margin-top: 4px;
}

.form-group input.input-error {
    border-color: #d9534f;
    box-shadow: 0 0 0 1px #d9534f;
}

@media (max-width: 768px) {
    .auth-wrapper,
    .admin-wrapper {
        margin: 15px auto;
        padding: 20px 15px;
    }

    .grid-2col {
        grid-template-columns: 1fr;
    }

    .row-campos .form-group,
    .row-campos .form-group-crece {
        flex: 1 1 100%;
        min-width: 100%;
    }

    .form-group input.input-doc,
    .form-group input.input-soporte,
    .form-group select.input-sexo,
    .form-group input.input-fecha,
    .form-group input.input-cp,
    .form-group select.input-poblacion,
    .form-group select.input-provincia,
    .form-group select.input-pais,
    .form-group input.input-tel {
        width: 100%;
    }
}

@media (max-width: 560px) {
    .modal-reserva-acciones .acciones-fila {
        flex-wrap: wrap;
    }
}