:root {
  --color-bg: #f4f6fb;
  --color-surface: #ffffff;
  --color-primary: #104f71;
  --color-primary-dark: #104f71;
  --color-text: #1f2937;
  --color-muted: #6b7280;
  --radius: 12px;
  --shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* El atributo [hidden] debe ocultar siempre, aunque otra regla use display:
   flex/grid (p. ej. .login-screen). Sin esto, la pantalla de login tapa la
   vista del rol activo (p. ej. el panel del residente). */
[hidden] {
  display: none !important;
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site-header {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #fff;
  padding: 0.9rem 1.5rem;
  text-align: left;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  position: sticky;
  top: 0;
  z-index: 20;
}

/* Logo + título del encabezado, alineados a la izquierda. El header ya tiene
   fondo azul, así que el logo (que es blanco) se ve sin recuadro extra. */
.header-marca {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  min-width: 0;
}

.header-logo {
  width: 132px;
  height: auto;
  flex-shrink: 0;
  /* Separador vertical sutil entre el logo y el texto. */
  padding-right: 1.1rem;
  border-right: 1px solid rgba(255, 255, 255, 0.25);
}

.header-marca > div {
  min-width: 0;
}

.site-header h1 {
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.25;
  margin: 0;
}

.site-header p {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.3;
  margin-top: 0.15rem;
}

main {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 2.5rem 1.5rem;
}

.card {
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2rem;
  max-width: 560px;
  width: 100%;
}

/* Tarjetas de la pestaña almacén más anchas para que la tabla se vea completa */
#panel-almacen .card {
  max-width: 960px;
}

/* Tarjetas de la pestaña resguardos más anchas: así la fila de 6 campos +
   botón se ve completa en una línea, sin amontonarse. La tarjeta de la LISTA
   de resguardos puede ser un poco más angosta. */
#panel-resguardos .card {
  max-width: 960px;
}
#panel-resguardos .card:has(#resguardos-lista) {
  max-width: 720px;
}

/* El formulario no necesita todo el ancho */
#panel-almacen .card:has(#movimiento-form) {
  max-width: 480px;
}

/* Tarjetas del módulo de Dirección (Proyectos / Licitaciones / Finanzas) más
   anchas, para que las tarjetas y tablas de cada registro se vean espaciosas. */
#panel-direccion .card {
  max-width: 1000px;
}

/* Tarjetas de la pestaña Usuarios anchas: la tabla completa sin amontonarse */
#panel-usuario .card {
  max-width: 960px;
}
/* Las tarjetas de LISTA (proyectos, licitaciones, movimientos) ocupan todo el
   ancho disponible del subpanel para que cada registro respire. */
#panel-direccion .card:has(#proyectos-lista),
#panel-direccion .card:has(#licitaciones-lista),
#panel-direccion .card:has(#finanzas-lista) {
  max-width: 100%;
}

.card h2 {
  margin-bottom: 0.75rem;
}

.card p {
  color: var(--color-muted);
  margin-bottom: 1.25rem;
}

button {
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s ease;
}

button:hover {
  background: var(--color-primary-dark);
}

button:focus-visible {
  outline: 3px solid var(--color-primary-dark);
  outline-offset: 2px;
}

#output {
  margin-top: 1rem;
  font-weight: 600;
  color: var(--color-primary-dark);
}

.site-footer {
  text-align: center;
  padding: 1.5rem;
  color: var(--color-muted);
  font-size: 0.875rem;
}
/* Pestañas */
main {
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0.5rem;
  max-width: 960px;
  width: 100%;
}

.tab {
  flex: 1 1 auto;
  background: transparent;
  color: var(--color-muted);
  border: none;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.tab:hover {
  background: var(--color-bg);
  color: var(--color-text);
}

.tab.active {
  background: var(--color-primary);
  color: #fff;
}

.tab:focus-visible {
  outline: 3px solid var(--color-primary-dark);
  outline-offset: 2px;
}

.tab-panel {
  width: 100%;
  max-width: 720px;
}

/* La pestaña de almacén necesita más ancho para la tabla de stock */
#panel-almacen {
  max-width: 960px;
  align-items: center;
}

/* La pestaña de resguardos también necesita más ancho: su tarjeta tiene una
   fila de 6 campos + botón que, en poco espacio, se amontonaría. Con un panel
   más ancho la tabla y las casillas respiran. */
#panel-resguardos {
  max-width: 960px;
}

/* La pestaña de Dirección necesita más ancho: tableros, tarjetas de registro
   con mucha información y tablas de KPIs. */
#panel-direccion {
  max-width: 1100px;
}

/* La pestaña Usuarios necesita ancho para la tabla de usuarios del sistema */
#panel-usuario {
  max-width: 960px;
}

.tab-panel[hidden] {
  display: none;
}
/* Formularios */
.tab-panel {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.field label {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-text);
}

