/* ============================================================================
   seguimiento.css — Rediseño visual + responsive de la pestaña Seguimiento.
   Plan: .claude/doc/features/20260630_seguimiento-ui-redesign/
   Reutiliza los chips .meta-* de media/ficha-rtv.css (ya enlazado global en _Styles).
   Tokens de marca en base/variables.css.
   ============================================================================ */

/* ============================ INDICADORES ============================ */
.seg-indicator { background: #fff; border-radius: var(--border-radius-lg, .5rem); box-shadow: var(--shadow-sm, 0 .25rem .75rem rgba(0,0,0,.05)); padding: .85rem 1rem; display: flex; align-items: center; gap: .85rem; height: 100%; }
.seg-indicator .ico { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: #fff; flex-shrink: 0; }
.seg-indicator .ico.imp { background: var(--color-primary, #0b2a4a); }
.seg-indicator .ico.aud { background: var(--color-secondary, #21b2a3); }
.seg-indicator .ico.val { background: var(--color-accent, #F8A01E); }
.seg-indicator .num { font-size: 1.35rem; font-weight: 700; color: var(--color-primary, #0b2a4a); line-height: 1.1; word-break: break-word; }
.seg-indicator .cap { font-size: .72rem; color: var(--color-text-muted, #5f5f5e); text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 575.98px) { .seg-indicator .num { font-size: 1.1rem; } .seg-indicator { padding: .6rem .7rem; gap: .6rem; } .seg-indicator .ico { width: 36px; height: 36px; font-size: .95rem; } }
/* banda de fondo del bloque de datos globales: tinte primario suave para diferenciarlo de filtros y listado */
.seg-indicators-band { background: rgba(11, 42, 74, .05); border-radius: var(--border-radius-lg, .5rem); margin-left: .25rem; margin-right: .25rem; padding: .5rem .35rem .1rem; }

/* ============================ FILTROS ============================ */
/* La barra de filtros es el contenedor existente (.row.shadow-sm...) + clase seg-filter-bar. Tinte teal
   propio (los headers ya no llevan bg-light) para diferenciar el bloque de filtros del de datos globales
   (tinte primario) y del listado (tarjetas blancas). */
.seg-filter-bar { padding: .35rem .25rem; background: rgba(33, 178, 163, .07); border: 1px solid rgba(33, 178, 163, .25); }
/* etiqueta de cada faceta (el primer <small class="d-block"> de la columna) */
.seg-filter-bar .text-center > small.d-block:first-child,
.seg-filter-field .field-label {
    font-size: .7rem; font-weight: 600; color: var(--color-text-muted, #5f5f5e);
    text-transform: uppercase; letter-spacing: .02em;
    margin-bottom: .1rem; display: block; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.seg-filter-ico { color: var(--color-secondary, #21b2a3); margin-right: .3rem; font-size: .72rem; }
/* selectpicker / selects a ancho completo y compactos dentro de la barra */
.seg-filter-bar .bootstrap-select { width: 100% !important; }
.seg-filter-bar .bootstrap-select > .btn,
.seg-filter-bar select.form-control,
.seg-filter-bar select.form-control-sm { font-size: .8rem; border-radius: .375rem; }
.seg-filter-bar .form-control-sm.selectpicker { width: 100%; }
/* facetas más anchas y balanceadas: 4 por fila en desktop (antes 6 col-lg-2 → 6+2 desbalanceado y truncado) */
@media (min-width: 992px) {
    .seg-filter-bar .col-lg-10 > [class*="col-"] { flex: 0 0 25%; max-width: 25%; }
}

/* chips de filtros activos */
.seg-active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.seg-active-filters:empty { display: none; }
.seg-filter-chip { display: inline-flex; align-items: center; gap: .35rem; background: rgba(33,178,163,.1); color: var(--color-primary, #0b2a4a); border: 1px solid rgba(33,178,163,.35); border-radius: 1rem; padding: .12rem .6rem; font-size: .76rem; font-weight: 600; }
.seg-filter-chip i.tag-ico { color: var(--color-secondary, #21b2a3); }
.seg-filter-chip .x { cursor: pointer; color: #8a98a5; font-size: .7rem; margin-left: .1rem; }
.seg-filter-chip .x:hover { color: #e74c3c; }
.seg-filters-clear { font-size: .75rem; color: var(--color-text-muted, #5f5f5e); cursor: pointer; }
.seg-filters-clear:hover { color: #e74c3c; }

/* ============================ BARRA DE ACCIONES ============================ */
.seg-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.seg-search-pill { display: flex; align-items: center; background: #f1f4f6; border-radius: 1rem; padding: 0 .25rem 0 .75rem; }
.seg-search-pill input { border: 0; background: transparent; height: 32px; font-size: .82rem; outline: none; }

/* ============================ BARRA DE SELECCIÓN ============================ */
/* Toolbar sobre el listado (_SeguimientoFiltro + _SeguimientoFiltroClient): a la izquierda el check
   "seleccionar todos" + el dropdown de acciones en lote; a la derecha grupo/cliente + buscador + orden +
   paginación. En desktop (>=lg) se mantiene igual: las dos mitades en una fila y los controles alineados a la
   derecha. En <lg las mitades apilan a ancho completo (col-12) y el interior fluye con wrap sin cortarse.
   En móvil el dropdown de acciones deja de depender de :hover (los submenús se expanden en bloque para que
   sean accesibles al tap, ya que el layout original abría los submenús a left:100% solo en hover). */
.seg-selection-bar { row-gap: .4rem; }
.seg-sel-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.seg-sel-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; }
@media (min-width: 992px) {
    .seg-sel-controls { justify-content: flex-end; }
}

/* ----- Estilo de marca: alinear la barra con el resto del rediseño reutilizando los MISMOS tokens que
   .seg-filter-bar / .seg-search-pill / .seg-filter-chip (labels muted, selects compactos, chip de acciones
   teal, buscador gris píldora, iconos de orden muted→teal). Sin tocar markup: todo scopeado a la barra. ----- */
/* etiquetas de los selects (grupo / cliente / carpeta) → mayúscula muted como las facetas de filtros */
.seg-selection-bar .seg-sel-controls .form-inline > small {
    font-size: .7rem; font-weight: 600; color: var(--color-text-muted, #5f5f5e);
    text-transform: uppercase; letter-spacing: .02em; white-space: nowrap;
}
/* selects con el mismo radio/tipografía compactos que la barra de filtros */
.seg-selection-bar .seg-sel-controls .bootstrap-select > .btn,
.seg-selection-bar .seg-sel-controls select.form-control { font-size: .8rem; border-radius: .375rem; }
/* botón de acciones en lote → tinte teal idéntico a .seg-filter-chip (antes btn-light gris) + badge de marca */
.seg-selection-bar .dropdown > .dropdown-toggle.btn-light {
    background: rgba(33,178,163,.1); border: 1px solid rgba(33,178,163,.35);
    color: var(--color-primary, #0b2a4a); font-weight: 600;
}
.seg-selection-bar .dropdown > .dropdown-toggle.btn-light:hover,
.seg-selection-bar .dropdown.show > .dropdown-toggle.btn-light { background: rgba(33,178,163,.18); }
.seg-selection-bar .dropdown-toggle .badge-info { background: var(--color-secondary, #21b2a3); color: #fff; }
/* buscador → mismo gris de píldora que .seg-search-pill + lupa en teal de marca */
.seg-selection-bar .rounded-pill.bg-light,
.seg-selection-bar .rounded-pill .form-control.bg-light { background: #f1f4f6 !important; }
.seg-selection-bar .rounded-pill .btn-link { color: var(--color-secondary, #21b2a3) !important; }
/* iconos de orden → muted en reposo, teal al hover (el custom ya lo pone teal por JS) */
.seg-selection-bar #sortDown, .seg-selection-bar #sortUp { color: var(--color-text-muted, #5f5f5e); }
.seg-selection-bar #sortDown:hover, .seg-selection-bar #sortUp:hover { color: var(--color-secondary, #21b2a3); }

/* ----- <lg: mitades apiladas (grid col-12) → afinamos el interior de los controles ----- */
@media (max-width: 991.98px) {
    .seg-sel-controls { justify-content: flex-start; }
    .seg-sel-controls > .col-auto { padding-left: 0; padding-right: 0; }
    /* selects (grupo/cliente/carpeta/orden/paginación) a ancho completo y legibles */
    .seg-sel-controls .form-inline { width: 100%; flex-wrap: nowrap; }
    .seg-sel-controls .form-inline small { white-space: nowrap; margin-right: .4rem; }
    .seg-sel-controls .form-inline .bootstrap-select,
    .seg-sel-controls .form-inline > select,
    .seg-sel-controls > .col-auto > select { flex: 1 1 auto; width: 100% !important; min-width: 0; }
    /* buscador a ancho completo */
    .seg-sel-controls .rounded-pill { width: 100%; }
    .seg-sel-controls .rounded-pill .input-group { width: 100%; }

    /* dropdown de acciones: los submenús se expanden en bloque (accesibles sin hover) y el menú hace scroll */
    .seg-selection-bar .dropdown-menu { max-height: 75vh; overflow-y: auto; }
    .seg-selection-bar .dropdown-submenu > .dropdown-menu {
        position: static; float: none; display: block;
        left: auto; top: auto; margin: .1rem 0 .3rem 1rem;
        border: 0; box-shadow: none; border-radius: 0; max-height: none;
    }
    .seg-selection-bar .dropdown-submenu > a { font-weight: 600; }
}

/* ============================ FILA DE NOTICIA ============================ */
/* La TARJETA es el <li class="boxes-inner-item ..."> existente; .seg-row es solo el layout interno
   (evita la "tarjeta sobre tarjeta"). */
ul.boxes-external-items { padding-left: 0; list-style: none; }
li.boxes-inner-item { border-left: 3px solid transparent; transition: box-shadow .15s ease, border-color .15s ease; overflow: hidden; }
li.boxes-inner-item:hover { border-left-color: var(--color-secondary, #21b2a3); box-shadow: 0 .35rem 1rem rgba(0,0,0,.1) !important; }
/* el <div class="row"><div class="col-12"> que envuelve cada _Reg* mete gutters negativos que desbordan
   el card en pantallas estrechas → neutralizarlos dentro del item */
li.boxes-inner-item > .row { margin-left: 0; margin-right: 0; }
li.boxes-inner-item > .row > .col-12 { padding-left: 0; padding-right: 0; }

.seg-row .seg-grid { display: flex; align-items: stretch; gap: .6rem; min-width: 0; }
/* checkbox centrado verticalmente en la tarjeta */
.seg-row .seg-check { flex: 0 0 auto; align-self: center; display: flex; align-items: center; }
.seg-row .seg-check .handle { display: none; } /* el grip de "mover" era falso (no hay drag real) → oculto */
/* clic en la tarjeta = seleccionar → toda la tarjeta con cursor pointer (incl. título, enlaces y texto);
   solo los campos de texto editables muestran el cursor de texto */
.seg-row { cursor: pointer; position: relative; }

/* Sello CEDRO (solo Reajuste): esquina superior derecha de la tarjeta, visible de un vistazo.
   La clase NO empieza por "cedro-" a propósito: cedro-counter.js selecciona [class*="cedro-"]. */
.seg-row .copyright-flag { position: absolute; top: .3rem; left: .45rem; z-index: 2; color: var(--color-accent, #F8A01E); font-size: 1.35rem; line-height: 1; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.seg-row input[type="text"], .seg-row input[type="number"], .seg-row textarea { cursor: text; }
/* cuerpo como columna flex para poder subir la barra de metadatos sobre el título (order) */
.seg-row .seg-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.seg-row .seg-body .meta-row { order: -1; margin-bottom: .3rem; }
/* sub-línea: detalle (audiencia/VPE/orden) + valoración en la MISMA fila, a la derecha de Orden */
.seg-row .seg-subline { display: flex; align-items: center; flex-wrap: wrap; gap: .15rem .6rem; margin-top: .1rem; }
.seg-row .seg-subline .seg-detailsub { margin: 0; line-height: 1.2; }
.seg-row .seg-subline .seg-sub-ico, .seg-row .seg-detailsub .seg-sub-ico { color: var(--color-secondary, #21b2a3); margin-right: .2rem; font-size: .72rem; }
.seg-row .seg-subline .modal { display: none !important; } /* editAutorModal de _RegDetailSub: fuera del flujo flex */
/* valoración (sentimiento) INLINE a la derecha de Orden: el <div col> de Krajee mide 48px (rating-container
   18px + input residual + margen del tema) → lo colapsamos a inline-flex de la altura del rating y centrado,
   para que quede a la misma altura que la línea de Audiencia/VPE/Orden. */
.seg-row .seg-subline [class*="col-"] { padding: 0 !important; margin: 0 !important; width: auto !important; max-width: none !important; flex: 0 0 auto !important; display: inline-flex !important; align-items: center; height: auto !important; }
.seg-row .seg-subline [class*="col-"] > input { display: none !important; } /* input residual del rating */
.seg-row .seg-subline .rating-container { display: inline-flex !important; align-items: center; line-height: 1; margin: 0 !important; padding: 0 !important; }
.seg-row .seg-subline .seg-rating-ico { display: none; } /* la cara fa-smile no casa con el widget de estrellas → oculta */
/* checkbox "publicar en Zona Viewer" (dircom): inline a la derecha del sentimiento */
.seg-row .seg-subline .zonaViewer { display: inline-flex; align-items: center; gap: .25rem; margin: 0; }
.seg-row .seg-subline .zonaViewer input[type="checkbox"] { margin: 0; vertical-align: middle; cursor: pointer; }
.seg-row .seg-subline .zonaViewer .fa-eye { color: var(--color-secondary, #21b2a3); }
/* aside: miniatura arriba (línea propia); acciones + BORRAR abajo en HORIZONTAL (izq→der), borrar separado */
.seg-row .seg-aside { flex: 0 0 auto; width: 100px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.seg-row .seg-aside .seg-thumb { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; }
/* wrap: en carpetas conviven quitar-de-carpeta + borrar con las acciones; si no caben en los 100px del
   aside, el bloque de borrado salta entero a una segunda línea centrada (nunca icono sobre icono). */
.seg-row .seg-aside .seg-aside-foot { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .35rem; }
.seg-row .seg-aside .seg-aside-foot .row-actions { display: inline-flex; align-items: center; gap: .15rem; }
.seg-row .seg-aside .seg-aside-foot .seg-delete { margin: 0; padding-left: .4rem; border-left: 1px solid #e0e4e8; display: inline-flex; align-items: center; gap: .15rem; white-space: nowrap; }
.seg-row .seg-aside .seg-aside-foot .seg-delete a { color: #9aa3ad; }
.seg-row .seg-aside .seg-aside-foot .seg-delete a:hover { color: var(--color-secondary, #21b2a3); }

/* badge de tipo de medio FLOTADA a la izquierda: el titular fluye a su derecha en la 1ª línea y las
   líneas siguientes recuperan el margen izquierdo (debajo de la badge), estilo prensa. overflow:hidden
   crea un BFC que contiene el float → el OCR/siguiente bloque empieza limpio a ancho completo. */
.seg-row .seg-titleline { display: block; overflow: hidden; margin-bottom: .15rem; }
.seg-row .seg-titleline > .type-badge { float: left; margin-right: .4rem; margin-top: .1rem; }
/* título + lápiz en flujo inline → el lápiz queda tras la última palabra y el texto envuelve bajo la badge */
.seg-row .seg-titleline > .seg-titlewrap { display: inline; }
.seg-row .seg-titleline > .seg-titlewrap > b { display: inline; }
.seg-row .seg-titleline .edit-inline { white-space: nowrap; }
.seg-row .news-title, .seg-row .txtseguimiento01 { color: var(--color-primary, #0b2a4a); font-weight: 700; font-size: .98rem; text-decoration: none; overflow-wrap: anywhere; }
.seg-row .news-title:hover, .seg-row .txtseguimiento01:hover { color: var(--color-secondary, #21b2a3); }
.seg-row .seg-ocr { font-size: .82rem; color: #56616b; margin-bottom: .2rem; overflow-wrap: anywhere; }
.seg-row .seg-ocr a { color: inherit; }
.seg-row .seg-detailsub { display: block; margin-top: .25rem; }

/* chips de metadatos: variante compacta para el listado */
.seg-row .meta-row--compact { font-size: .75rem; gap: .2rem .5rem; }

/* edición inline (un lápiz por campo editable: título, OCR/texto, tema) */
.seg-row .edit-inline { color: #c2c9d0; font-size: .72rem; margin-left: .25rem; cursor: pointer; }
.seg-row .edit-inline:hover { color: var(--color-secondary, #21b2a3); }
.seg-row .editTit, .seg-row .editTema, .seg-row .addCatalogacionJs { color: #c2c9d0; font-size: .8rem; margin-left: .25rem; }
.seg-row .editTit:hover, .seg-row .editTema:hover, .seg-row .addCatalogacionJs:hover { color: var(--color-secondary, #21b2a3); }

/* tipo de medio */
.seg-row .type-badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: .1rem .5rem; border-radius: 1rem; color: #fff; }
.seg-row .type-prensa { background: #0b6e99; }
.seg-row .type-digital { background: #6f42c1; }
.seg-row .type-tv { background: var(--color-accent, #F8A01E); }
.seg-row .type-radio { background: #16a085; }
.seg-row .type-redes { background: #d35400; }

/* miniatura */
.seg-row .seg-aside img.img-thumbnail, .seg-row .news-thumb { max-width: 100%; max-height: 100%; width: auto; height: auto; border: 1px solid #e6e9ec; border-radius: .375rem; object-fit: contain; }
.seg-row .seg-aside .seg-thumb > a { display: flex; align-items: center; justify-content: center; max-height: 100%; }
/* miniatura de prensa: un poco más pequeña que el alto completo de la tarjeta */
.seg-row .seg-thumb--prensa img.img-thumbnail, .seg-row .seg-thumb--prensa .news-thumb { max-height: 96px; }
.seg-row .seg-aside .row-actions a { color: #9aa3ad; margin: 0 .25rem; padding: .1rem .15rem; font-size: .9rem; }
.seg-row .seg-aside .row-actions a:hover { color: var(--color-secondary, #21b2a3); }
/* Los iconos .icon-file traen color propio (typography.css) que ignora el hover del enlace: heredar
   del <a> para que TODO el área del enlace encienda el icono. Con muchos iconos pequeños, acertar el
   glifo exacto era una lotería y parecía que "no se iluminaba" antes de abrir. */
.seg-row .seg-aside .row-actions a i,
.seg-row .seg-aside .seg-aside-foot .seg-delete a i { color: inherit; }

/* ---- catalogaciones: fila propia debajo de los metadatos (pueden ser varias) ---- */
/* catalogaciones = footer al fondo de la tarjeta (fuera del seg-grid, ancho completo, separado por borde) */
.seg-row > .catalog-row, .seg-row .catalog-row { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: .45rem 0 0; padding-top: .4rem; border-top: 1px solid #eef0f2; }
.seg-row .catalog-row .cat-label { font-size: .68rem; color: #9aa3ad; text-transform: uppercase; letter-spacing: .04em; margin-right: .15rem; }
.seg-row .cat-badge { display: inline-flex; align-items: center; justify-content: center; line-height: 1; vertical-align: middle; font-size: .7rem; font-weight: 600; padding: .25rem .6rem; border-radius: 1rem; border: 1px solid currentColor; background: rgba(0,0,0,.02); }

/* ============================ RESPONSIVE ============================ */
@media (max-width: 575.98px) {
    .seg-row .seg-grid { gap: .4rem; }
    .seg-row .seg-aside { width: 56px; }
    .seg-row .seg-aside .row-actions a { font-size: .8rem; margin: 0 .15rem; }
    .pagination-container .row > [class^="col-"] { text-align: center !important; }
    .pagination-container .pagination { justify-content: center; flex-wrap: wrap; }
}

/* ============================ MODALES DE SEGUIMIENTO ============================ */
.seg-modal .modal-content { border: none; border-radius: var(--border-radius-lg, .5rem); overflow: hidden; box-shadow: 0 .5rem 1.5rem rgba(11,42,74,.25); }
.seg-modal .modal-header { background: var(--color-primary, #0b2a4a); color: #fff; border-bottom: none; align-items: center; justify-content: space-between; padding: .7rem 1rem; }
.seg-modal .modal-header .modal-title { color: #fff; font-size: 1rem; font-weight: 600; display: flex; align-items: center; gap: .45rem; margin: 0; }
.seg-modal .modal-header .modal-title .seg-modal-ico { opacity: .85; font-size: .95rem; }
.seg-modal .modal-header .close { color: #fff; opacity: .8; text-shadow: none; font-weight: 400; margin: 0; padding: .25rem .5rem; }
.seg-modal .modal-header .close:hover { opacity: 1; color: #fff; }
.seg-modal .modal-body { padding: 1rem 1.15rem; }
.seg-modal .modal-body > label, .seg-modal .modal-body .form-group > label { font-weight: 600; color: var(--color-primary, #0b2a4a); font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; margin-bottom: .25rem; }
.seg-modal .modal-footer { border-top: 1px solid #eef0f2; padding: .6rem 1rem; }
.seg-modal .btn-primary { background-color: var(--color-secondary, #21b2a3); border-color: var(--color-secondary, #21b2a3); }
.seg-modal .btn-primary:hover, .seg-modal .btn-primary:focus { background-color: var(--color-primary, #0b2a4a); border-color: var(--color-primary, #0b2a4a); }
.seg-modal .btn-default { background-color: #eef0f2; border-color: #e0e4e8; color: var(--color-primary, #0b2a4a); }
.seg-modal .btn-default:hover { background-color: #e0e4e8; }