/* ==========================================================================
   listas-ui.css — componentes compartidos de las pantallas de listado
   (entradas, odp_lista).
   Extraido de entradas.php el 20260730-190214. Antes vivia en un <style> dentro de
   esa pagina; al necesitarlo tambien odp_lista, una segunda copia habria
   divergido a la primera prisa.
   Todos los selectores estan acotados a estas pantallas salvo .btn-ghost,
   .btn-mini y .btn-rotulo, que son clases nuevas y no chocan con nada.
   ========================================================================== */

/* ══ barra de filtros ══════════════════════════════════════ */
/* Sin caja: la barra se distingue por posicion y por el filete de
   la barra de seccion que va debajo. */
.entradas-toolbar{ padding:0; background:none; border:0; }

/* Escalon por debajo de btn-sm. Se define con las variables de
   Bootstrap 5.3 para que sirva con cualquier variante de color y
   se pueda reutilizar fuera de esta pantalla. */
.btn-mini,
.btn-group-mini > .btn{
  --bs-btn-padding-y:.15rem;
  --bs-btn-padding-x:.42rem;
  --bs-btn-font-size:.7rem;
  --bs-btn-border-radius:.28rem;
  line-height:1.35;
}
.btn-mini .badge,
.btn-group-mini > .btn .badge{ font-size:.6rem; padding:.2em .38em; }

/* Boton fantasma: gris y sin borde en reposo, relleno solido
   y oscuro al apuntar.

   Se declara con propiedades explicitas y no solo con las variables
   de Bootstrap, para no depender de que ningun otro archivo pise
   --bs-btn-hover-bg. Y SIN transicion a proposito: al desvanecerse
   entre transparente y el relleno hay fotogramas con el texto ya
   claro sobre un fondo aun claro, ilegibles. El cambio instantaneo
   no tiene estado intermedio.

   Todos los rellenos pasan de 6.4:1 con texto blanco. */
