/* Operaciones > Liberación por solicitudes. Todo bajo #lib (y los modales #lib-modal-*) para no
   tocar el resto del sistema. Anula a propósito reglas globales que se filtran en tablas densas:
   input/select con padding 12px y width 100%, th/td con padding 12px, botones con min-height 40px. */

/* Colores propios: valor claro (el de siempre) y su par para el modo oscuro. Van en :root y body
   porque los modales (#lib-modal-*), avisos y choques viven fuera de #lib. */
:root, body {
  --lib-borde: var(--line);        /* bordes de campos, lista y tarjetas */
  --lib-suave: var(--surface-2);        /* fondo de la cabecera y de la fila al pasar el puntero */
  --lib-tenue: var(--muted);        /* textos muy apagados (n.º de fila, heredado, ayudas) */
  --lib-navy: var(--navy);         /* referencia, contadores y marca de la fila elegida */
  --lib-activo: var(--navy);       /* pestaña activa: fondo */
  --lib-activo-texto: #ffffff; /* pestaña activa: letra */
  --lib-texto-2: var(--text-2);      /* textos secundarios */
  --lib-texto-3: var(--text-2);      /* textos de botones y resúmenes */
  --lib-gris: var(--muted);         /* paginador, ayudas, botones de volver/más */
  --lib-tinta: var(--text);        /* letra de los campos de la tabla */
  --lib-marcado: var(--soft-blue);      /* filtro o solicitud elegida */
  --lib-linea-fila: var(--row-line);   /* separador entre filas de la lista */
  --lib-hover: var(--sem-gris-bg);        /* fondo de botones pequeños al pasar el puntero */
  --lib-campo-hover: var(--line);  /* borde de la celda editable al pasar el puntero */
  --lib-foco: var(--primary);         /* borde del campo con foco y enlaces */
  --lib-sucio: var(--sem-amarillo-bg);        /* celda con cambios sin guardar */
  --lib-sin-fondo: var(--sem-naranja-bg);    /* PO sin asignar: fondo */
  --lib-sin-texto: var(--sem-naranja);    /* PO sin asignar: letra */
  --lib-bloq: var(--row-alt);         /* fila bloqueada */
  --lib-nueva: var(--row-alt);        /* fila nueva */
  --lib-error-fondo: var(--danger-bg);  /* fila con error */
  --lib-error: var(--danger);        /* letra de error */
  --lib-ambar: var(--warning);        /* "Guardando..." */
  --lib-destello: var(--sem-azul-bg);     /* destello de la fila recién creada */
}
:root[data-scheme="oscuro"],
:root[data-scheme="oscuro"] body {
  --lib-activo: var(--primary);
  --lib-activo-texto: var(--on-primary);
}

/* Barra única */
#lib .lib-barra { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: .1rem 0 .55rem; }
#lib .lib-barra input[type=search], #lib .lib-barra select {
  height: 34px; min-height: 34px; width: auto; margin: 0; padding: 0 .6rem; box-sizing: border-box;
  border: 1px solid var(--lib-borde); border-radius: 8px; font-size: var(--text-sm); background: var(--card);
}
#lib .lib-barra input[type=search] { flex: 0 1 280px; min-width: 180px; }
#lib .lib-base-fija { font-weight: 700; color: var(--lib-navy); font-size: var(--text-md); }
#lib .lib-tipo { display: inline-flex; border: 1px solid var(--lib-borde); border-radius: 8px; overflow: hidden; }
#lib .lib-tipo a { padding: .38rem .7rem; font-size: var(--text-xs); color: var(--lib-texto-2); text-decoration: none; }
#lib .lib-tipo a.on { background: var(--lib-activo); color: var(--lib-activo-texto); }
#lib .lib-franja { display: inline-flex; flex-wrap: wrap; gap: .25rem; }
#lib .lib-franja button {
  min-height: 30px; padding: 0 .6rem; font-size: var(--text-xs); font-weight: 600; color: var(--lib-texto-3);
  background: var(--card); border: 1px solid var(--lib-borde); border-radius: 999px;
}
#lib .lib-franja button b { font-weight: 700; color: var(--lib-navy); margin-left: .25rem; }
#lib .lib-franja button.on { background: var(--lib-marcado); border-color: var(--lib-navy); }
#lib .lib-fin { margin-left: auto; display: inline-flex; align-items: center; gap: .6rem; }
#lib .lib-guardado { font-size: var(--text-xs); color: var(--lib-tenue); min-width: 9em; text-align: right; }
#lib .lib-guardado.guardando { color: var(--lib-ambar); }
#lib .lib-guardado.sinred, #lib .lib-guardado.sesion { color: var(--lib-error); font-weight: 700; }

