/* ==========================================================================
   Iconos unificados - Murciatours
   Tamaños, colores y apariencia de todos los iconos de la aplicación.
   ========================================================================== */

:root {
    --icono-azul: #0082C9;
    --icono-azul-oscuro: #006ea8;
    --icono-rojo: #dc3545;
    --icono-rojo-oscuro: #a71d2a;
    --icono-verde: #28a745;
    --tamano-boton-insertar-linea: 38px;
    --tamano-icono-insertar-linea: 24px;
}

/* ----------------------------------------------------------------------------
   Menú de iconos de la cabecera
   ---------------------------------------------------------------------------- */
.icon-menu {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.icon-menu-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 4px 7px;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #0082C9;
    text-decoration: none;
    font-size: 10px;
    line-height: 1.1;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.icon-menu-item:hover {
    background: transparent;
    color: #f28c28;
    border-color: #f28c28;
}

.icon-menu-item svg {
    width: 16px;
    height: 16px;
}

.icon-menu-user {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border-radius: 6px;
    border: 1px solid #0082C9;
    color: #0082C9;
    font-size: 12px;
    font-weight: bold;
}

.icon-menu-user svg {
    width: 14px;
    height: 14px;
}

/* ----------------------------------------------------------------------------
   Iconos de acción en los listados (editar / estado / papelera)
   ---------------------------------------------------------------------------- */
.acciones .icono-accion {
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

/* Papelera deshabilitada (en gris) cuando el registro está en uso */
.acciones .papelera-deshabilitada {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    cursor: default;
}

/* ----------------------------------------------------------------------------
   Botones circulares de búsqueda (Buscar / Borrar búsqueda)
   ---------------------------------------------------------------------------- */
.botones-busqueda {
    display: inline-flex;
    gap: 8px;
    align-items: center;
}

.btn-circulo {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.btn-circulo svg {
    width: 24px;
    height: 24px;
}

.btn-verde {
    color: #28a745;
}

.btn-verde:hover {
    background: rgba(40, 167, 69, 0.15);
}

.btn-rojo {
    color: #dc3545;
}

/* ----------------------------------------------------------------------------
   Botón circular azul para añadir (símbolo + dentro de un círculo)
   ---------------------------------------------------------------------------- */
.btn-add-date-circle,
.btn-agregar-fila,
.btn-viajero-agregar {
    border-radius: 50%;
    background-color: transparent;
    color: #0082C9;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.btn-add-date-circle {
    width: var(--tamano-boton-insertar-linea);
    height: var(--tamano-boton-insertar-linea);
    display: flex;
    transition: background 0.2s;
}

.btn-add-date-circle svg,
.btn-agregar-fila svg,
.btn-viajero-agregar svg {
    width: var(--tamano-icono-insertar-linea);
    height: var(--tamano-icono-insertar-linea);
    stroke: #0082C9;
    stroke-width: 2;
}

.btn-agregar-fila {
    width: var(--tamano-boton-insertar-linea);
    height: var(--tamano-boton-insertar-linea);
    margin-left: 6px;
    vertical-align: middle;
}

.btn-viajero-agregar {
    width: var(--tamano-boton-insertar-linea);
    height: var(--tamano-boton-insertar-linea);
    flex: 0 0 var(--tamano-boton-insertar-linea);
}

.btn-viajero-agregar svg {
    display: block;
}

.btn-agregar-fila:hover {
    opacity: 0.7;
}

/* ----------------------------------------------------------------------------
   Iconos dentro de los inputs (subir imagen, persona, calendario, ojito)
   ---------------------------------------------------------------------------- */
.btn-upload-inside,
.btn-viajero-persona,
.btn-calendar-trigger,
.btn-ojito {
    position: absolute;
    right: 5px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0082C9;
    padding: 5px;
    border-radius: 3px;
}

.btn-upload-inside svg,
.btn-viajero-persona svg,
.btn-ojito svg {
    width: 20px;
    height: 20px;
}

.btn-ojito {
    color: #0b2d4d;
}

.btn-calendar-trigger {
    right: 12px;
    padding: 0;
    display: inline-flex;
}

.btn-calendar-trigger svg {
    width: 16px;
    height: 16px;
}

.btn-upload-inside {
    transition: background 0.2s, color 0.2s;
}

.btn-upload-inside:hover,
.btn-viajero-persona:hover {
    background: #e9ecef;
    color: #006ea8;
}

.btn-viajero-persona {
    top: 50%;
    transform: translateY(-50%);
    transition: background 0.2s, color 0.2s;
}

.btn-viajero-persona svg {
    display: block;
}

/* ----------------------------------------------------------------------------
   Acciones de cada elemento (editar / eliminar) dentro de marcos y listas
   ---------------------------------------------------------------------------- */
.item-acciones {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.btn-edit-item,
.btn-remove-date,
.btn-remove-red {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
}

.btn-edit-item {
    color: #0082C9;
}

.btn-remove-date,
.btn-remove-red {
    color: #dc3545;
    font-weight: bold;
}

.btn-remove-red {
    padding: 0 5px;
    font-size: 16px;
}

.btn-remove-red:hover {
    color: #a71d2a;
}

.btn-edit-item svg,
.btn-remove-date svg,
.btn-remove-red svg {
    width: 15px;
    height: 15px;
    vertical-align: middle;
}

/* ----------------------------------------------------------------------------
   Botón para limpiar el selector de salida en circuitos
   ---------------------------------------------------------------------------- */
.btn-limpiar-salida {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-limpiar-salida svg {
    width: 20px;
    height: 20px;
}

/* ----------------------------------------------------------------------------
   Iconos de la tabla de viajeros (estado y borrado)
   ---------------------------------------------------------------------------- */
.btn-icono-viajero {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0082C9;
}

.btn-icono-viajero svg {
    width: 16px;
    height: 16px;
}

.btn-icono-viajero.estado-pendiente {
    color: #dc3545;
}

.btn-icono-viajero.estado-cancelada {
    color: #dc3545;
}

.btn-icono-viajero.estado-parcial {
    color: #ffc107;
}

.btn-icono-viajero.estado-pagada {
    color: #28a745;
}

.btn-icono-viajero.borrar {
    color: #dc3545;
}

.btn-quitar-viajero {
    background: transparent;
    border: none;
    color: #dc3545;
    font-size: 18px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

/* ----------------------------------------------------------------------------
   Acciones (editar / eliminar) de las líneas de viajeros en el modal Reserva
   ---------------------------------------------------------------------------- */
.modal-reserva-viajero-acciones {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

.modal-reserva-viajero-acciones button {
    border: 0;
    background: transparent;
    padding: 0 2px;
    color: #0082C9;
    line-height: 1;
    cursor: pointer;
}

.modal-reserva-viajero-acciones button svg {
    display: block;
    width: 15px;
    height: 15px;
    vertical-align: middle;
}

.modal-reserva-viajero-acciones .editar {
    color: #0082C9;
}

.modal-reserva-viajero-acciones .quitar {
    color: #dc3545;
}

/* ----------------------------------------------------------------------------
   Acciones del detalle de reserva (PDF, imprimir, email, WhatsApp)
   ---------------------------------------------------------------------------- */
.acciones-iconos {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.btn-accion {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: #333;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-accion svg {
    width: 22px;
    height: 22px;
}

.btn-accion.pdf {
    color: #E11F26;
}

.btn-accion.imprimir {
    color: #555555;
}

.btn-accion.email {
    color: #1a73e8;
}

.btn-accion.whatsapp {
    color: #25D366;
}

.btn-accion:hover {
    opacity: 0.75;
}

/* ----------------------------------------------------------------------------
   Iconos varios (actualizar catálogo, PDF de la portada)
   ---------------------------------------------------------------------------- */
.btn-actualizar .icono-actualizar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-actualizar .icono-actualizar svg {
    width: 21px;
    height: 21px;
}

.pdf-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    margin: 12px 3% 12px 0;
    color: #E11F26;
    text-decoration: none;
}

.pdf-icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}