.btn-ghost{
  color:#475467;
  background-color:transparent;
  border-color:transparent;
  transition:none;
  --bs-btn-color:#475467;
  --bs-btn-bg:transparent;
  --bs-btn-border-color:transparent;
  --bs-btn-hover-color:#fff;
  --bs-btn-hover-bg:#344054;
  --bs-btn-hover-border-color:#344054;
  --bs-btn-active-color:#fff;
  --bs-btn-active-bg:#1d2939;
  --bs-btn-active-border-color:#1d2939;
  --bs-btn-focus-shadow-rgb:52,64,84;
}
.btn-ghost:hover,
.btn-ghost:focus-visible,
.btn-ghost:active{
  color:#fff;
  background-color:#344054;
  border-color:#344054;
}
.btn-ghost.btn-g-azul:hover,
.btn-ghost.btn-g-azul:focus-visible,
.btn-ghost.btn-g-azul:active{ background-color:#0a58ca; border-color:#0a58ca; }
.btn-ghost.btn-g-verde:hover,
.btn-ghost.btn-g-verde:focus-visible,
.btn-ghost.btn-g-verde:active{ background-color:#146c43; border-color:#146c43; }
.btn-ghost.btn-g-ambar:hover,
.btn-ghost.btn-g-ambar:focus-visible,
.btn-ghost.btn-g-ambar:active{ background-color:#6b4700; border-color:#6b4700; }
.btn-ghost.btn-g-rojo:hover,
.btn-ghost.btn-g-rojo:focus-visible,
.btn-ghost.btn-g-rojo:active{ background-color:#8c1b26; border-color:#8c1b26; }
.btn-ghost.btn-g-azul{ --bs-btn-hover-bg:#0a58ca; --bs-btn-hover-border-color:#0a58ca; --bs-btn-focus-shadow-rgb:10,88,202; }
.btn-ghost.btn-g-verde{ --bs-btn-hover-bg:#146c43; --bs-btn-hover-border-color:#146c43; --bs-btn-focus-shadow-rgb:20,108,67; }
.btn-ghost.btn-g-ambar{ --bs-btn-hover-bg:#6b4700; --bs-btn-hover-border-color:#6b4700; --bs-btn-focus-shadow-rgb:107,71,0; }
.btn-ghost.btn-g-rojo{ --bs-btn-hover-bg:#8c1b26; --bs-btn-hover-border-color:#8c1b26; --bs-btn-focus-shadow-rgb:140,27,38; }

/* El icono y el rotulo deben heredar el blanco del relleno. */
.btn-ghost:hover,
.btn-ghost:hover .bi,
.btn-ghost:hover .btn-txt,
.btn-ghost:focus-visible,
.btn-ghost:focus-visible .bi,
.btn-ghost:focus-visible .btn-txt{ color:#fff; }

/* Los contadores, sobre el relleno, en blanco translucido: un badge
   de color chillon encima del solido se ve roto. */
.btn-ghost:hover .badge,
.btn-ghost:focus-visible .badge{
  background-color:rgba(255,255,255,.22) !important; color:#fff !important;
}

/* Rotulo plegado que se despliega al apuntar. max-width en lugar de
   display:none: el texto sigue en el arbol de accesibilidad, asi que
   un lector de pantalla anuncia el boton por su nombre completo. */
.btn-rotulo{ display:inline-flex; align-items:center; }
.btn-rotulo .btn-txt{
  display:inline-block; max-width:0; overflow:hidden;
  white-space:nowrap; opacity:0; margin-left:0;
  transition:max-width .18s cubic-bezier(.2,.7,.3,1),
             opacity .14s ease, margin-left .18s ease;
}
.btn-rotulo:hover .btn-txt,
.btn-rotulo:focus-visible .btn-txt{ max-width:9rem; opacity:1; margin-left:.3rem; }

.entradas-toolbar .et-fila{
  display:flex; flex-wrap:wrap; align-items:center; gap:.3rem .45rem;
}
/* Un solo alto para todo lo que hay en la barra. Antes los botones
   median 1.9 rem y la lupa y las fechas 2 rem: bastaba para que se
   vieran desalineados entre si. 2 rem = 32 px, que ademas es el
   area de pulsacion minima. */
.entradas-toolbar .btn,
.entradas-toolbar .et-lupa,
.entradas-toolbar .et-fechas{
  min-height:2rem; height:2rem;
  display:inline-flex; align-items:center; justify-content:center;
  white-space:nowrap; box-sizing:border-box;
}
.entradas-toolbar .form-control-sm{ font-size:.72rem; padding:.1rem .35rem; }

/* Buscador plegable.
   UNA sola caja con borde, y dentro el boton y el campo sin borde
   propio. Antes eran dos cajas bordeadas que intentaban pegarse por
   el canto: cualquier diferencia de alto o de radio dejaba un
   escalon visible. Asi no hay nada que alinear. */
.et-buscar{
  display:flex; align-items:center;
  height:2rem; box-sizing:border-box; overflow:hidden;
  background:var(--bs-body-bg,#fff);
  border:1px solid var(--bs-border-color,#dee2e6);
  border-radius:.3rem;
}
.et-lupa{
  height:100%; min-width:2.4rem; padding:0 .7rem; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.82rem; line-height:1; cursor:pointer;
  color:var(--bs-secondary-color,#6c757d);
  background:none; border:0; border-radius:0;
}
.et-lupa:hover{ color:var(--bs-emphasis-color,#212529); background:var(--bs-secondary-bg,#e9ecef); }
.et-input{
  width:0; min-width:0; padding:0; margin:0; border:0;
  height:100%; box-sizing:border-box; font-size:.72rem;
  background:none; color:inherit;
  transition:width .18s ease;
}
/* Plegado no debe recibir el tabulador: seria un campo invisible. */
.et-buscar:not(.abierto) .et-input{ visibility:hidden; }
.et-buscar.abierto .et-input{
  width:13rem; visibility:visible; padding:0 .5rem 0 .1rem;
}
.et-input:focus{ outline:0; box-shadow:none; }
/* El foco se dibuja en el conjunto: los campos van sin borde propio
   y sin esto no habia ninguna senal al tabular. */
.et-buscar:focus-within,
.et-fechas:focus-within{
  outline:2px solid var(--bs-primary,#0d6efd); outline-offset:1px;
}

/* Fechas: solo el icono identifica el rango */
.et-fechas{
  display:flex; align-items:center; gap:.15rem;
  padding:0 .3rem; height:2rem; box-sizing:border-box; overflow:hidden;
  background:var(--bs-body-bg,#fff);
  border:1px solid var(--bs-border-color,#dee2e6);
  border-radius:.3rem;
}
.et-fechas .form-control-sm{
  border:0; background:transparent; width:7rem;
  padding:0 .1rem; height:100%; line-height:1; border-radius:0;
}
/* El indicador nativo viene a tamano de texto normal y desequilibra
   la caja; ademas es lo unico que abre el selector, asi que se
   achica pero no se oculta. */
.et-fechas input[type="date"]::-webkit-calendar-picker-indicator{
  padding:0; margin:0; opacity:.55; cursor:pointer;
  width:.85rem; height:.85rem;
}
.et-fechas input[type="date"]:hover::-webkit-calendar-picker-indicator{ opacity:1; }
.et-fechas .form-control-sm:focus{ box-shadow:none; outline:0; }
.et-a{ color:var(--bs-secondary-color,#adb5bd); font-size:.75rem; }

.entradas-toolbar .et-grupo{ display:flex; flex-wrap:wrap; gap:.25rem; }
.entradas-toolbar .et-grupo--fin{ margin-left:auto; flex-wrap:nowrap; }
.entradas-toolbar .et-sep{
  width:1px; height:1.4rem; margin:0 .1rem;
  background:var(--bs-border-color,#dee2e6);
}
@media (max-width:1199.98px){
  .entradas-toolbar .et-sep{ display:none; }
  .entradas-toolbar .et-grupo--fin{ margin-left:0; }
}

/* ══ barra de seccion ══════════════════════════════════════ */
.entradas-barra{
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:.4rem .7rem;
  padding:.3rem .1rem .4rem;
  border-bottom:1px solid var(--bs-border-color,#dee2e6);
  margin-bottom:.5rem;
}
.entradas-barra .eb-izq{ display:flex; align-items:baseline; gap:.45rem; flex-wrap:wrap; }
.entradas-barra .eb-titulo{
  font-size:.95rem; font-weight:700; margin:0; line-height:1.2;
  color:var(--bs-emphasis-color,#212529);
}
.entradas-barra .eb-conteo{ font-size:.75rem; color:#667085; font-variant-numeric:tabular-nums; }
.entradas-barra .eb-der{ display:flex; flex-wrap:wrap; align-items:center; gap:.35rem .5rem; }
.entradas-barra .eb-der label{ font-size:.72rem; color:#667085; white-space:nowrap; }
.entradas-barra .form-select-sm{
  width:auto; min-width:3.9rem; font-size:.75rem;
  padding:.12rem 1.5rem .12rem .4rem; height:2rem; color:#344054;
}

/* Paginador en gris neutro: el azul de enlace competia con los
   enlaces reales de la lista. */
.entradas-barra .pagination{
  --bs-pagination-padding-x:.45rem;
  --bs-pagination-padding-y:.12rem;
  --bs-pagination-font-size:.76rem;
  --bs-pagination-color:#475467;
  --bs-pagination-bg:transparent;
  --bs-pagination-border-color:transparent;
  --bs-pagination-border-radius:.3rem;
  --bs-pagination-hover-color:#101828;
  --bs-pagination-hover-bg:var(--bs-secondary-bg,#e9ecef);
  --bs-pagination-hover-border-color:transparent;
  --bs-pagination-focus-color:#101828;
  --bs-pagination-focus-bg:var(--bs-secondary-bg,#e9ecef);
  --bs-pagination-focus-box-shadow:none;
  --bs-pagination-active-color:#fff;
  --bs-pagination-active-bg:#344054;
  --bs-pagination-active-border-color:#344054;
  --bs-pagination-disabled-color:#b0b7c3;
  --bs-pagination-disabled-bg:transparent;
  --bs-pagination-disabled-border-color:transparent;
  gap:.1rem;
}
/* 32 px de area de pulsacion sin tocar el tamano de la letra. */
.entradas-barra .page-link{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:2rem; min-height:2rem;
  border-radius:.3rem; font-variant-numeric:tabular-nums; font-weight:500;
  transition:background-color .12s ease, color .12s ease;
}
.entradas-barra .page-item.active .page-link{ font-weight:600; }

/* ══ lista de tarjetas ═════════════════════════════════════ */
.entradas-lista{ display:flex; flex-direction:column; gap:.45rem; }

.entrada-card{
  position:relative;
  display:grid;
  grid-template-columns:minmax(7rem,9rem) minmax(0,1fr) 7.5rem auto;
  gap:.5rem .9rem;
  align-items:start;
  padding:.6rem .75rem;
  font-size:.76rem;
  background:var(--bs-body-bg,#fff);
  border:1px solid var(--bs-border-color,#dee2e6);
  border-radius:.5rem;
  transition:transform .18s cubic-bezier(.2,.7,.3,1),
             box-shadow .18s ease,
             background-color .14s ease;
}

/* Hover: el borde NO cambia de color. La senal la dan el tinte de
   fondo, la elevacion y la marca lateral; un borde oscuro anadia
   ruido en una lista de 50 filas. */
.entrada-card:hover,
.entrada-card:focus-within{
  transform:translateY(-2px);
  background:var(--bs-tertiary-bg,#f7f8fa);
  box-shadow:0 2px 4px rgba(16,24,40,.06),
             0 12px 24px -6px rgba(16,24,40,.16);
  z-index:2;
}
.entrada-card:active{
  transform:translateY(0);
  box-shadow:0 1px 2px rgba(16,24,40,.08);
  transition-duration:.06s;
}

/* Marca lateral: crece desde el centro al apuntar. Pseudoelemento y
   no border-left, porque 3 px de borde empujarian el contenido. */
.entrada-card::before{
  content:''; position:absolute; left:-1px; top:-1px; bottom:-1px;
  width:3px; border-radius:.5rem 0 0 .5rem;
  background:var(--bs-primary,#0d6efd);
  opacity:0; transform:scaleY(.3); transform-origin:center;
  transition:transform .2s cubic-bezier(.2,.7,.3,1), opacity .14s ease;
}
.entrada-card:hover::before,
.entrada-card:focus-within::before{ opacity:1; transform:scaleY(1); }

/* El filete de aviso se ve siempre y sobrevive al hover: antes
   .entrada-card:hover ganaba en especificidad a --aviso y la marca
   desaparecia en la tarjeta que la necesita. #b45309 en lugar de
   #f0a202: 1.9:1 no llega al 3:1 exigido a un indicador grafico. */
.entrada-card--aviso::before{ background:#b45309; opacity:1; transform:scaleY(1); }

.entrada-card .ec-acciones .btn{ transition:color .14s ease, background-color .14s ease; }
/* Al apuntar la fila los botones se destacan sobre el tinte, pero
   sin rellenarse: el relleno se reserva para el boton concreto que
   se va a pulsar, si no toda la fila parece activa. */
.entrada-card:hover .ec-acciones .btn-ghost,
.entrada-card:focus-within .ec-acciones .btn-ghost{
  color:#101828; background:#eceef1;
}
.entrada-card .ec-acciones .btn-ghost:hover,
.entrada-card .ec-acciones .btn-ghost:focus-visible{
  color:var(--bs-btn-hover-color); background:var(--bs-btn-hover-bg);
}

/* ── columnas ── */
.entrada-card .ec-col{ min-width:0; }
/* Solo Victima llevaba mt-1: las cuatro columnas arrancaban a
   alturas distintas. */
.entrada-card .ec-col > *:first-child{ margin-top:0; }
.entrada-card .ec-cuerpo{ position:relative; }
.entrada-card--aviso .ec-cuerpo{ padding-right:1.4rem; }
.entrada-card .ec-vence,
.entrada-card .ec-acciones{
  padding-left:.8rem;
  border-left:1px solid var(--bs-border-color-translucent,rgba(0,0,0,.075));
}
.entrada-card .ec-acciones{ display:flex; justify-content:flex-end; }
.entrada-card .ec-vence{ transition:color .14s ease; }
/* Es el dato por el que se prioriza el trabajo, pero se pintaba mas
   flojo que el folio. */
.entrada-card .ec-vence > .text-nowrap{
  font-weight:600; color:#101828; font-variant-numeric:tabular-nums;
}

.entrada-card .text-tip{
  font-size:.6rem; font-weight:600; letter-spacing:.03em;
  text-transform:uppercase; line-height:1.2;
}
/* El detalle es texto descriptivo, no un dato de busqueda. */
.entrada-card .ec-detalle{
  font-size:.7rem; line-height:1.4; margin-top:.15rem;
  /* #6c757d daba 4.41:1 sobre el tinte del hover, por debajo del
     4.5:1. Este llega a 4.9:1 en ambos fondos. */
  color:#5c636a;
}
.entrada-card .badge{ font-size:.63rem; padding:.26em .45em; font-weight:500; }
/* Los nombres de dependencia son largos y .badge hereda nowrap: sin
   esto la etiqueta desbordaba sobre la columna de vencimiento. */
.entrada-card .turnados-wrap .badge{ font-size:.6rem; white-space:normal; text-align:left; }
.entrada-card .stack-badges{ display:flex; flex-wrap:wrap; gap:.25rem; }
.entrada-card .btn-group{ flex-wrap:nowrap; }
/* 32 px de area de pulsacion sin agrandar la letra. */
.entrada-card .ec-acciones .btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:2rem; min-width:2rem;
}

@media (max-width:991.98px){
  .entrada-card{ grid-template-columns:minmax(0,1fr); }
  .entrada-card .ec-vence,
  .entrada-card .ec-acciones{
    padding-left:0; border-left:0;
    border-top:1px solid var(--bs-border-color-translucent,rgba(0,0,0,.075));
    padding-top:.45rem;
  }
}

@media (prefers-reduced-motion: reduce){
  .entrada-card,
  .entrada-card::before,
  .entrada-card .ec-acciones .btn,
  .entrada-card .ec-vence,
  .btn-rotulo .btn-txt{ transition:none; }
  .entrada-card:hover,
  .entrada-card:focus-within{ transform:none; }
  .entrada-card::before{ transform:scaleY(1); }
}

/* ══ aviso de informacion incompleta ═══════════════════════ */
.entrada-aviso{
  position:absolute; top:0; right:0; z-index:5;
  display:inline-flex; align-items:center;
  color:#b45309; font-size:.95rem; line-height:1; cursor:help;
  border-radius:50%;
}
.entrada-aviso:focus-visible{ outline:2px solid #b45309; outline-offset:2px; }
.entrada-aviso::after{
  content:attr(data-aviso);
  position:absolute; top:calc(100% + .35rem); right:0;
  width:max-content; max-width:15rem;
  padding:.35rem .5rem;
  background:#1f2937; color:#fff;
  font-size:.72rem; font-weight:400; line-height:1.35;
  text-transform:none; letter-spacing:normal;
  border-radius:.35rem; box-shadow:0 4px 12px rgba(16,24,40,.18);
  opacity:0; visibility:hidden; transition:opacity .12s ease;
  z-index:30; pointer-events:none;
}
.entrada-aviso:hover::after,
.entrada-aviso:focus-visible::after{ opacity:1; visibility:visible; }

.entrada-vacio{
  border:1px dashed var(--bs-border-color,#dee2e6);
  border-radius:.5rem;
}


/* ==========================================================================
   odp_lista — segunda fila de filtros y compactado de la tabla
   ========================================================================== */

/* Fila de "Mas filtros": mismo ritmo que la principal, con un filete arriba
   para que se lea como una extension y no como otra barra. */


.et-nota{
  font-size:.68rem; color:#5c636a; align-self:center; margin-left:.15rem;
}



/* Relleno de la pantalla: p-4 en el <section> mas p-3 en cada bloque sumaban
   casi 60 px de aire antes del primer dato. */
.seccion.seccion--lista{ padding:.75rem 1rem 1rem !important; }
.seccion--lista .card-footer{ padding:.5rem .25rem; background:transparent; border-top:1px solid var(--bs-border-color,#dee2e6); }


/* ==========================================================================
   Panel de filtros en rejilla — odp_lista
   ========================================================================== */

/* Columnas de anchura identica que se reparten el ancho disponible. Con nueve
   campos y cinco columnas caen en dos filas; en pantallas estrechas la propia
   rejilla decide cuantas caben, sin media queries que adivinen tamanos. */
.et-rejilla{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:.5rem .6rem;
  padding-top:.5rem;
  margin-top:.4rem;
  border-top:1px solid var(--bs-border-color-translucent,rgba(0,0,0,.075));
}
@media (max-width:1399.98px){ .et-rejilla{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
@media (max-width:1099.98px){ .et-rejilla{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width:767.98px){  .et-rejilla{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:519.98px){  .et-rejilla{ grid-template-columns:1fr; } }

.et-rejilla .et-campo{ display:flex; flex-direction:column; min-width:0; }
.et-rejilla .form-label{
  font-size:.66rem; font-weight:600; letter-spacing:.03em; text-transform:uppercase;
  color:var(--bs-secondary-color,#6c757d); margin-bottom:.15rem; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
/* Todos los controles llenan su columna y miden lo mismo. */
.et-rejilla .form-select-sm,
.et-rejilla .form-control-sm,
.et-rejilla .et-fechas{ width:100%; height:2rem; font-size:.72rem; }
.et-rejilla .et-fechas{ display:flex; align-items:center; gap:.15rem; padding:0 .3rem; }
.et-rejilla .et-fechas .form-control-sm{ width:100%; height:100%; border:0; background:transparent; padding:0 .1rem; }
.et-rejilla .et-nota{ align-self:flex-start; line-height:1.3; white-space:normal; }

/* Tercera fila: las acciones, centradas y separadas de los campos. */
.et-acciones-centro{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:.4rem;
  padding-top:.6rem; margin-top:.5rem;
  border-top:1px solid var(--bs-border-color-translucent,rgba(0,0,0,.075));
}


/* ==========================================================================
   odp_lista — filas en divs
   Misma tarjeta que /entradas, con cinco columnas en lugar de cuatro.
   ========================================================================== */
.odp-lista{ display:flex; flex-direction:column; gap:.45rem; }

.odp-card{
  padding-left:1.35rem;          /* deja sitio al filete de 10 px */
}

/* Filete lateral de 10 px, siempre visible.
   Rojo si es urgente, azul si no. Va como pseudoelemento y no como border-left
   para que no altere la caja ni desplace el contenido al pasar el cursor.
   El rojo sustituye al fondo table-danger, que teñia la fila entera y dejaba
   el texto en peor contraste que el resto de la lista. */
.odp-card::before{
  content:''; position:absolute; left:-1px; top:-1px; bottom:-1px;
  width:10px; border-radius:.5rem 0 0 .5rem;
  background:#0a58ca;            /* mismo azul que el relleno de los botones */
  opacity:1; transform:none; transition:background-color .14s ease;
}
.odp-card--urgente::before{ background:#b3261e; }
.odp-card--urgente{ background:var(--bs-body-bg,#fff); }
.odp-card.row-atendido::before{ background:#146c43; }

.odp-card .ec-col{ min-width:0; }
.odp-card .ec-col + .ec-col{
  padding-left:.7rem;
  border-left:1px solid var(--bs-border-color-translucent,rgba(0,0,0,.06));
}
.odp-card .ec-acciones{ display:flex; flex-wrap:wrap; gap:.25rem; align-items:flex-start; justify-content:flex-end; }
.odp-card .badge{ font-size:.63rem; padding:.26em .45em; font-weight:500; }
.odp-card .btn{ min-height:2rem; }

@media (max-width:1199.98px){
  .odp-card{ grid-template-columns:minmax(0,1fr); }
  .odp-card .ec-col + .ec-col{
    padding-left:0; border-left:0; padding-top:.45rem;
    border-top:1px solid var(--bs-border-color-translucent,rgba(0,0,0,.06));
  }
  .odp-card .ec-acciones{ justify-content:flex-start; }
}

/* Pie de la lista: el paginador hereda el estilo de /entradas. */
.entradas-barra--pie{
  border-bottom:0;
  border-top:1px solid var(--bs-border-color,#dee2e6);
  margin-bottom:0; margin-top:.6rem; padding:.5rem .1rem .1rem;
}


/* ==========================================================================
   odp_lista — reparto de columnas y estados de los botones
   ========================================================================== */

/* Cuatro columnas en lugar de cinco: los turnados pasan debajo de la fecha,
   con la que forman una sola idea (cuando entro y a quien esta turnado), y el
   espacio liberado se lo queda el remitente, que es la columna con el texto
   mas largo y la que antes se quedaba corta. */
.odp-card{
  grid-template-columns:6rem 15rem minmax(0, 1fr) auto;
  grid-auto-rows:min-content;
  align-items:start;
}
.odp-card .odp-c1{ grid-column:1; grid-row:1 / span 2; }
.odp-card .odp-c2{ grid-column:2; grid-row:1; }
.odp-card .odp-c3{ grid-column:2; grid-row:2; padding-top:.35rem; }
.odp-card .odp-c4{ grid-column:3; grid-row:1 / span 2; }
.odp-card .odp-c5{ grid-column:4; grid-row:1 / span 2; }

/* El filete separador solo entre columnas, no entre las dos filas de la 2. */
.odp-card .ec-col + .ec-col{ border-left:0; padding-left:0; }
.odp-card .odp-c2,
.odp-card .odp-c3{ padding-left:.7rem; border-left:1px solid var(--bs-border-color-translucent,rgba(0,0,0,.06)); }
.odp-card .odp-c3{ border-top:0; }
.odp-card .odp-c4{ padding-left:.7rem; border-left:1px solid var(--bs-border-color-translucent,rgba(0,0,0,.06)); }
.odp-card .odp-c5{ padding-left:.7rem; }

/* Botones de la fila: apagados en reposo, relleno solido al apuntarlos.
   Con !important porque compiten con la regla de /entradas que los realza al
   pasar por la tarjeta entera, y esa tiene la misma especificidad: sin esto,
   apuntar el boton concreto no cambiaba nada. */
.odp-card .ec-acciones .btn-ghost:hover,
.odp-card .ec-acciones .btn-ghost:focus-visible{
  color:#fff !important; background-color:#344054 !important; border-color:#344054 !important;
}
.odp-card .ec-acciones .btn-ghost.btn-g-azul:hover,
.odp-card .ec-acciones .btn-ghost.btn-g-azul:focus-visible{
  background-color:#0a58ca !important; border-color:#0a58ca !important;
}

/* Cuarta fila del panel: el recuento de resultados. */
.et-resumen{
  padding-top:.5rem; margin-top:.5rem; text-align:center;
  border-top:1px solid var(--bs-border-color-translucent,rgba(0,0,0,.075));
  font-size:.75rem; color:#475467;
}
.et-resumen > div{ display:inline; }

@media (max-width:1199.98px){
  .odp-card .odp-c1,
  .odp-card .odp-c2,
  .odp-card .odp-c3,
  .odp-card .odp-c4,
  .odp-card .odp-c5{
    grid-column:1; grid-row:auto; padding-left:0; border-left:0;
  }
}


/* ==========================================================================
   Correcciones de la auditoria visual
   ========================================================================== */

/* Foco de teclado en el paginador: --bs-pagination-focus-box-shadow:none lo
   dejaba sin ninguna senal, y sobre la pagina activa era invisible del todo. */
.entradas-barra .page-link:focus-visible{
  outline:2px solid #0a58ca; outline-offset:2px; box-shadow:none; z-index:3;
}

/* Los badges de dependencia heredan nowrap de .badge y la regla que lo anulaba
   apuntaba a .turnados-wrap, que no existe en esta pantalla: nombres como
   "Defensoria Especializada para Victimas y Ofendidos del Delito" median el
   doble que su columna y se salian sobre la del remitente. */
.odp-card .odp-c3 .badge,
.odp-card .odp-c2 .badge{ white-space:normal; text-align:left; }

/* Los NUC y las carpetas de investigacion son cadenas largas sin espacios. */
.odp-card .odp-c4{ overflow-wrap:anywhere; }

/* El borde de las cajas de busqueda y fechas daba 1.30:1 contra blanco, por
   debajo del 3:1 exigido a un elemento que delimita un control. */
.entradas-toolbar .et-buscar,
.entradas-toolbar .et-fechas,
.et-rejilla .form-select-sm,
.et-rejilla .form-control-sm{ border-color:#98a2b3; }

/* El rotulo plegado dejaba botones de 24.6 px de ancho. */
.entradas-toolbar .btn{ min-width:2rem; }

/* Sin row-gap, la linea vertical que separa columnas salia partida entre la
   fecha y los turnados, que ahora comparten columna. */
.odp-card{ row-gap:0; }

/* Un radio de .5rem sobre un filete de 10 px lo convertia en pastilla. */
.odp-card::before{ border-radius:.15rem 0 0 .15rem; }

/* .odp-c5 era la unica columna con relleno y sin filete separador. */
.odp-card .odp-c5{ border-left:1px solid var(--bs-border-color-translucent,rgba(0,0,0,.06)); }

/* fw-lighter (peso 100) al tamano mas pequeno de la pantalla era el texto
   menos legible que habia. */
.odp-card .fw-lighter{ font-weight:400 !important; color:#667085; }


/* ==========================================================================
   Estados de los botones de la barra de filtros
   Mismo problema que en las tarjetas: la regla generica .btn-ghost:hover
   empata en especificidad con otras y no siempre gana. Aqui se declara con
   el contenedor delante, y con !important, para que apuntar el boton
   concreto tenga un unico resultado posible.
   ========================================================================== */
.entradas-toolbar .btn-ghost:hover,
.entradas-toolbar .btn-ghost:focus-visible,
.entradas-toolbar .btn-ghost:hover .bi,
.entradas-toolbar .btn-ghost:hover .btn-txt,
.entradas-toolbar .btn-ghost:focus-visible .bi,
.entradas-toolbar .btn-ghost:focus-visible .btn-txt{
  color:#fff !important;
}
.entradas-toolbar .btn-ghost:hover,
.entradas-toolbar .btn-ghost:focus-visible{
  background-color:#344054 !important; border-color:#344054 !important;
}
.entradas-toolbar .btn-ghost.btn-g-azul:hover,
.entradas-toolbar .btn-ghost.btn-g-azul:focus-visible{
  background-color:#0a58ca !important; border-color:#0a58ca !important;
}
.entradas-toolbar .btn-ghost.btn-g-verde:hover,
.entradas-toolbar .btn-ghost.btn-g-verde:focus-visible{
  background-color:#146c43 !important; border-color:#146c43 !important;
}

/* El contador que acompana a "Mas filtros" tiene que verse sobre el relleno. */
.entradas-toolbar .btn-ghost:hover .badge,
.entradas-toolbar .btn-ghost:focus-visible .badge{
  background-color:rgba(255,255,255,.25) !important; color:#fff !important;
}

/* Panel desplegado: el boton se queda marcado, pero en gris claro y con texto
   oscuro. Antes heredaba un relleno a medias que se leia como texto claro
   sobre fondo claro. */
.entradas-toolbar .btn-ghost[aria-expanded="true"]{
  background-color:#eef1f5; color:#101828; border-color:#eef1f5;
}
.entradas-toolbar .btn-ghost[aria-expanded="true"]:hover{
  background-color:#344054 !important; color:#fff !important;
}


/* Separador del recuento: barra vertical tenue entre las cifras. */
.et-resumen .et-sep-txt{ color:#c4cad3; margin:0 .45rem; }
.et-resumen b{ color:#101828; font-variant-numeric:tabular-nums; }


/* ==========================================================================
   Pie de la lista: el paginador al centro
   El recuento queda a la izquierda y el paginador centrado respecto al ancho
   completo, no respecto al hueco que deja el recuento: por eso se posiciona
   en absoluto en lugar de repartir con space-between, que lo desplazaria
   segun cuantos digitos tenga la cifra.
   ========================================================================== */
.entradas-barra--pie{
  position:relative;
  justify-content:flex-start;
  min-height:2.5rem;
  align-items:center;
}
.entradas-barra--pie nav{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
}
@media (max-width:767.98px){
  .entradas-barra--pie{ flex-direction:column; gap:.5rem; }
  .entradas-barra--pie nav{ position:static; transform:none; }
}


/* ==========================================================================
   No procedentes sin revisar — fila superior
   Una fila por turno, en rejilla, para que folio, dependencia, fecha y motivo
   queden alineados en columna entre todos y se puedan barrer con la vista.
   ========================================================================== */
.noproc{
  border:1px solid #f0c6c2;
  border-left:10px solid #b3261e;
  border-radius:.15rem .5rem .5rem .15rem;
  background:#fdf6f5;
  padding:.5rem .75rem .35rem;
  margin-bottom:.6rem;
}
.noproc-cab{
  display:flex; align-items:center; justify-content:space-between;
  gap:.5rem; margin-bottom:.35rem;
}
.noproc-titulo{
  font-size:.78rem; font-weight:700; margin:0; color:#8c1b26;
  display:flex; align-items:center; gap:.35rem;
}
.noproc-cuenta{
  background:#b3261e; color:#fff; font-size:.66rem; font-weight:600;
  padding:.1rem .4rem; border-radius:.6rem; font-variant-numeric:tabular-nums;
}
.noproc-item{
  display:grid;
  grid-template-columns:4.5rem 12rem 5.5rem minmax(0,1fr) auto;
  gap:.5rem;
  align-items:center;
  padding:.3rem 0;
  border-top:1px solid #f3dedb;
  font-size:.72rem;
}
.noproc-item:first-of-type{ border-top:0; }
.noproc-folio{
  font-weight:700; color:#101828; font-variant-numeric:tabular-nums;
}
.noproc-dep,
.noproc-motivo{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.noproc-dep{ color:#475467; }
.noproc-fecha{ color:#5c636a; font-variant-numeric:tabular-nums; }
.noproc-motivo{ color:#344054; }
.noproc-acc{ display:flex; gap:.25rem; justify-content:flex-end; }
.noproc-acc form{ margin:0; }

@media (max-width:991.98px){
  .noproc-item{ grid-template-columns:4.5rem minmax(0,1fr); }
  .noproc-fecha, .noproc-motivo{ grid-column:2; white-space:normal; }
  .noproc-acc{ grid-column:1 / -1; justify-content:flex-start; }
}


/* ==========================================================================
   Reporte especial de oficios
   ========================================================================== */
.tabla-reporte{ font-size:.7rem; }
.tabla-reporte th, .tabla-reporte td{
  padding:.28rem .4rem; text-align:center; white-space:nowrap;
  border:1px solid var(--bs-border-color-translucent,rgba(0,0,0,.08));
}
.tabla-reporte thead th{
  font-size:.6rem; font-weight:600; text-transform:uppercase; letter-spacing:.02em;
  color:#344054; background:#f4f6f8; vertical-align:middle;
}
.tabla-reporte thead tr:first-child th.grupo{
  background:#e8ecf1; color:#101828; border-bottom:0;
}
/* Las columnas sin dato en la base se marcan: quien lea la pantalla debe
   distinguir "cero" de "esto se cuenta a mano". */
.tabla-reporte th.sin-dato, .tabla-reporte td.sin-dato{
  background:repeating-linear-gradient(45deg,#fafafa,#fafafa 4px,#f0f0f0 4px,#f0f0f0 8px);
  color:#98a2b3;
}
.tabla-reporte tbody tr:hover > td{ background:var(--bs-tertiary-bg,#f7f8fa); }
.tabla-reporte tbody td:nth-child(2),
.tabla-reporte tbody td:nth-child(3){ text-align:left; white-space:normal; }

/* Vencimiento cumplido en el reporte especial. */
.tabla-reporte td.vencido{ color:#a01f2c; font-weight:600; }