/* Cuerpo: lista + solicitud */
#lib .lib-cuerpo { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: .7rem; align-items: start; }
#lib.lib-modo-historico .lib-cuerpo { grid-template-columns: minmax(0, 1fr); }
#lib.lib-modo-historico .lib-items { display: none; }
#lib .lib-lista { background: var(--card); border: 1px solid var(--lib-borde); border-radius: 12px; display: flex; flex-direction: column;
  max-height: calc(100vh - 170px); position: sticky; top: .5rem; }
#lib.lib-modo-historico .lib-lista { position: static; max-height: none; order: 2; }
#lib .lib-items { overflow-y: auto; flex: 1; }
#lib .lib-item {
  display: block; width: 100%; min-height: 0; padding: .5rem .65rem; text-align: left; font-weight: 400;
  background: var(--card); border: 0; border-bottom: 1px solid var(--lib-linea-fila); border-radius: 0; white-space: normal; color: inherit;
}
#lib .lib-item:hover { background: var(--lib-suave); }
#lib .lib-item.on { background: var(--lib-marcado); box-shadow: inset 3px 0 0 var(--lib-navy); }
#lib .lib-item-1, #lib .lib-item-2 { display: flex; align-items: center; gap: .45rem; font-size: var(--text-xs); }
#lib .lib-item-1 b { color: var(--lib-navy); }
#lib .lib-item-cli { color: var(--lib-texto-2); }
#lib .lib-item-2 { margin-top: .2rem; color: var(--lib-gris); font-size: var(--text-xs); }
#lib .lib-item-cuenta { margin-left: auto; font-variant-numeric: tabular-nums; }
#lib .lib-item-pres, #lib .lib-presentes { display: inline-flex; gap: .15rem; margin-left: auto; }
#lib .lib-item-pres i, #lib .lib-presentes i {
  font-style: normal; font-size: var(--text-2xs); font-weight: 700; color: #fff; background: var(--user-accent);
  border-radius: 999px; padding: .05rem .32rem;
}
#lib .lib-nada { padding: 1rem; color: var(--lib-tenue); font-size: var(--text-sm); }
#lib .lib-pager { display: flex; align-items: center; gap: .35rem; padding: .4rem .5rem; border-top: 1px solid var(--lib-linea-fila); font-size: var(--text-xs); color: var(--lib-gris); }
#lib .lib-pager select { height: 26px; min-height: 26px; width: auto; padding: 0 .3rem; margin-left: auto; font-size: var(--text-xs);
  border: 1px solid var(--lib-borde); border-radius: 7px; }
#lib .lib-estado { display: inline-flex; align-items: center; white-space: nowrap; }

#lib .lib-sol { background: var(--card); border: 1px solid var(--lib-borde); border-radius: 12px; padding: .6rem .75rem; min-width: 0; }
#lib .lib-vacio { color: var(--lib-texto-2); font-size: var(--text-md); padding: 1.2rem; }
#lib .lib-vacio ol { margin: .4rem 0 0 1.1rem; padding: 0; line-height: 1.7; }
#lib .lib-ayuda, #lib-modal-po .lib-ayuda, #lib-modal-repartir .lib-ayuda, #lib-modal-detalle .lib-ayuda { color: var(--lib-gris); font-size: var(--text-xs); margin: .2rem 0 .5rem; }

#lib .lib-sol-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin-bottom: .5rem; }
#lib .lib-ref { width: 12rem; min-height: 0; padding: .25rem .4rem; font-size: var(--text-lg); font-weight: 700; color: var(--lib-navy);
  border: 1px solid transparent; border-radius: 7px; background: transparent; }
