/*
 * Panel de Modificaciones: diff de solicitudes y columna Elemento (docs/MODIFICACIONES.md §12.3).
 * Hoja propia registrada con FilamentAsset (AppServiceProvider): el CSS compilado de Filament no incluye las clases de
 * Tailwind que esta vista necesita (line-through, grid, fondos de color...). Se publica con `php artisan filament:assets`
 * (composer post-autoload-dump ya ejecuta filament:upgrade). Usa las variables de color del panel (rgb(var(--gray-500)))
 * para respetar el tema y el modo oscuro. Todas las clases llevan el prefijo mod-.
 */

/* ---------- Columna Elemento ---------- */
.mod-elemento { display: flex; flex-direction: column; gap: .25rem; min-width: 0; padding: .875rem .75rem; }
.mod-elemento-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; font-weight: 600; font-size: .875rem; color: rgb(var(--gray-950)); }
.mod-elemento-meta { font-size: .75rem; color: rgb(var(--gray-500)); }
.mod-elemento-incluida { display: flex; }
.mod-elemento-requiere { font-size: .75rem; font-weight: 500; color: rgb(var(--warning-600)); }

/* ---------- Cambios solicitados ---------- */
/* Filament envuelve la columna en un div flex: sin ancho explícito el bloque se encoge al contenido y la tabla
   (table-layout: fixed) no puede ajustar el texto. Ocupa toda la celda, con un mínimo para que no se comprima. */
.mod-cambios { flex: 1 1 auto; width: 100%; min-width: 32rem; padding: .875rem .75rem; font-size: .8125rem; line-height: 1.5; color: rgb(var(--gray-950)); white-space: normal; }

.mod-contexto { display: flex; flex-wrap: wrap; gap: .125rem .875rem; margin-bottom: .5rem; padding: 0 .75rem; font-size: .75rem; color: rgb(var(--gray-500)); }
.mod-contexto-etiqueta { font-weight: 600; color: rgb(var(--gray-600)); }

.mod-vacio { padding: 0 .75rem; font-size: .75rem; color: rgb(var(--gray-500)); }

.mod-tabla { width: 100%; border-collapse: collapse; table-layout: fixed; }
.mod-tabla .mod-col-campo { width: 11rem; }
.mod-tabla th,
.mod-tabla td { padding: .5rem .75rem; text-align: left; vertical-align: top; border-top: 1px solid rgb(var(--gray-200)); overflow-wrap: anywhere; }
.mod-tabla thead th { padding-top: 0; padding-bottom: .375rem; border-top: 0; font-size: .6875rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: rgb(var(--gray-500)); }
.mod-tabla tbody th { font-weight: 500; padding-right: 1rem; color: rgb(var(--gray-600)); }

.mod-actual { color: rgb(var(--gray-500)); padding-right: 1.25rem; }
.mod-solicitado { font-weight: 500; background: rgba(var(--success-500), .07); border-left: 2px solid rgba(var(--success-500), .35); padding-left: 1rem; }
.mod-eliminado { text-decoration: line-through; text-decoration-color: rgba(var(--danger-500), .6); }
.mod-num { text-align: right; font-variant-numeric: tabular-nums; }
.mod-nulo { color: rgb(var(--gray-400)); }

/* Palabras cambiadas */
.mod-cambios del { text-decoration: line-through; text-decoration-color: rgb(var(--danger-600)); background: rgba(var(--danger-500), .14); color: rgb(var(--danger-700)); border-radius: .2rem; padding: 0 .1rem; }
.mod-cambios ins { text-decoration: none; background: rgba(var(--success-500), .2); color: rgb(var(--success-800)); border-radius: .2rem; padding: 0 .1rem; }

/* Textos largos: recortados con "Ver más" */
.mod-texto { max-height: 6.5em; overflow: hidden; position: relative; }
.mod-texto-abierto { max-height: none; }
.mod-ver-mas { margin-top: .125rem; font-size: .75rem; font-weight: 600; color: rgb(var(--primary-600)); background: none; border: 0; padding: 0; cursor: pointer; }
.mod-ver-mas:hover { text-decoration: underline; }