.field input,
.field select {
  font: inherit;
  width: 100%;          /* no desbordar la tarjeta */
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.6rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  color: var(--color-text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
}

/* ---- Buscador de productos (movimientos de inventario) ---- */
.mov-info-producto {
  font-size: 0.85rem;
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
  border: 1px solid transparent;
}
.mov-info-producto.ok {
  background: #ecfdf5;
  border-color: #10b981;
  color: #065f46;
  font-weight: 600;
}
.mov-info-producto.nuevo {
  background: #fffbeb;
  border-color: #f59e0b;
  color: #92400e;
  font-weight: 600;
}
.mov-nuevo-producto {
  margin-top: 0.35rem;
  padding: 0.6rem 0.75rem;
  background: #fffbeb;
  border: 1px dashed #f59e0b;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.mov-nuevo-producto[hidden] { display: none; }

.form button[type="submit"] {
  justify-self: start;
}

.result {
  margin-top: 1rem;
  font-weight: 600;
  color: var(--color-primary-dark);
  min-height: 1.25rem;
}

.result.error {
  color: #dc2626;
}

/* Inventario */
.inventario {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  font-size: 0.95rem;
}

.inventario th,
.inventario td {
  text-align: left;
  padding: 0.6rem 0.5rem;
  border-bottom: 1px solid #e5e7eb;
}

.inventario th {
  color: var(--color-muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.inventario tbody tr.empty td {
  color: var(--color-muted);
  text-align: center;
  font-style: italic;
}

.inventario .tag {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
}

.inventario .tag.entrada {
  background: #dcfce7;
  color: #166534;
}

.inventario .tag.salida {
  background: #fee2e2;
  color: #991b1b;
}

.inventario .mov-destino {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: #64748b;
  font-weight: 600;
}
/* Tabla de stock de material */
.tabla-scroll {
  width: 100%;
  overflow-x: visible;
  margin-top: 1rem;
}

.inventario {
  min-width: 0;
}

.inventario tbody tr:hover {
  background: var(--color-bg);
}
/* Números alineados a la derecha en la tabla de stock */
.inventario th:not(:first-child),
.inventario td:not(:first-child) {
  text-align: right;
}

.inventario th:first-child,
.inventario td:first-child {
  text-align: left;
}
/* Resaltar stock agotado o en cero */
.inventario td.stock-bajo {
  color: #dc2626;
  font-weight: 700;
}

/* Fila de totales */
.inventario tfoot th {
  border-top: 2px solid #e5e7eb;
  border-bottom: none;
  color: var(--color-text);
  font-size: 0.9rem;
  padding-top: 0.75rem;
}

.inventario tfoot th:first-child {
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-muted);
}
/* Controles de la tabla (buscador + filtro) */
.controles {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
}

.filtro {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1 1 220px;
}

.filtro label {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-text);
}

.filtro select,
.filtro input {
  font: inherit;
  padding: 0.6rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  color: var(--color-text);
  width: 100%;
  max-width: 320px;
}

.filtro select:focus,
.filtro input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
}
/* ID e etiqueta de sección en la tabla de stock */
.inventario td.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  text-align: left;
}

.inventario .seccion {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  background: #eef2ff;
  color: var(--color-primary-dark);
  white-space: nowrap;
}
/* ===== Pantalla de inicio de sesión ===== */
.login-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1.5rem;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}

.login-card {
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2.5rem 2rem;
  width: 100%;
  max-width: 380px;
  display: grid;
  gap: 1rem;
  text-align: center;
}

.login-card h1 {
  font-size: 1.35rem;
  color: var(--color-primary-dark);
}

/* Logo en la tarjeta de login (fondo blanco): el logo es blanco, así que se
   le pone el mismo fondo azul corporativo que en el PDF para que se vea. */
.login-logo {
  display: block;
  margin: 0 auto 0.25rem;
  width: 190px;
  height: auto;
  background: var(--color-primary);
  border-radius: 8px;
  padding: 10px 12px;
}

.login-sub {
  color: var(--color-muted);
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

.login-card .field {
  text-align: left;
}

.login-card button {
  margin-top: 0.5rem;
  width: 100%;
}

/* ===== Barra de usuario ===== */
.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 1100px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.usuario-box {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: 0.88rem;
}

/* El nombre del usuario como "chip" discreto. */
.usuario-box #usuario-info {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 500;
}

.btn-salir {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.35);
  padding: 0.4rem 1.1rem;
  font-size: 0.82rem;
  font-weight: 500;
  border-radius: 999px;
  color: #fff;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.btn-salir:hover {
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.6);
}
/* ===== Requisiciones ===== */
.requisiciones-lista {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}

.req-card {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 1rem 1.25rem;
}

.req-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.req-id {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  color: var(--color-muted);
  margin-left: auto;
}

.req-estado {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
}