#lib .lib-ref:hover, #lib .lib-ref:focus { border-color: var(--lib-borde); background: var(--card); }
#lib .lib-resp { font-size: var(--text-xs); color: var(--lib-texto-2); }

/* Cabecera */
#lib .lib-cab { background: var(--lib-suave); border-radius: 10px; padding: .55rem .65rem; margin-bottom: .55rem; }
#lib .lib-cab-resumen { display: flex; align-items: center; gap: .6rem; font-size: var(--text-sm); color: var(--lib-texto-3); }
#lib .lib-cab-resumen span { flex: 1; min-width: 0; }
.lib-cab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .45rem .6rem; }
.lib-cab-campo { display: flex; flex-direction: column; gap: .15rem; font-size: var(--text-xs); color: var(--lib-texto-2); margin: 0; }
.lib-cab-campo.ancho { grid-column: 1 / -1; }
.lib-cab-campo.chk, .lib-cab-tecnicas .chk { flex-direction: row; align-items: center; gap: .3rem; font-size: var(--text-xs); color: var(--lib-texto-3); }
.lib-cab-campo input:not([type=checkbox]), .lib-cab-campo select, .lib-cab-campo textarea {
  width: 100%; min-height: 0; height: 32px; padding: 0 .5rem; box-sizing: border-box; margin: 0;
  border: 1px solid var(--lib-borde); border-radius: 7px; font-size: var(--text-sm); background: var(--card);
}
.lib-cab-campo textarea { height: auto; padding: .35rem .5rem; }
.lib-cab-campo input[type=checkbox], .lib-cab-tecnicas input[type=checkbox] { width: 15px; height: 15px; min-height: 0; padding: 0; margin: 0; }
.lib-cab-tecnicas { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; margin-top: .5rem; font-size: var(--text-xs); color: var(--lib-texto-2); }
.lib-cab-tecnicas > span { font-weight: 700; margin-right: .2rem; }
#lib .lib-cab-pie { margin-top: .45rem; text-align: right; }

/* Acciones */
#lib .lib-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: .2rem 0 .45rem; font-size: var(--text-xs); color: var(--lib-texto-2); }
#lib .lib-agregar { display: inline-flex; align-items: center; gap: .35rem; }
#lib .lib-n-iguales { width: 4.2rem; height: 28px; min-height: 0; padding: 0 .4rem; margin: 0; border: 1px solid var(--lib-borde); border-radius: 7px; font-size: var(--text-xs); }
#lib .lib-sel { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
#lib .lib-sel b { color: var(--lib-navy); }

