/*
 * Reglas de comportamiento que no son de aspecto: tarjeta elaborada de los iconos de ayuda, dropdowns "Más acciones", tabla ajustada,
 * cuadrícula de filtros y formularios responsive. Se cargan siempre, sobre el tema del sistema anterior (tema-legacy.css y legacy.css).
 * El estilo limpio tipo Google quedó en centralbase.css, que ya no se carga (ver layouts/base.blade.php).
 */

/* ------------------------------------------------------------------ Icono "se abre en una ventana nueva" y tarjeta elaborada */
.subitem .subitem-nv { margin-left: 8px; font-size: .78rem; color: #7c3aed; opacity: .85; transition: transform .15s, opacity .15s; }
.subitem:hover .subitem-nv { opacity: 1; transform: translate(1px, -1px); }
.tt-rico { position: fixed; z-index: 7000; width: 290px; padding: 14px 16px; border-radius: 12px; background: #fff; border: 1px solid #ddd6fe; box-shadow: 0 14px 34px -6px rgba(91, 33, 182, .28); color: #334155; pointer-events: none; display: none; }
.tt-rico::before { content: ""; position: absolute; left: -7px; top: var(--flecha, 18px); width: 12px; height: 12px; background: #fff; border-left: 1px solid #ddd6fe; border-bottom: 1px solid #ddd6fe; transform: rotate(45deg); }
/* Variantes para los iconos de las tablas: la tarjeta sale arriba o abajo del icono, con la flecha hacia el. */
.tt-rico.arriba::before { left: var(--flechaX, 20px); top: auto; bottom: -7px; border-left: 0; border-bottom: 1px solid #ddd6fe; border-right: 1px solid #ddd6fe; }
.tt-rico.abajo::before { left: var(--flechaX, 20px); top: -7px; border-left: 1px solid #ddd6fe; border-bottom: 0; border-top: 1px solid #ddd6fe; transform: rotate(45deg); }
.tt-rico .tt-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.tt-rico .tt-ico { width: 34px; height: 34px; border-radius: 10px; background: #ede9fe; color: #7c3aed; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; flex: none; }
.tt-rico .tt-tit { font-weight: 700; color: #0f172a; font-size: 14.5px; line-height: 1.2; }
.tt-rico .tt-ins { display: inline-block; margin-top: 3px; padding: 0 7px; border-radius: 10px; background: #7c3aed; color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.tt-rico p { margin: 0 0 8px; font-size: 12.5px; line-height: 1.5; color: #475569; }
.tt-rico ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid #f1f5f9; padding-top: 8px; }
.tt-rico li { position: relative; padding: 2px 0 2px 20px; font-size: 12.5px; line-height: 1.45; color: #334155; }
.tt-rico li::before { content: "\f00c"; font-family: FontAwesome; position: absolute; left: 0; top: 2px; font-size: 11px; color: #7c3aed; }

/* Tooltip simple (data-tip): el texto heredaba el gris oscuro de .lg y desaparecía sobre el fondo oscuro. */
.lg.lg-tip, .lg-tip { color: #fff; font-family: inherit; }

/* ------------------------------------------------------------------ Tablas y filtros */
/* Tabla ancha que debe caber sin scroll horizontal (listado de itinerarios): encabezados que se parten en dos líneas y menos relleno */
.lg table.lg-table.lg-ajustada th { white-space: normal; padding: 10px 5px; line-height: 1.25; }
.lg table.lg-table.lg-ajustada td { padding: 8px 5px; }
.lg table.lg-table.lg-ajustada .lg-btn-xs { padding: 3px 7px; }
.lg table.lg-table.lg-ajustada .label { white-space: nowrap; }

/* Pantallas angostas (formularios con max-width en línea): quedan centradas en el área de trabajo, que ahora usa todo el ancho. */
.trabajo > .lg[style*="max-width"] { margin-left: auto; margin-right: auto; }

/* Tablas con «Mostrar N registros / Buscar / paginación» (tabla-legacy.js) dentro de un panel sin relleno: las barras y la tabla
   no deben pegarse a los bordes del panel. */
.lg .lg-body.sin-pad:has(> .dt-barra) > .dt-barra { margin: 0; padding: 14px 20px; }
.lg .lg-body.sin-pad:has(> .dt-barra) > .dt-barra:first-child { border-bottom: 1px solid #eef0f2; }
.lg .lg-body.sin-pad:has(> .dt-barra) > .dt-pie { border-top: 1px solid #eef0f2; }
.lg .lg-body.sin-pad:has(> .dt-barra) .lg-table th:first-child, .lg .lg-body.sin-pad:has(> .dt-barra) .lg-table td:first-child { padding-left: 20px; }
.lg .lg-body.sin-pad:has(> .dt-barra) .lg-table th:last-child, .lg .lg-body.sin-pad:has(> .dt-barra) .lg-table td:last-child { padding-right: 20px; }

/* Panel con una lista de autosugerencia (combo de personas): la lista debe poder salir del panel sin recortarse. */
.lg .lg-panel:has(.cp-combo) { overflow: visible; }
.lg .lg-panel:has(.cp-combo) > .lg-head { border-radius: 8px 8px 0 0; }

/* Filtros: los campos se reparten en una cuadrícula del mismo ancho. */
.lg .lg-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px 16px; align-items: end; }
.lg .lg-row > .lg-col { flex: none; min-width: 0; max-width: none !important; }

/* Formularios responsive: en pantallas angostas cada campo ocupa todo el ancho. */
@media (max-width: 640px) {
    .lg .lg-row { grid-template-columns: 1fr; }
    .lg .lg-body { padding: 16px; }
    .lg .lg-head { padding: 14px 16px; }
    .filtros { flex-direction: column; align-items: stretch; }
    .filtros > div, .filtros > button { max-width: none !important; width: 100%; flex: 1 1 auto; }
    .trabajo { padding: 16px 12px; }
}

/* ------------------------------------------------------------------ Dropdown «Más acciones» (cabecera de un panel) y menú de cada fila */
.lg .lg-panel.lg-panel-dd { overflow: visible; }
.lg .lg-dd-auto > div, .lg .lg-dd-fila > div { min-width: 210px; }
.lg .lg-btn-group:has(> .lg-dd-fila) { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; }
.lg .lg-dd-fila { display: flex; }
.lg .lg-btn-group:has(> .lg-dd-fila) > .lg-btn, .lg .lg-dd-fila > .lg-btn { box-sizing: border-box; height: 34px; padding-top: 0; padding-bottom: 0; align-items: center; justify-content: center; }
.lg .lg-dd-fila > .lg-btn { width: 34px; padding-left: 0; padding-right: 0; }
.lg .lg-dd-fila > div { text-align: left; }
.lg .lg-dd-fila > div a { display: flex; align-items: center; gap: 8px; white-space: nowrap; font-weight: 400; }
.lg .lg-dd-fila > div .fa { width: 16px; text-align: center; color: #5f6368; }
/* Variante con botón de texto (selector de sección): ancho automático y la opción actual marcada. */
.lg .lg-dd-fila.lg-dd-ancho > .lg-btn { width: auto; padding-left: 14px; padding-right: 14px; gap: 8px; }
.lg .lg-dd-fila > div a.activa { background: #eaf2fd; color: #1967d2; font-weight: 600; }
.lg .lg-dd-fila > div a .lg-dd-marca { margin-left: auto; width: auto; color: #1967d2; }
.lg .lg-btn[hidden] { display: none !important; }
.lg .lg-dd-auto > div a, .lg .lg-dd-auto > div button { display: flex; align-items: center; gap: 8px; border: 0; background: none; height: auto; white-space: nowrap; color: #202124; font-weight: 400; }
.lg .lg-dd-auto > div .fa { width: 16px; text-align: center; color: #5f6368; }
.lg .lg-dd-auto > div .lg-btn-danger, .lg .lg-dd-auto > div .lg-btn-danger .fa { color: #c5221f; }
.lg .lg-dd-auto > div .lg-btn-primary, .lg .lg-dd-auto > div .lg-btn-primary .fa { color: #1967d2; font-weight: 500; }

/* tema-legacy.css separa 12px los submit de los formularios; en los botones .lg-btn (modales, barras de acciones) no debe moverlos. */
.lg form button.lg-btn[type=submit]:not(.secundario):not(.peligro) { margin-top: 0; }
dialog.lg-modal .mf { align-items: center; }