.req-estado.pendiente { background: #fef9c3; color: #854d0e; }
.req-estado.aprobada  { background: #dbeafe; color: #1e40af; }
.req-estado.rechazada { background: #fee2e2; color: #991b1b; }
.req-estado.entregada { background: #dcfce7; color: #166534; }
.req-estado.atendida  { background: #e5e7eb; color: #374151; }

/* Tarjeta de requisición ya archivada (atendida) */
.req-card-atendida {
  background: #f9fafb;
  border-style: dashed;
}

/* --- Sección de atendidas: filas colapsables --- */
.req-buscador {
  margin-bottom: 1rem;
}

.req-buscador input {
  width: 100%;
  max-width: 360px;
}

.req-contador {
  font-size: 0.85rem;
  color: var(--color-muted);
  margin-bottom: 0.5rem;
}

.req-atendida-item {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  margin-bottom: 0.4rem;
  overflow: hidden;
  background: #fff;
}

/* Fila compacta clicable: una sola línea por requisición atendida. */
.req-atendida-fila {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  text-align: left;
  background: #f9fafb;
  color: var(--color-text);
  border: none;
  border-radius: 0;
  padding: 0.7rem 0.9rem;
  cursor: pointer;
  font-weight: normal;
}

.req-atendida-fila:hover {
  background: #f3f4f6;
}

.req-flecha {
  color: var(--color-muted);
  font-size: 0.9rem;
  flex-shrink: 0;
  width: 1rem;
}

.req-atendida-resumen {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.req-atendida-fecha {
  flex-shrink: 0;
  font-size: 0.8rem;
  color: var(--color-muted);
}

/* El detalle desplegable reutiliza la tarjeta, pero sin bordes extra. */
.req-atendida-detalle {
  padding: 0.9rem;
  border-top: 1px solid #e5e7eb;
  background: #fff;
}

.req-atendida-detalle .req-card {
  border: none;
  box-shadow: none;
  padding: 0;
}

.req-tabla {
  margin-top: 0.5rem;
  font-size: 0.9rem;
}

.req-obs {
  font-size: 0.875rem;
  color: var(--color-muted);
  margin-top: 0.5rem;
}

/* Bloque de fechas y leyendas dentro de una tarjeta de requisición */
.req-fechas {
  margin-top: 0.75rem;
  border-top: 1px solid #e5e7eb;
  padding-top: 0.6rem;
}

.req-fecha-solicitud {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
}

.req-leyenda {
  font-size: 0.8rem;
  color: var(--color-muted);
  margin-top: 0.25rem;
  font-style: italic;
}

.req-fecha-atendida {
  font-size: 0.875rem;
  font-weight: 600;
  color: #166534;
  margin-top: 0.4rem;
}

/* --- Confirmación de recepción por el residente --- */
.req-estado.recibida { background: #d1fae5; color: #065f46; }

.btn-recibi {
  background: #0d9488;
  padding: 0.35rem 0.8rem;
  font-size: 0.85rem;
}

.btn-recibi:hover {
  background: #0f766e;
}

.btn-recibi-todo {
  background: #0d9488;
}

.btn-recibi-todo:hover {
  background: #0f766e;
}

.recibido-ok {
  color: #166534;
  font-weight: 600;
  font-size: 0.875rem;
}

.recepcion-ok {
  margin-top: 0.6rem;
  padding: 0.5rem 0.75rem;
  background: #dcfce7;
  color: #166534;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
}

.req-acciones {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.req-acciones button {
  padding: 0.45rem 1rem;
  font-size: 0.85rem;
}

.req-acciones .btn-atender {
  background: #16a34a;
}

.req-acciones .btn-atender:hover:not(:disabled) {
  background: #15803d;
}

.req-acciones .btn-rechazar {
  background: #dc2626;
}

.req-acciones .btn-rechazar:hover {
  background: #b91c1c;
}

.req-acciones button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.req-materiales {
  margin: 0.5rem 0 0 1.1rem;
  font-size: 0.9rem;
}
/* ===== Formulario de requisición (residente) ===== */
.materiales-fieldset {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 1rem;
}

.materiales-fieldset legend {
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0 0.4rem;
  color: var(--color-text);
}

.material-fila {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.material-fila .mat-nombre {
  flex: 2;
  min-width: 0;         /* permite encogerse en vez de desbordar */
}

.material-fila .mat-cantidad {
  flex: 1;
  min-width: 80px;
}

.material-fila input {
  font: inherit;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 0.55rem 0.7rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
}

.material-fila .btn-quitar {
  background: #f3f4f6;
  color: #991b1b;
  padding: 0 0.6rem;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.material-fila .btn-quitar svg {
  display: block;
}

.material-fila .btn-quitar:hover {
  background: #fee2e2;
  color: #b91c1c;
}

/* El botón de quitar se oculta cuando se marca hidden (primera fila). */
.material-fila .btn-quitar[hidden] {
  display: none;
}

.btn-secundario {
  background: #eef2ff;
  color: var(--color-primary-dark);
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  margin-top: 0.25rem;
}

.btn-secundario:hover {
  background: #e0e7ff;
}

/* Botones del formulario de resguardo (Guardar + Cancelar edición). */
.acciones-form {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}

.acciones-form .btn-secundario {
  margin-top: 0;
}

textarea {
  font: inherit;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.6rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  resize: vertical;
}
/* ============================================================
   Documento PDF (generado con html2pdf.js)
   El envoltorio .pdf-doc-wrap oculta el documento sin romper la
   captura de html2canvas (que sí falla con left:-10000px u opacity).
   Solo existe mientras se genera el PDF.
   ============================================================ */
/* El envoltorio se fija en la esquina superior izquierda del viewport para que
   html2canvas lo capture SIN offset (si queda al final del documento con
   scroll, la captura sale desplazada/recortada). Se manda al fondo con
   z-index negativo y sin recibir clics; no se usa opacity ni left negativo
   porque eso produce un lienzo en blanco. Se elimina al terminar. */
.pdf-doc-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 190mm;
  background: #ffffff;
  z-index: -1;
  pointer-events: none;
}

.pdf-doc {
  /* html2canvas captura el elemento con sus estilos reales. Requisitos:
     - Debe estar EN EL FLUJO normal y con tamaño medible (como una página
       normal). NADA de position:fixed/absolute raros, nada de left:-10000px,
       nada de opacity < 1: cualquiera de esos hace que el lienzo salga blanco.
     - Se coloca al final del <body>, encima lo tapa la app; se retira al final.
     background blanco para que el PDF no tenga fondo transparente. */
  display: block;
  width: 190mm;
  padding: 10mm;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
  color: #111827;
  background: #ffffff;
}

/* Encabezado del PDF: logo a la izquierda y títulos a la derecha. */
.pdf-encabezado {
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 2px solid #1e3a8a;
  padding-bottom: 8px;
  margin-bottom: 14px;
}

.pdf-logo {
  /* El logo de la empresa es BLANCO y transparente: sobre el fondo blanco
     del PDF sería INVISIBLE. Por eso se le pone un fondo azul corporativo
     (el logo se ve perfectamente sobre él). No es un bug de html2canvas. */
  width: 160px;
  height: 52px;
  display: block;
  object-fit: contain;
  object-position: center;
  flex-shrink: 0;
  background: #1e3a8a;
  border-radius: 6px;
  padding: 6px 10px;
  box-sizing: content-box;
}

.pdf-encabezado-texto {
  flex: 1;
  min-width: 0;
}

.pdf-doc h1 {
  margin: 0;
  font-size: 18px;
  text-align: right;
  color: #1e3a8a;
}

.pdf-doc h2 {
  margin: 2px 0 0;
  font-size: 13px;
  text-align: right;
  font-weight: 600;
  color: #374151;
}

.pdf-datos,
.pdf-materiales {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  margin-bottom: 12px;
}

.pdf-datos th {
  text-align: left;
  width: 35%;
  padding: 4px 6px;
  border: 1px solid #d1d5db;
  background: #f3f4f6;
  font-weight: 600;
}

.pdf-datos td {
  padding: 4px 6px;
  border: 1px solid #d1d5db;
}

.pdf-materiales th,
.pdf-materiales td {
  padding: 4px 6px;
  border: 1px solid #d1d5db;
  text-align: left;
}

.pdf-materiales thead th {
  background: #f3f4f6;
  font-weight: 600;
}

.pdf-obs {
  font-size: 11px;
  margin: 0 0 10px;
}

.pdf-leyenda {
  font-size: 10px;
  font-style: italic;
  color: #4b5563;
  margin: 0 0 10px;
}

/* Bloque de firma de recibido (solo en el PDF del residente). */
.pdf-firma {
  margin-top: 40px;
  page-break-inside: avoid;
}

.pdf-firma-renglon {
  width: 70mm;
  border-bottom: 1px solid #111827;
  height: 18mm;
}

.pdf-firma-etiqueta {
  margin: 4px 0 0;
  font-size: 11px;
  font-weight: 600;
}

.pdf-firma-nombre {
  margin: 8px 0 0;
  font-size: 11px;
}

.pdf-firma-fecha {
  margin: 8px 0 0;
  font-size: 11px;
}
/* ============================================================
   Pestaña Resguardos (almacén)
   Formulario de entrega de uniforme/EPP y su documento PDF.
   ============================================================ */

/* Rejilla de la cabecera del resguardo (proyecto, no. entrega, fecha, trabajador). */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.35rem 0.75rem;
  padding: 0.35rem;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #f9fafb;
}

/* Fila de equipo: Equipo · Unds · Talla · Uso · Almacenamiento · Vida útil · ✕.
   Con la tarjeta ancha (960px) los 6 campos caben en UNA línea, cómodos.
   minmax(0, …) permite encoger si la pantalla es pequeña, sin desbordar. */
.res-equipo-fila {
  display: grid;
  grid-template-columns: minmax(0, 2.6fr) minmax(0, 0.8fr) minmax(0, 0.9fr)
                         minmax(0, 1.4fr) minmax(0, 1.4fr) minmax(0, 1.1fr) 2.2rem;
  gap: 0.55rem;
  align-items: center;
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed #e5e7eb;
  width: 100%;
  box-sizing: border-box;
}

/* Los campos deben poder encogerse dentro de su celda sin desbordar. */
.res-equipo-fila > * {
  min-width: 0;
}

.res-equipo-fila .btn-quitar {
  width: 2.2rem;
  padding: 0;
}

/* Por debajo de ~720px de ancho se apila en 2 columnas para que no se apriete. */
@media (max-width: 720px) {
  .res-equipo-fila {
    grid-template-columns: 1fr 1fr;
  }
  .res-equipo-fila .res-equipo {
    grid-column: 1 / -1;   /* el nombre del equipo ocupa toda la fila */
  }
  .res-equipo-fila .btn-quitar {
    justify-self: end;
  }
}

/* Los desplegables (Uso, Almacenamiento) deben verse igual que los demás campos. */
.res-equipo-fila select {
  font: inherit;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 0.55rem 0.7rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #ffffff;
}

.res-info {
  margin: 0.4rem 0;
  font-size: 0.9rem;
  color: #4b5563;
}

/* --- Documento PDF del resguardo --- */
.pdf-resguardo {
  font-size: 10px;
}

.pdf-res-area {
  margin: 0 0 2px;
  font-size: 10px;
  font-weight: 600;
  text-align: right;
  color: #374151;
  text-transform: uppercase;
}

.pdf-res-meta td {
  width: 50%;
  border: 1px solid #d1d5db;
  padding: 3px 5px;
  font-size: 10px;
}

/* Rejilla compacta de datos del funcionario: etiqueta | valor | etiqueta | valor */
.pdf-res-info {
  margin-bottom: 8px;
  table-layout: fixed;
}

.pdf-res-info th {
  width: 18%;
  padding: 3px 5px;
  font-size: 9px;
  white-space: nowrap;
  background: #f3f4f6;
}

.pdf-res-info td {
  width: 32%;
  padding: 3px 5px;
  font-size: 9px;
  word-break: break-word;
}

.pdf-res-materiales th,
.pdf-res-materiales td {
  font-size: 9px;
  padding: 3px 4px;
  vertical-align: middle;
}

/* Reparto de ancho por columna (EQUIPO amplia; UNDS/TALLA/FECHA angostas).
   Encabezados cortos (FECHA, USO, ALMACENAMIENTO, VIDA ÚTIL) para que
   respiren en una sola línea. */
.pdf-res-materiales th:nth-child(1) { width: 26%; }
.pdf-res-materiales th:nth-child(2) { width: 6%; }
.pdf-res-materiales th:nth-child(3) { width: 7%; }
.pdf-res-materiales th:nth-child(4) { width: 9%; }
.pdf-res-materiales th:nth-child(5) { width: 11%; }
.pdf-res-materiales th:nth-child(6) { width: 12%; }
.pdf-res-materiales th:nth-child(7) { width: 11%; }
.pdf-res-materiales th:nth-child(8) { width: 18%; }

.pdf-res-materiales thead th {
  font-size: 8px;
  line-height: 1.15;
  text-align: center;
  vertical-align: middle;
  padding: 3px 3px;
}

.pdf-res-materiales tbody td:nth-child(8) {
  /* Columna "FIRMA DE RECIBIDO": se deja alto para firmar a mano.
     Un alto contenido (7mm) evita que cada fila ocupe media hoja. */
  height: 7mm;
}

.pdf-res-legal {
  font-size: 9px;
  line-height: 1.35;
  margin: 5px 0;
  /* Sin justify ni hyphens: alineado a la izquierda, SIN partir palabras ni
     dejar huecos raros entre ellas (eso se veía mal en documentos con tabla). */
  text-align: left;
  hyphens: none;
  word-break: normal;
  overflow-wrap: normal;
}

/* El primer texto legal va como nota pegada a la tabla. */
.pdf-res-legal:first-of-type {
  margin-top: 8px;
}

.pdf-res-firmas {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 24px;
}

.pdf-res-firma {
  flex: 1;
}

.pdf-res-firma .pdf-firma-renglon {
  width: 100%;
  height: 14mm;
}
/* ============================================================
   Ajuste automático del PDF del resguardo para que TODO quepa en
   UNA sola hoja tamaño carta, incluso con muchos equipos.

   El JS cuenta los materiales y aplica una clase al contenedor:
     - hasta 10 equipos -> sin clase (tamaño normal)
     - 11 a 14          -> .pdf-res-ajuste-1
     - 15 a 18          -> .pdf-res-ajuste-2
     - 19 a 22          -> .pdf-res-ajuste-3
     - 23 o más         -> .pdf-res-ajuste-4
   REGLA CLAVE: los TEXTOS LEGALES nunca bajan de 8px (siempre legibles).
   Lo que se comprime es la TABLA (altura de fila) y los espaciados, no la
   letra de los párrafos legales.
   ============================================================ */

/* --- Nivel 1 (11–14 equipos): recorte ligero --- */
.pdf-resguardo.pdf-res-ajuste-1 { padding: 9mm 11mm; }
.pdf-res-ajuste-1 .pdf-encabezado { margin-bottom: 9px; padding-bottom: 5px; }
.pdf-res-ajuste-1 .pdf-res-info { margin-bottom: 7px; }
.pdf-res-ajuste-1 .pdf-res-materiales th,
.pdf-res-ajuste-1 .pdf-res-materiales td { padding: 2.5px 4px; font-size: 9px; }
.pdf-res-ajuste-1 .pdf-res-materiales thead th { font-size: 8px; padding: 2.5px 3px; }
.pdf-res-ajuste-1 .pdf-res-materiales tbody td:nth-child(8) { height: 7mm; }
/* (La base ya define 7mm; aquí solo se ajusta en niveles más apretados.) */
.pdf-res-ajuste-1 .pdf-res-legal { font-size: 9px; margin: 5px 0; }
.pdf-res-ajuste-1 .pdf-res-firmas { margin-top: 18px; }
.pdf-res-ajuste-1 .pdf-res-firma .pdf-firma-renglon { height: 12mm; }

/* --- Nivel 2 (15–18 equipos): recorte medio --- */
.pdf-resguardo.pdf-res-ajuste-2 { padding: 8mm 10mm; }
.pdf-res-ajuste-2 .pdf-encabezado { margin-bottom: 8px; padding-bottom: 5px; }
.pdf-res-ajuste-2 .pdf-logo { width: 150px; height: 48px; }
.pdf-res-ajuste-2 .pdf-res-info { margin-bottom: 6px; }
.pdf-res-ajuste-2 .pdf-res-materiales th,
.pdf-res-ajuste-2 .pdf-res-materiales td { padding: 2px 3px; font-size: 8.5px; }
.pdf-res-ajuste-2 .pdf-res-materiales thead th { font-size: 7.5px; padding: 2px 2px; }
.pdf-res-ajuste-2 .pdf-res-materiales tbody td:nth-child(8) { height: 6mm; }
.pdf-res-ajuste-2 .pdf-res-legal { font-size: 9px; margin: 4px 0; }
.pdf-res-ajuste-2 .pdf-res-firmas { margin-top: 16px; }
.pdf-res-ajuste-2 .pdf-res-firma .pdf-firma-renglon { height: 12mm; }

/* --- Nivel 3 (19–22 equipos): compacto y legible --- */
.pdf-resguardo.pdf-res-ajuste-3 { padding: 7mm 9mm; }
.pdf-res-ajuste-3 .pdf-encabezado { margin-bottom: 7px; padding-bottom: 4px; }
.pdf-res-ajuste-3 .pdf-logo { width: 145px; height: 48px; }
.pdf-res-ajuste-3 .pdf-res-info { margin-bottom: 5px; }
.pdf-res-ajuste-3 .pdf-res-info th,
.pdf-res-ajuste-3 .pdf-res-info td { padding: 2px 4px; font-size: 8px; }
.pdf-res-ajuste-3 .pdf-res-materiales th,
.pdf-res-ajuste-3 .pdf-res-materiales td { padding: 2px 3px; font-size: 8px; }
.pdf-res-ajuste-3 .pdf-res-materiales thead th { font-size: 7px; padding: 2px 2px; }
.pdf-res-ajuste-3 .pdf-res-materiales tbody td:nth-child(8) { height: 5mm; }
.pdf-res-ajuste-3 .pdf-res-legal { font-size: 8.5px; margin: 4px 0; }
.pdf-res-ajuste-3 .pdf-res-firmas { margin-top: 14px; }
.pdf-res-ajuste-3 .pdf-res-firma .pdf-firma-renglon { height: 11mm; }

/* --- Nivel 4 (23–26 equipos, máximo real): algo compacto pero legible --- */
.pdf-resguardo.pdf-res-ajuste-4 { padding: 6mm 8mm; }
.pdf-res-ajuste-4 .pdf-encabezado { margin-bottom: 6px; padding-bottom: 4px; }
.pdf-res-ajuste-4 .pdf-logo { width: 135px; height: 44px; }
.pdf-res-ajuste-4 .pdf-res-area { font-size: 9px; }
.pdf-res-ajuste-4 .pdf-doc h1 { font-size: 16px; }
.pdf-res-ajuste-4 .pdf-res-info { margin-bottom: 4px; }
.pdf-res-ajuste-4 .pdf-res-info th,
.pdf-res-ajuste-4 .pdf-res-info td { padding: 1.5px 4px; font-size: 7.5px; }
.pdf-res-ajuste-4 .pdf-res-materiales th,
.pdf-res-ajuste-4 .pdf-res-materiales td { padding: 1.5px 3px; font-size: 7.5px; }
.pdf-res-ajuste-4 .pdf-res-materiales thead th { font-size: 6.5px; padding: 1.5px 2px; }
.pdf-res-ajuste-4 .pdf-res-materiales tbody td:nth-child(8) { height: 4mm; }
.pdf-res-ajuste-4 .pdf-res-legal { font-size: 8.5px; line-height: 1.25; margin: 3px 0; }
.pdf-res-ajuste-4 .pdf-res-firmas { margin-top: 12px; }
.pdf-res-ajuste-4 .pdf-res-firma .pdf-firma-renglon { height: 10mm; }
/* ============================================================
   MÓDULO DE DIRECCIÓN (control de proyectos)
   ============================================================ */

/* Tarjetas de resumen (KPIs) */
.resumen-direccion {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.stat-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.9rem 1rem;
  border-radius: 10px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
}

.stat-valor {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-primary-dark, #1e3a8a);
}

.stat-titulo {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #64748b;
}

/* Estados del proyecto (reutiliza la píldora .req-estado) */
.req-estado.estado-proceso    { background: #dbeafe; color: #1e40af; }
.req-estado.estado-pausado    { background: #fef9c3; color: #854d0e; }
.req-estado.estado-terminado  { background: #dcfce7; color: #166534; }
.req-estado.estado-cancelado  { background: #fee2e2; color: #991b1b; }

/* Barras de avance (físico / financiero) */
.proy-avances {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0.5rem 0;
}

.proy-avances > label {
  font-size: 0.78rem;
  color: #475569;
}

.barra-avance-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.barra-avance {
  flex: 1;
  height: 8px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
}

.barra-avance-relleno {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, var(--color-primary-dark, #1e3a8a));
  border-radius: 999px;
  transition: width 0.3s ease;
}

.barra-avance-txt {
  font-size: 0.78rem;
  font-weight: 600;
  color: #334155;
  min-width: 2.6rem;
  text-align: right;
}

.proy-notas {
  font-size: 0.85rem;
  color: #64748b;
}

/* Botón de acción destructiva (Eliminar) */
.btn-peligro {
  background: #fee2e2 !important;
  color: #991b1b !important;
}

.btn-peligro:hover {
  background: #fecaca !important;
}
/* Sub-pestañas del módulo de Dirección */
.subtabs {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid #e2e8f0;
  flex-wrap: wrap;
}

.subtab {
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: #64748b;
  font-weight: 600;
  padding: 0.55rem 1rem;
  margin-bottom: -2px;
  cursor: pointer;
  border-radius: 6px 6px 0 0;
}

.subtab:hover {
  color: var(--color-primary-dark, #1e3a8a);
  background: #f1f5f9;
}

.subtab.active {
  color: var(--color-primary-dark, #1e3a8a);
  border-bottom-color: var(--color-primary-dark, #1e3a8a);
}

/* Etapas de licitación */
.req-estado.lic-detectada   { background: #e2e8f0; color: #334155; }
.req-estado.lic-preparacion { background: #fef9c3; color: #854d0e; }
.req-estado.lic-enviada     { background: #dbeafe; color: #1e40af; }
.req-estado.lic-evaluacion  { background: #ede9fe; color: #5b21b6; }
.req-estado.lic-ganada      { background: #dcfce7; color: #166534; }
.req-estado.lic-perdida     { background: #fee2e2; color: #991b1b; }

/* Checklist de requisitos (en el formulario) */
.lic-requisito-fila {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.lic-requisito-fila .lic-req-hecho {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.lic-requisito-fila .lic-req-nombre {
  flex: 1;
}

/* Checklist mostrado en la tarjeta */
.lic-checklist {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0.5rem 0;
  padding: 0.6rem 0.75rem;
  background: #f8fafc;
  border-radius: 8px;
}

.lic-checklist-titulo {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #64748b;
  margin-bottom: 0.2rem;
}

.lic-checklist-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  cursor: pointer;
}

.lic-checklist-item.hecho span {
  text-decoration: line-through;
  color: #94a3b8;
}

/* Finanzas: colores de tipo y estado */
.fin-ingreso, .stat-ingreso { color: #166534 !important; }
.fin-egreso, .stat-egreso   { color: #991b1b !important; }
.req-estado.fin-pagado      { background: #dcfce7; color: #166534; }
.req-estado.fin-pendiente   { background: #fef9c3; color: #854d0e; }
/* ============================================================
   DIRECCIÓN — Nivel 2: reportes, auditoría, cuentas y gráficas
   ============================================================ */

/* Estados con reglas (RETRASADO / POR VENCER) */
.req-estado.estado-retrasado { background: #fee2e2; color: #991b1b; }
.req-estado.estado-porvencer { background: #ffedd5; color: #9a3412; }

/* Cuentas por cobrar / por pagar */
.cuenta-vencida   { color: #991b1b; font-weight: 700; }
.cuenta-porvencer { color: #9a3412; font-weight: 600; }
.cuenta-enplazo   { color: #166534; }

/* Historial / auditoría */
.historial-lista {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.5rem;
  max-height: 420px;
  overflow-y: auto;
}

.historial-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  font-size: 0.85rem;
}

.his-badge {
  flex: 0 0 auto;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: #e2e8f0;
  color: #334155;
}
.his-badge.his-crear    { background: #dcfce7; color: #166534; }
.his-badge.his-editar   { background: #dbeafe; color: #1e40af; }
.his-badge.his-eliminar { background: #fee2e2; color: #991b1b; }

.his-texto { flex: 1; color: #334155; }

.his-fecha {
  flex: 0 0 auto;
  font-size: 0.75rem;
  color: #94a3b8;
}

/* Gráficas de barras horizontales */
.grafica {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.5rem;
}

.grafica-fila {
  display: grid;
  grid-template-columns: 180px 1fr 70px;
  align-items: center;
  gap: 0.6rem;
}

.grafica-etiqueta {
  font-size: 0.82rem;
  color: #475569;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.grafica-pista {
  background: #e2e8f0;
  border-radius: 999px;
  height: 16px;
  overflow: hidden;
}

.grafica-barra {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #3b82f6, var(--color-primary-dark, #1e3a8a));
  transition: width 0.4s ease;
}
.grafica-barra.barra-etapa { background: linear-gradient(90deg, #8b5cf6, #5b21b6); }

.grafica-valor {
  font-size: 0.8rem;
  font-weight: 600;
  color: #334155;
  text-align: right;
}

/* Gráfica de meses (barras verticales: ingresos vs egresos) */
#grafica-meses {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  height: 220px;
  padding: 1rem 0.5rem 0;
  border-bottom: 2px solid #e2e8f0;
}

.grafica-mes {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
}

.grafica-mes-barras {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 100%;
  width: 100%;
  justify-content: center;
}

.barra-ing, .barra-egr {
  width: 22px;
  border-radius: 4px 4px 0 0;
  min-height: 2px;
}
.barra-ing { background: #16a34a; }
.barra-egr { background: #dc2626; }

.grafica-mes-titulo {
  font-size: 0.75rem;
  color: #64748b;
  margin-top: 0.4rem;
  text-transform: capitalize;
}

/* ============================================================
   EVIDENCIAS DE RESGUARDOS — modal de subida y lista
   ============================================================ */
.modal-fondo {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}

.modal-fondo[hidden] {
  display: none;
}

.modal-caja {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #e2e8f0;
}

.modal-cabecera h3 {
  margin: 0;
  font-size: 1.05rem;
  color: #0f172a;
}

.modal-cuerpo {
  padding: 1rem 1.25rem;
  overflow-y: auto;
}

.evid-lista {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.evid-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
}

.evid-item-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.evid-item-nombre {
  font-weight: 600;
  color: #0f172a;
  word-break: break-all;
}

.evid-item-meta {
  font-size: 0.8rem;
  color: #64748b;
}

.evid-item-acciones {
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
}

.evid-item-acciones .btn-secundario,
.evid-item-acciones .btn-peligro {
  padding: 0.35rem 0.7rem;
  font-size: 0.82rem;
}

/* Mensaje dentro del modal (reutiliza .form-output) */
#evid-msg {
  margin: 0.5rem 0 0;
}

/* En móviles, la caja del modal ocupa casi toda la pantalla */
@media (max-width: 640px) {
  .modal-caja {
    max-width: 100%;
    max-height: 92vh;
  }
}

/* ============================================================
   Pendientes (checklist) — v61
   ============================================================ */
.badge-contador {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: #e2e8f0;
  color: #334155;
  font-size: 0.72rem;
  font-weight: 700;
}

.badge-contador.badge-urgente {
  background: #fee2e2;
  color: #991b1b;
}

.pend-filtros {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 0.8rem;
  flex-wrap: wrap;
}

.pendientes-lista {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.pend-card {
  border: 1px solid #e2e8f0;
  border-left: 5px solid #94a3b8;
  border-radius: 10px;
  padding: 0.75rem 1rem;
  background: #fff;
}

.pend-card.prio-alta { border-left-color: #dc2626; }
.pend-card.prio-media { border-left-color: #f59e0b; }
.pend-card.prio-baja { border-left-color: #22c55e; }

.pend-card.pend-resuelto { opacity: 0.65; border-left-color: #94a3b8; }

.pend-card.pend-nuevo {
  box-shadow: 0 0 0 2px #93c5fd;
}

.pend-cab h3 { margin: 0 0 0.25rem 0; font-size: 1rem; }

.pend-meta {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}

.pend-meta .tag {
  display: inline-block;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
}

.pend-meta .tag.estado-pendiente { background: #fef3c7; color: #92400e; }
.pend-meta .tag.estado-en_proceso { background: #dbeafe; color: #1e40af; }
.pend-meta .tag.estado-resuelto { background: #dcfce7; color: #166534; }
.pend-meta .tag.prio-alta { background: #fee2e2; color: #991b1b; }
.pend-meta .tag.prio-media { background: #fef3c7; color: #92400e; }
.pend-meta .tag.prio-baja { background: #dcfce7; color: #166534; }
.pend-meta .tag.pend-vencido { background: #7f1d1d; color: #fff; }

.pend-cuerpo p { margin: 0.2rem 0; }

.pend-comentarios {
  border-left: 3px solid #cbd5e1;
  padding-left: 0.6rem;
  margin: 0.5rem 0;
  background: #f8fafc;
  border-radius: 6px;
}

.pend-comentarios p { margin: 0.25rem 0; font-size: 0.9rem; }

/* Fecha/hora del comentario: línea aparte, discreta, para que no quede
   amontonada junto al texto. */
.pend-comentarios .pend-comentario-fecha {
  display: block;
  font-size: 0.75rem;
  color: #94a3b8;
  margin-top: 0.15rem;
  padding-left: 0.2rem;
}

/* Evidencias adjuntas al pendiente (chips clicables) */
.pend-evidencias {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin: 0.4rem 0;
}

.pend-evidencias .evid-chip {
  cursor: pointer;
  border: 1px solid #cbd5e1;
  background: #f1f5f9;
  color: #1e3a8a;
  font-weight: 600;
}

.pend-evidencias .evid-chip:hover {
  background: #dbeafe;
  border-color: #93c5fd;
}

.pend-acciones {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 0.5rem;
}

.pend-comentario-input {
  flex: 1;
  min-width: 160px;
  padding: 0.3rem 0.5rem;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 0.9rem;
}

.btn-sm { padding: 0.3rem 0.7rem; font-size: 0.85rem; }
.btn-ok { background: #16a34a; border-color: #16a34a; color: #fff; }
.btn-danger { background: #dc2626; border-color: #dc2626; color: #fff; }

/* Usuarios (v64) */
.fila-inactiva { opacity: 0.55; }
.tag.rol-almacen { background: #dbeafe; color: #1e40af; }
.tag.rol-administracion { background: #fef3c7; color: #92400e; }
.tag.rol-residentes { background: #dcfce7; color: #166534; }
.tag.rol-direccion { background: #ede9fe; color: #5b21b6; }
.tag.rol-ventas { background: #f1f5f9; color: #475569; }

/* Tabla de usuarios: ancha por la tarjeta 960px; acciones compactas */
#usuarios-body tr td { padding: 0.45rem 0.6rem; vertical-align: middle; }
#usuarios-body td .btn-secundario {
  padding: 0.28rem 0.6rem;
  font-size: 0.8rem;
  margin: 0 0.15rem 0.25rem 0;
  white-space: nowrap;
}