/* Tabla de elementos */
#lib .lib-tabla { min-width: 980px; font-size: var(--text-xs); }
#lib .lib-tabla th, #lib .lib-tabla td { padding: 0 .3rem; height: 30px; vertical-align: middle; }
#lib .lib-tabla th { font-size: var(--text-2xs); white-space: nowrap; }
#lib .lib-tabla td { position: relative; }
#lib .lib-tabla td input:not([type=checkbox]), #lib .lib-tabla td select {
  width: 100%; min-height: 0; height: 26px; padding: 0 .3rem; margin: 0; box-sizing: border-box;
  border: 1px solid transparent; border-radius: 5px; background: transparent; font-size: var(--text-xs); color: var(--lib-tinta);
}
#lib .lib-tabla td input:hover, #lib .lib-tabla td select:hover { border-color: var(--lib-campo-hover); }
#lib .lib-tabla td input:focus, #lib .lib-tabla td select:focus { border-color: var(--lib-foco); background: var(--card); outline: none; }
#lib .lib-tabla td.num input { text-align: right; }
#lib .lib-tabla .ancha { min-width: 220px; }
#lib .lib-tabla .lib-col-sel { width: 26px; text-align: center; }
#lib .lib-tabla .lib-col-sel input { width: 15px; height: 15px; min-height: 0; padding: 0; margin: 0; }
#lib .lib-tabla .lib-n { color: var(--lib-tenue); width: 28px; }
#lib .lib-tabla td.heredado input { color: var(--lib-tenue); }
#lib .lib-tabla .sucio { background: var(--lib-sucio) !important; }
#lib .lib-volver, #lib .lib-mas {
  min-height: 0; padding: 0 .3rem; height: 22px; font-size: var(--text-sm); font-weight: 700; color: var(--lib-gris);
  background: transparent; border: 0; border-radius: 5px;
}
#lib .lib-volver { position: absolute; right: 2px; top: 4px; }
#lib .lib-volver:hover, #lib .lib-mas:hover { background: var(--lib-hover); color: var(--lib-navy); }
#lib .lib-po {
  min-height: 0; height: 24px; padding: 0 .45rem; font-size: var(--text-xs); font-weight: 600; color: var(--lib-navy);
  background: var(--soft-blue); border: 0; border-radius: 6px; max-width: 12rem; overflow: hidden; text-overflow: ellipsis;
}
#lib .lib-po.sin { background: var(--lib-sin-fondo); color: var(--lib-sin-texto); }
#lib .lib-tabla tr.lib-parte td:nth-child(2)::before { content: '↳'; color: var(--lib-tenue); margin-right: .15rem; }
#lib .lib-tabla tr.lib-bloq { background: var(--lib-bloq); }
#lib .lib-tabla tr.lib-nueva td { background: var(--lib-nueva); }
#lib .lib-tabla tr.lib-con-error td { background: var(--lib-error-fondo); }
#lib .lib-tabla tr.lib-nueva input, #lib .lib-tabla tr.lib-nueva select { border: 1px dashed var(--lib-borde); }
#lib .lib-ayuda-celda { color: var(--lib-tenue); font-size: var(--text-xs); }
#lib .lib-destello { animation: lib-destello 1.6s ease-out; }
@keyframes lib-destello { from { background: var(--lib-destello); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { #lib .lib-destello { animation: none; } }

/* Avisos, choques y modales */
.lib-aviso {
  position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%) translateY(150%); z-index: 7000;
  max-width: min(92vw, 640px); padding: .6rem .9rem; border-radius: 10px; background: var(--tqc-header-2); color: #fff;
  font-size: var(--text-sm); box-shadow: var(--shadow-xl); transition: transform .2s ease;
}
.lib-aviso.on { transform: translateX(-50%) translateY(0); }
.lib-aviso.alerta { background: var(--warning); }
.lib-aviso.error { background: var(--danger); }
.lib-choque {
  position: absolute; z-index: 6500; max-width: 300px; padding: .55rem .65rem; background: var(--card); border: 1px solid var(--warning);
  border-radius: 10px; box-shadow: var(--shadow-lg); font-size: var(--text-xs); display: flex; flex-wrap: wrap; gap: .35rem;
}
.lib-choque p { margin: 0 0 .2rem; width: 100%; color: var(--lib-texto-3); }
.lib-form { display: flex; flex-direction: column; gap: .6rem; padding: .2rem 0; }
.lib-form > label { display: flex; flex-direction: column; gap: .2rem; font-size: var(--text-xs); color: var(--lib-texto-2); }
.lib-error { color: var(--lib-error); font-size: var(--text-sm); margin: 0; }
.lib-pie { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .3rem; }
.lib-fila { display: flex; gap: .4rem; align-items: center; margin-top: .3rem; }
.lib-fila input { flex: 1; }
.lib-po-opciones { display: flex; flex-direction: column; gap: .35rem; max-height: 50vh; overflow-y: auto; }
.lib-po-opcion {
  display: flex; align-items: center; gap: .6rem; justify-content: flex-start; width: 100%; min-height: 38px;
  padding: .4rem .6rem; background: var(--card); border: 1px solid var(--lib-borde); border-radius: 8px; color: var(--lib-tinta); font-weight: 600;
}
.lib-po-opcion:hover { border-color: var(--lib-foco); background: var(--soft-blue); }
.lib-saldo { margin-left: auto; font-weight: 400; color: var(--lib-texto-2); font-size: var(--text-xs); }
.lib-avisar summary { cursor: pointer; font-size: var(--text-sm); color: var(--lib-foco); }

@media (max-width: 900px) {
  #lib .lib-cuerpo { grid-template-columns: minmax(0, 1fr); }
  #lib .lib-lista { position: static; max-height: 40vh; }
  #lib .lib-fin { margin-left: 0; }
}