/* ---------- Modo oscuro ---------- */
.dark .mod-elemento-titulo,
.dark .mod-cambios { color: rgb(var(--gray-100)); }
.dark .mod-elemento-meta,
.dark .mod-contexto,
.dark .mod-actual,
.dark .mod-tabla thead th { color: rgb(var(--gray-400)); }
.dark .mod-contexto-etiqueta,
.dark .mod-tabla tbody th { color: rgb(var(--gray-300)); }
.dark .mod-tabla th,
.dark .mod-tabla td { border-top-color: rgba(255, 255, 255, .1); }
.dark .mod-tabla thead th { border-top: 0; }
.dark .mod-solicitado { background: rgba(var(--success-500), .12); }
.dark .mod-cambios del { color: rgb(var(--danger-300)); background: rgba(var(--danger-500), .22); }
.dark .mod-cambios ins { color: rgb(var(--success-300)); background: rgba(var(--success-500), .25); }
.dark .mod-elemento-requiere { color: rgb(var(--warning-400)); }
.dark .mod-ver-mas { color: rgb(var(--primary-400)); }

/* ---------- Pantallas angostas: cada fila del diff se apila ---------- */
@media (max-width: 640px) {
    .mod-cambios { min-width: 0; }
    .mod-tabla, .mod-tabla tbody, .mod-tabla tr, .mod-tabla th, .mod-tabla td { display: block; width: 100%; }
    .mod-tabla thead, .mod-tabla colgroup { display: none; }
    .mod-tabla tr { border-top: 1px solid rgb(var(--gray-200)); padding: .375rem 0; }
    .mod-tabla th, .mod-tabla td { border-top: 0; padding: .25rem .75rem; }
    .mod-solicitado { border-left: 0; }
    .mod-num { text-align: left; }
    .mod-tabla td::before { content: attr(data-label) ": "; font-weight: 600; font-size: .6875rem; text-transform: uppercase; color: rgb(var(--gray-500)); }
}

/* ---------- Panel: sin "seleccionar grupo" ----------
 * El checkbox de cabecera de grupo (Filament) seleccionaría todo un ámbito, incluidas filas de solo lectura en otras
 * páginas; la selección se hace por fila o con "Incluir todas". Solo en la tabla que contiene el diff de Modificaciones. */
.fi-ta:has(.mod-cambios) .fi-ta-group-checkbox { display: none; }

/* ---------- Solicitud integral: paso "Revisar" del asistente y totales (§8.12) ---------- */
.si-revision { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.25rem; font-size: .875rem; }
@media (max-width: 900px) { .si-revision { grid-template-columns: 1fr; } }
.si-col { display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
.si-conteos { display: flex; flex-wrap: wrap; gap: .375rem; }
.si-pill { display: inline-flex; align-items: center; padding: .05rem .5rem; border-radius: 999px; font-size: .75rem; font-weight: 500; background: rgba(var(--gray-500), .1); color: rgb(var(--gray-700)); }
.si-arbol, .si-arbol ul { list-style: none; margin: 0; padding: 0; }
.si-arbol ul { padding-left: 1.1rem; margin-left: .45rem; border-left: 1px dashed rgb(var(--gray-300)); }
.si-arbol li { padding: .2rem 0; overflow-wrap: anywhere; }
.si-k { display: inline-block; min-width: 3.2rem; margin-right: .4rem; font-family: ui-monospace, Consolas, monospace; font-size: .7rem; color: rgb(var(--gray-500)); }
.si-titulo { margin: 0; font-weight: 600; }
.si-errores { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .25rem; color: rgb(var(--danger-600)); }
.si-ok-box { margin: 0; padding: .5rem .75rem; border-radius: .5rem; background: rgba(var(--success-500), .1); color: rgb(var(--success-700)); }
.si-nota { font-size: .8rem; color: rgb(var(--gray-500)); }
.si-total { display: inline-block; padding: .2rem .6rem; border-radius: .375rem; font-weight: 600; font-size: .85rem; }
.si-ok { background: rgba(var(--success-500), .12); color: rgb(var(--success-700)); }
.si-mal { background: rgba(var(--danger-500), .12); color: rgb(var(--danger-700)); }
.dark .si-pill { color: rgb(var(--gray-300)); }
.dark .si-arbol ul { border-left-color: rgba(255, 255, 255, .15); }
.dark .si-errores { color: rgb(var(--danger-400)); }
.dark .si-ok-box, .dark .si-ok { color: rgb(var(--success-400)); }
.dark .si-mal { color: rgb(var(--danger-400)); }

/* ---------- Escritorio: pestañas de la bandeja de Planeación y seguimiento por enviar (§12.8, D15) ---------- */
.mod-bandeja-pestanas { margin-bottom: 1rem; }
.mod-seguimiento-quien { font-size: .8125rem; color: rgb(var(--gray-500)); }
.dark .mod-seguimiento-quien { color: rgb(var(--gray-400)); }