/* Sistema de Gestión Documental · Universidad de Cartagena — MinTIC

   Criterio del diseño
   -------------------
   Nada de cajas por defecto. Las cifras van en línea, como texto; la tabla
   ocupa el ancho sin tarjeta alrededor; los filtros son pestañas subrayadas y
   las acciones de cada fila son enlaces de texto. Solo dos cosas se rellenan
   de color: el botón de buscar y el de crear. Lo demás se separa con líneas
   finas y con espacio, no con recuadros ni sombras.

   Radios pequeños y sin sombras: las tarjetas redondeadas con sombra suave
   son justo lo que hace que una interfaz parezca hecha en serie. */

:root{
  --azul:#1447c7;         /* franja, botones y enlaces */
  --azul-hover:#0f389f;
  --marino:#0f2b57;       /* cabecera de la tabla */
  --titulo:#0d1b33;
  --texto:#2b3445;
  --tenue:#6b7486;
  --linea:#dde3ec;
  --linea-suave:#eef1f6;
  --cebra:#f3f6fb;
  --fondo:#ffffff;
  --verde:#2e9e5b;
  --ambar:#e0a200;
  --rojo:#d93f45;
  --radio:4px;
  --fuente:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:var(--fuente);font-size:15px;line-height:1.5;background:var(--fondo);
  color:var(--texto);-webkit-font-smoothing:antialiased}
.oculto{display:none !important}
[hidden]{display:none !important}
a{color:var(--azul);text-decoration:none}
a:hover{text-decoration:underline}
button{font-family:inherit;font-size:inherit;color:inherit;cursor:pointer}
button:disabled{cursor:default;opacity:.4}
.contenedor{max-width:1400px;margin:0 auto;padding:0 28px}
.solo-lector{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ------------------------------------------------------------ franja */
.franja{background:var(--azul);color:#fff;padding-top:env(safe-area-inset-top)}
.franja-inner{display:flex;align-items:center;justify-content:space-between;min-height:52px;gap:16px}
.franja a{color:#dbe4fb;font-size:14px}
.franja a:hover{color:#fff}

.menu-usuario{position:relative;margin-left:auto}
.menu-boton{display:flex;align-items:center;gap:10px;background:none;border:0;color:#fff;
  font-size:15px;font-weight:500;padding:8px 2px}
.menu-perfil{font-size:12.5px;color:#c3d1f5;font-weight:400}
.menu-boton svg{width:18px;height:18px;stroke-width:2}
.menu-lista{position:absolute;right:0;top:calc(100% + 4px);z-index:60;min-width:220px;
  background:#fff;border:1px solid var(--linea);border-radius:var(--radio);
  box-shadow:0 6px 20px rgba(13,27,51,.12);padding:6px 0}
.menu-quien{font-size:12.5px;color:var(--tenue);padding:6px 16px 8px;border-bottom:1px solid var(--linea-suave);
  margin-bottom:4px;overflow-wrap:anywhere}
.menu-lista button{display:block;width:100%;text-align:left;background:none;border:0;
  padding:9px 16px;color:var(--texto);font-size:14.5px}
.menu-lista button:hover{background:var(--cebra);color:var(--azul)}

/* ---------------------------------------------------------- cabecera */
/* La marca arriba y las pestanas en su propia fila. El ejemplo las pone en la
   misma linea, pero tiene cuatro secciones; aqui hay ocho pestanas, y a su
   lado no caben: la ultima quedaba cortada sin indicio de que hubiera mas. */
.cabecera{border-bottom:1px solid var(--linea)}
.cabecera .contenedor{display:flex;flex-direction:column;align-items:stretch;gap:10px;padding-top:22px}
.marca{display:flex;flex-direction:column;flex:0 0 auto}
.marca strong{font-size:23px;font-weight:700;color:var(--titulo);letter-spacing:-.01em;line-height:1.15}
.marca span{font-size:13.5px;color:var(--tenue)}

/* Las pestañas temáticas son la navegación: van subrayadas, como en una
   barra de secciones, y se desplazan de lado si no caben. */
/* Una sola fila siempre. Si no caben, se desliza de lado, y el borde que
   esconde pestanas se desvanece para que se note que hay mas. Bajar de
   linea se probo y no sirve: en una tableta eran tres filas de pestanas. */
.nav-envoltura{position:relative;margin:0 -9px -1px}
.navegacion{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:0;
  scroll-behavior:smooth;overscroll-behavior-x:contain}
.navegacion::-webkit-scrollbar{display:none}

/* Flechas a los lados. Solo aparecen si hay pestanas escondidas por ese
   lado, y llevan un fondo blanco que se funde con la barra para que la
   pestana que queda debajo no parezca desactivada. */
.nav-flecha{position:absolute;top:0;bottom:1px;z-index:2;width:44px;border:0;display:flex;
  align-items:center;color:var(--azul);padding:0}
.nav-flecha svg{width:22px;height:22px;stroke-width:2.2}
.nav-flecha:hover{color:var(--azul-hover)}
.nav-izquierda{left:0;justify-content:flex-start;padding-left:6px;
  background:linear-gradient(90deg,#fff 55%,rgba(255,255,255,0))}
.nav-derecha{right:0;justify-content:flex-end;padding-right:6px;
  background:linear-gradient(270deg,#fff 55%,rgba(255,255,255,0))}
.nav-item{background:none;border:0;border-bottom:3px solid transparent;padding:10px 9px 13px;
  font-size:14.5px;color:var(--texto);white-space:nowrap;display:flex;align-items:baseline;gap:6px}
.nav-item:hover{color:var(--azul)}
.nav-item.activa{color:var(--azul);font-weight:600;border-bottom-color:var(--azul)}
.nav-conteo{font-size:12px;color:var(--tenue);font-weight:400}
.nav-item.activa .nav-conteo{color:var(--azul)}

/* -------------------------------------------------------- encabezado */
.principal{padding-top:34px;padding-bottom:12px}
.encabezado{display:flex;justify-content:space-between;align-items:flex-start;gap:32px;margin-bottom:26px}
.encabezado-titulo{min-width:0}
.encabezado h1{font-size:40px;line-height:1.08;font-weight:800;color:var(--titulo);letter-spacing:-.02em}
.bajada{font-size:17px;color:var(--tenue);margin-top:6px}
.acciones-pestana{display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin-top:12px}
.grupo-mover{display:inline-flex;align-items:center;gap:2px;font-size:14px;font-weight:500;color:var(--texto)}
.flecha-mover{background:none;border:1px solid var(--linea);border-radius:var(--radio);color:var(--azul);
  width:30px;height:28px;margin-left:4px;font-size:15px;line-height:1;display:inline-flex;
  align-items:center;justify-content:center}
.flecha-mover:hover:not(:disabled){border-color:var(--azul);background:#f2f5fc}

.encabezado-cifras{text-align:right;flex:0 1 auto}
.cifras{font-size:17px;color:var(--texto);white-space:nowrap}
.cifras b{font-size:26px;font-weight:700;color:var(--titulo);margin-right:3px;font-variant-numeric:tabular-nums}
.cifras .cifra-revision{color:var(--ambar)}
.cifras .cifra-pendiente{color:var(--rojo)}
.cifras .cifra-validado{color:var(--verde)}
.punto{color:#b4bccb;margin:0 8px}
.cifras-globales{font-size:13px;color:var(--tenue);margin-top:6px;max-width:560px;margin-left:auto}
.acciones-exportar{display:flex;gap:18px;justify-content:flex-end;margin-top:10px}

/* Enlaces de texto: todas las acciones que no son la principal. */
.enlace-texto{background:none;border:0;padding:0;color:var(--azul);font-size:14px;font-weight:500}
.enlace-texto:hover:not(:disabled){text-decoration:underline}
.enlace-texto.peligro{color:var(--rojo)}

/* ----------------------------------------------------- busqueda */
.buscar{display:flex;gap:24px;align-items:stretch;justify-content:space-between;margin-bottom:22px}
.buscador{flex:1 1 auto;display:flex;align-items:stretch;border:1px solid var(--linea);
  border-radius:var(--radio);max-width:1000px}
.buscador:focus-within{border-color:var(--azul);box-shadow:0 0 0 3px rgba(20,71,199,.12)}
.lupa{width:22px;height:22px;margin:0 4px 0 18px;align-self:center;color:var(--tenue);flex:0 0 auto}
#busqueda{flex:1;border:0;outline:0;font:inherit;font-size:16px;padding:14px 12px;background:transparent;
  color:var(--titulo);min-width:0}
#busqueda::placeholder{color:#8a93a4}
.buscador .boton{border-radius:0 var(--radio) var(--radio) 0;margin:-1px -1px -1px 0;padding:0 34px}

.boton{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1px solid transparent;
  border-radius:var(--radio);font-size:15px;font-weight:600;padding:12px 22px;white-space:nowrap;
  text-decoration:none;line-height:1.2}
.boton svg{width:20px;height:20px;stroke-width:2}
.boton.primario{background:var(--azul);color:#fff}
.boton.primario:hover{background:var(--azul-hover);text-decoration:none}
.boton.secundario{background:#fff;border-color:var(--linea);color:var(--texto)}
.boton.secundario:hover{border-color:var(--azul);color:var(--azul)}
.boton.peligro{background:#fff;border-color:#f0c3c5;color:var(--rojo)}
.boton.peligro:hover{background:var(--rojo);border-color:var(--rojo);color:#fff}
#hueco-nuevo:empty{display:none}

/* ------------------------------------------------------- filtros */
.filtros{display:flex;align-items:center;justify-content:space-between;gap:20px;
  border-bottom:1px solid var(--linea);margin-bottom:0;flex-wrap:wrap}
.filtro-estados{display:flex;gap:4px;margin-bottom:-1px;overflow-x:auto;scrollbar-width:none}
.filtro-estados::-webkit-scrollbar{display:none}
.estado-tab{background:none;border:0;border-bottom:3px solid transparent;padding:12px 16px 13px;
  font-size:16px;color:var(--texto);white-space:nowrap}
.estado-tab:hover{color:var(--azul)}
.estado-tab.activa{color:var(--azul);font-weight:600;border-bottom-color:var(--azul)}
.estado-n{font-size:12.5px;color:var(--tenue);font-weight:400;margin-left:2px}
.filtro-listas{display:flex;align-items:center;gap:22px;padding:8px 0 8px 22px;border-left:1px solid var(--linea);
  flex-wrap:wrap}
.filtro-listas label{display:flex;align-items:center;gap:12px;font-size:14.5px;color:var(--texto)}
.filtro-listas select,.campo select,.campo input,.campo textarea{font:inherit;font-size:15px;padding:9px 12px;
  border:1px solid var(--linea);border-radius:var(--radio);background:#fff;color:var(--titulo)}
.filtro-listas select{min-width:170px;padding-right:32px}
.filtro-listas select:focus,.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:0;border-color:var(--azul);box-shadow:0 0 0 3px rgba(20,71,199,.12)}

/* --------------------------------------------------------- tabla */
/* La tabla se distingue del fondo con un filete y filas alternas en gris
   neutro. Sin sombra ni esquinas redondeadas: se lee como bloque sin volver
   a parecer una tarjeta. */
.tabla-ancha{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid #d3d9e2;
  border-top:0;background:#fff}
.tabla-docs{width:100%;border-collapse:collapse;font-size:15px}
.tabla-docs thead th{background:var(--marino);color:#fff;text-align:left;font-weight:600;
  padding:14px 16px;white-space:nowrap;font-size:14.5px}
.tabla-docs thead th:first-child{padding-left:20px}
.tabla-docs thead th:last-child{padding-right:20px}
.tabla-docs tbody td{padding:14px 16px;border-bottom:1px solid #e3e7ed;vertical-align:middle}
.tabla-docs tbody td:first-child{padding-left:20px}
.tabla-docs tbody td:last-child{padding-right:20px}
.tabla-docs tbody tr:last-child td{border-bottom:0}
.tabla-docs tbody tr:nth-child(even){background:#f3f4f7}
.tabla-docs tbody tr:hover{background:#e8edf6}

.col-num{width:56px;color:#9aa3b2;font-variant-numeric:tabular-nums;font-size:13.5px}
.col-doc{display:flex;align-items:flex-start;gap:16px;min-width:320px}
.icono-doc{width:30px;height:30px;color:var(--azul);flex:0 0 auto;margin-top:2px;stroke-width:1.6}
.doc-nombre{display:block;font-weight:600;color:var(--titulo);font-size:16px;line-height:1.35}
.doc-meta{display:block;font-size:13.5px;color:var(--tenue);margin-top:3px}
.doc-meta .punto{margin:0 6px}
.doc-notas{display:block;font-size:13px;color:#8a93a4;margin-top:3px;font-style:italic}
.col-codigo{width:120px;font-variant-numeric:tabular-nums;color:var(--titulo);white-space:nowrap}
.col-estado{width:160px;white-space:nowrap}
.col-accion{width:190px;white-space:nowrap}
.col-menu{width:52px;text-align:right;position:relative}

/* Estado: un punto de color y la palabra. Se entiende sin el color. */
.estado{display:inline-flex;align-items:center;gap:9px;color:var(--titulo)}
.estado i{width:10px;height:10px;border-radius:50%;background:var(--tenue);flex:0 0 auto}
.e-validado i{background:var(--verde)}
.e-revision i{background:var(--ambar)}
.e-pendiente i{background:var(--rojo)}

.accion-enlace{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;
  color:var(--azul);font-weight:600;font-size:15px}
.accion-enlace:hover{text-decoration:underline}
.sin-enlace{color:#a3abb9;font-size:14px}

.menu-fila{background:none;border:0;padding:6px;color:var(--tenue);border-radius:var(--radio);line-height:0}
.menu-fila:hover,.menu-fila[aria-expanded="true"]{color:var(--titulo);background:rgba(15,43,87,.07)}
.menu-fila svg{width:20px;height:20px;fill:currentColor;stroke:none}
.menu-fila-lista{position:absolute;right:16px;top:calc(100% - 8px);z-index:50;min-width:200px;text-align:left;
  background:#fff;border:1px solid var(--linea);border-radius:var(--radio);
  box-shadow:0 6px 20px rgba(13,27,51,.12);padding:6px 0}
.menu-fila-lista button{display:block;width:100%;text-align:left;background:none;border:0;
  padding:9px 16px;font-size:14.5px;color:var(--texto)}
.menu-fila-lista button:hover:not(:disabled){background:var(--cebra);color:var(--azul)}
.menu-fila-lista .peligro{color:var(--rojo)}
.menu-fila-lista .peligro:hover{color:var(--rojo) !important}

/* ---------------------------------------------- reordenar arrastrando */
.barra-reordenar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  border-left:3px solid var(--azul);padding:10px 0 10px 16px;margin:14px 0 16px}
.barra-reordenar p{font-size:14.5px;color:var(--texto);max-width:70ch}
.barra-reordenar-botones{display:flex;gap:10px}
.asa-muestra{display:inline-block;color:var(--azul);font-size:16px;line-height:1}

.col-asa{width:48px;padding-right:0 !important}
.asa{background:none;border:0;cursor:grab;color:#8a93a4;font-size:20px;line-height:1;
  width:36px;height:36px;border-radius:var(--radio);touch-action:none;user-select:none;
  -webkit-user-select:none;display:inline-flex;align-items:center;justify-content:center}
.asa:hover{color:var(--azul);background:#eef2fb}
.asa:focus-visible{outline:2px solid var(--azul);outline-offset:1px;color:var(--azul)}
.tabla-reordenar tbody tr{transition:background .12s}
.tabla-reordenar tbody tr.arrastrando{background:#dfe8fb !important;
  box-shadow:inset 3px 0 0 var(--azul)}
.tabla-reordenar tbody tr.arrastrando .asa{cursor:grabbing;color:var(--azul)}

/* Mientras se reordena no se filtra ni se cambia de pagina: se atenuan. */
.modo-reordenar .filtros,.modo-reordenar .buscar{opacity:.4;pointer-events:none}

/* Pie de la tabla: cuántos se ven y el paginador. */
.tabla-pie{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  padding:18px 0 6px}
.tabla-pie p{font-size:14.5px;color:var(--tenue)}
.paginador{display:flex;gap:8px}
.paginador button{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);
  min-width:40px;height:38px;padding:0 12px;font-size:14.5px;color:var(--titulo)}
.paginador button:hover:not(:disabled){border-color:var(--azul);color:var(--azul)}
.paginador .activa{background:var(--azul);border-color:var(--azul);color:#fff}
.paginador .activa:hover{color:#fff !important}

.vacio{padding:56px 0;text-align:center;color:var(--tenue);font-size:16px;
  border-bottom:1px solid var(--linea)}

/* Avisos de la página: una línea con filete a la izquierda, no un recuadro. */
.nota-aviso{border-left:3px solid var(--ambar);padding:4px 0 4px 16px;margin:0 0 24px;
  font-size:14.5px;color:var(--texto)}
.nota-aviso strong{color:var(--titulo)}

/* ------------------------------------------------------------ pie */
.pie{margin-top:48px;border-top:1px solid var(--linea);padding:26px 0 calc(34px + env(safe-area-inset-bottom))}
.pie-inner p{font-size:13.5px;color:var(--tenue);max-width:76ch}
.pie-inner strong{color:var(--texto)}
.pie-nota{margin-top:6px}
.pie-enlaces{display:flex;gap:22px;margin-top:12px}
.pie-enlaces a{font-size:14px}

/* ---------------------------------------------------------- modal */
.capa-modal{position:fixed;inset:0;background:rgba(13,27,51,.45);display:flex;align-items:center;
  justify-content:center;z-index:900;padding:20px}
.modal{background:#fff;border-radius:6px;width:min(680px,100%);max-height:92vh;display:flex;
  flex-direction:column;box-shadow:0 20px 50px rgba(13,27,51,.25)}
.modal-cabecera{display:flex;align-items:center;justify-content:space-between;padding:18px 24px 14px;
  border-bottom:1px solid var(--linea)}
.modal-cabecera h2{font-size:19px;font-weight:700;color:var(--titulo)}
.cerrar-modal{background:none;border:0;font-size:28px;line-height:1;color:var(--tenue);padding:0 4px}
.cerrar-modal:hover{color:var(--titulo)}
.modal-cuerpo{padding:20px 24px;overflow-y:auto}
.modal-pie{display:flex;justify-content:flex-end;gap:10px;padding:14px 24px 18px;border-top:1px solid var(--linea)}
.modal-pie .boton{padding:10px 20px}
.campo{margin-bottom:16px}
.campo label{display:block;font-size:13.5px;font-weight:600;color:var(--texto);margin-bottom:6px}
.campo input,.campo select,.campo textarea{width:100%}
.campo textarea{resize:vertical;min-height:70px;font-family:inherit}
.rejilla-campos{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.rejilla-campos .ancho{grid-column:1/-1}
.pista{font-size:13.5px;color:var(--tenue);margin-top:4px}
.modal p + p{margin-top:8px}

.tabla-envoltura{overflow-x:auto;max-height:52vh;overflow-y:auto;margin-top:12px}
.tabla-simple{width:100%;border-collapse:collapse;font-size:14px}
.tabla-simple th{text-align:left;font-weight:600;color:var(--tenue);font-size:12.5px;text-transform:uppercase;
  letter-spacing:.04em;padding:8px 10px;border-bottom:1px solid var(--linea);position:sticky;top:0;background:#fff}
.tabla-simple td{padding:10px;border-bottom:1px solid var(--linea-suave)}
.acciones-fila{white-space:nowrap;text-align:right}
.acciones-fila .enlace-texto + .enlace-texto{margin-left:14px}

/* ----------------------------------------------------------- avisos */
.avisos{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom));display:flex;
  flex-direction:column;gap:8px;z-index:950}
.aviso{background:var(--titulo);color:#fff;padding:11px 16px;border-radius:var(--radio);font-size:14.5px;
  box-shadow:0 6px 20px rgba(13,27,51,.2);animation:entrar .2s ease-out;max-width:360px}
.aviso.ok{background:#1f7a47}
.aviso.error{background:var(--rojo)}
@keyframes entrar{from{opacity:0;transform:translateY(8px)}}

/* ------------------------------------------------------ impresión */
@media print{
  body{font-size:11px}
  .no-imprimir,.franja,.avisos,.col-menu,.nav-nueva,.menu-fila-lista{display:none !important}
  .cabecera{border-bottom:2px solid #000}
  .navegacion{display:none}
  .principal{padding-top:14px}
  .encabezado h1{font-size:24px}
  .tabla-ancha{margin:0;overflow:visible}
  .tabla-docs thead th{background:var(--marino) !important;color:#fff !important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact;padding:7px 8px}
  .tabla-docs tbody td{padding:6px 8px}
  .tabla-docs tbody tr:nth-child(even){background:#f3f6fb !important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .estado i{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .icono-doc{width:18px;height:18px}
  tr{break-inside:avoid}
  .pie{margin-top:16px}
  @page{size:A4 landscape;margin:12mm}
}

/* --------------------------------------------------------- pantallas medias */
@media (max-width:1100px){
  .encabezado{flex-direction:column;gap:14px}
  .encabezado-cifras{text-align:left}
  .cifras-globales{margin-left:0}
  .acciones-exportar{justify-content:flex-start}
  .filtro-listas{border-left:0;padding-left:0}
}

/* ------------------------------------------------------------- teléfono
   La tabla se vuelve una lista: cada documento ocupa su bloque, con el
   estado y la acción debajo del nombre. Una tabla de cinco columnas en un
   iPhone obliga a desplazarse de lado para leer cada fila. */
@media (max-width:760px){
  .contenedor{padding:0 18px}

  /* Franja: una sola linea. El nombre se recorta antes que partirse en dos
     y el enlace al portal se queda en lo esencial. */
  .franja-inner{min-height:48px}
  .menu-boton{max-width:62vw;font-size:14.5px}
  .menu-nombre{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

  .nav-envoltura{margin:0 -18px -1px}
  .navegacion{padding:0 9px}

  /* Filtros: los estados se desplazan dentro de su fila, sin empujar la
     pagina; las dos listas lado a lado; Limpiar en su propia linea. */
  .filtros > *{min-width:0;max-width:100%}
  .filtro-estados{width:100%;margin:0 -18px -1px;padding:0 6px;width:calc(100% + 36px)}
  /* Son cuatro y deben caber enteras: cortar 'Validados' esconde un filtro. */
  .estado-tab{padding:12px 8px 13px;font-size:14px}
  .estado-n{font-size:12px}
  .filtro-listas{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;padding:14px 0}
  .filtro-listas label{min-width:0}
  #limpiar{grid-column:1/-1;justify-self:start}
  .principal{padding-top:22px}
  .encabezado h1{font-size:30px}
  .bajada{font-size:15.5px}
  .cifras{white-space:normal;font-size:15px}
  .cifras b{font-size:21px}
  .buscar{flex-direction:column;gap:12px}
  .buscador .boton{padding:0 18px}
  #hueco-nuevo .boton{width:100%}
  .filtros{flex-direction:column;align-items:stretch;gap:0}
  .filtro-listas select{min-width:0;width:100%;font-size:16px}
  .rejilla-campos{grid-template-columns:1fr}
  .menu-perfil{display:none}
  .filtro-listas label{flex-direction:column;align-items:stretch;gap:4px;font-size:13px}

  .tabla-ancha{margin:0 -18px;overflow:visible;border-left:0;border-right:0}
  .tabla-docs thead{display:none}
  .tabla-docs,.tabla-docs tbody{display:block}
  .tabla-docs tbody tr{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center;
    padding:16px 18px;border-bottom:1px solid var(--linea)}
  .tabla-docs tbody td{display:block;padding:0 !important;border:0}
  .tabla-docs .col-num{display:none}
  /* display:block de arriba le quitaba el flex a esta celda y el icono se
     quedaba solo en una linea, encima del nombre. */
  .tabla-docs .col-doc{grid-column:1/-1;min-width:0;display:flex !important;gap:12px}
  .tabla-docs .col-doc > div{min-width:0}
  .tabla-docs .col-codigo{grid-column:1/2;font-size:13.5px;color:var(--tenue);width:auto}
  .tabla-docs .col-estado{grid-column:2/3;width:auto;justify-self:end;font-size:14px}
  .tabla-docs .col-accion{grid-column:1/2;width:auto}
  .tabla-docs .col-menu{grid-column:2/3;width:auto;justify-self:end}
  .menu-fila-lista{right:0}
  .tabla-reordenar tbody tr{display:flex;align-items:center;gap:10px}
  .tabla-reordenar .col-codigo,.tabla-reordenar .col-estado{display:none !important}
  .tabla-reordenar .col-asa{order:2;margin-left:auto}
  .tabla-reordenar .asa{width:44px;height:44px}
  .barra-reordenar-botones{width:100%}
  .barra-reordenar-botones .boton{flex:1}
  .icono-doc{width:26px;height:26px}
  .doc-nombre{font-size:15.5px}
  .paginador .pag-num{display:none}
  .paginador .pag-num.activa{display:inline-block}
  .avisos{left:16px;right:16px}
  .aviso{max-width:none}
}

/* En los telefonos mas estrechos, los cuatro estados en dos filas de dos:
   en una sola no caben legibles, y deslizar para encontrar un filtro que
   solo tiene cuatro opciones es absurdo. */
@media (max-width:420px){
  .filtro-estados{display:grid;grid-template-columns:1fr 1fr;margin:0 0 -1px;padding:0;width:100%;
    overflow:visible}
  .estado-tab{text-align:left;padding:11px 4px 12px;font-size:14.5px}
}

/* Donde se toca con el dedo: campos a 16 px, o Safari de iPhone amplía la
   página al tocarlos y no vuelve; y objetivos de al menos 44 px. */
@media (pointer:coarse){
  input,select,textarea{font-size:16px !important}
  .nav-item,.estado-tab{min-height:44px}
  .menu-fila{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .paginador button{min-height:44px;min-width:44px}
  .enlace-texto,.accion-enlace{min-height:32px}
}

/* ---------------------------------------------------------------- ingreso
   Misma pantalla de acceso que el Sistema de Gestión de Proyectos, para que
   quien use ambas aplicaciones reconozca de inmediato dónde se identifica. */
.cuerpo-acceso{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,#173d5e,#1F4E79 55%,#2E75B6);padding:20px}
.acceso{display:grid;grid-template-columns:1.05fr .95fr;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 26px 70px rgba(0,0,0,.35);max-width:900px;width:100%}
.acceso-marca{background:linear-gradient(160deg,#173d5e,#20567f);color:#dbe6f0;padding:38px 34px;display:flex;flex-direction:column;justify-content:center}
.marca-escudo{width:40px;height:40px;border-radius:9px;background:#C9A227;color:#2b2000;display:flex;align-items:center;justify-content:center;font-weight:700;letter-spacing:.5px;flex:0 0 auto}
.marca-escudo.grande{width:60px;height:60px;border-radius:13px;font-size:17px;margin-bottom:18px}
.acceso-marca h1{font-size:21px;color:#fff;margin:0 0 4px;line-height:1.25}
.acceso-marca p{margin:0 0 22px;color:#a9c3da;font-size:13px}
.acceso-marca ul{margin:0;padding-left:18px;font-size:13px;line-height:1.9;color:#c6d8e8}
.acceso-formulario{padding:38px 34px;display:flex;flex-direction:column;justify-content:center}
.acceso-formulario h2{margin:0 0 4px;font-size:19px;color:#1F4E79}
.acceso-formulario .sutil{margin-bottom:20px;color:#6b7486;font-size:13.5px}
.mensaje-acceso{padding:10px 13px;border-radius:9px;font-size:13px;margin-bottom:14px;border-left:3px solid}
.mensaje-acceso.error{background:#FDF0EE;border-color:#C0392B;color:#96271b}
.mensaje-acceso.ok{background:#E3F5EA;border-color:#1e7f4f;color:#1c6b41}
.mensaje-acceso.aviso{background:#FFF8EC;border-color:#e07b18;color:#8a5a00}
.mensaje-acceso.oculto{display:none}
.pie-acceso{margin-top:20px;font-size:11.5px;line-height:1.6}
.acceso-formulario .campo{margin-bottom:14px}
.acceso-formulario .campo label{display:block;font-size:12.5px;margin-bottom:5px;font-weight:600}
.acceso-formulario .campo input{width:100%;padding:9px 11px;border:1px solid #cfd8e3;border-radius:8px;font-size:14px;font-family:inherit}
.acceso-formulario .campo input:focus{outline:2px solid #1F4E79;outline-offset:1px;border-color:transparent;box-shadow:none}
/* El botón de ingreso usaba .boton.primario, que no estaba definido en esta
   hoja: se veía como un botón por defecto del navegador. */
.acceso-formulario .boton.primario{background:#1F4E79;border-radius:8px;padding:11px 18px;font-size:15px}
.acceso-formulario .boton.primario:hover{background:#173d5e}
.ancho-total{width:100%}
@media (max-width:760px){.acceso{grid-template-columns:1fr}.acceso-marca{display:none}}

/* ================================================================ paletas
   Cada paleta redefine solo los colores de marca: la franja, los botones,
   los enlaces y la cabecera de la tabla. El texto y las líneas no cambian,
   para que todas se lean igual de bien. La paleta se aplica con el atributo
   data-paleta en <html>; la elige la pestaña activa, el repositorio o el
   sitio, en ese orden. Las muestras del selector usan los mismos valores. */
:root[data-paleta="verde"],   .muestra[data-paleta="verde"]   {--azul:#1f7a47;--azul-hover:#165c35;--marino:#123d27}
:root[data-paleta="vino"],    .muestra[data-paleta="vino"]    {--azul:#8a1e3c;--azul-hover:#6d162f;--marino:#4a1022}
:root[data-paleta="pizarra"], .muestra[data-paleta="pizarra"] {--azul:#3d4f66;--azul-hover:#2c3a4d;--marino:#1f2a38}
:root[data-paleta="ocre"],    .muestra[data-paleta="ocre"]    {--azul:#9a6a0b;--azul-hover:#7a5408;--marino:#4f3706}
:root[data-paleta="morado"],  .muestra[data-paleta="morado"]  {--azul:#5b3fa6;--azul-hover:#47317f;--marino:#2f2157}
:root[data-paleta="turquesa"],.muestra[data-paleta="turquesa"]{--azul:#0f7c8c;--azul-hover:#0b606c;--marino:#0a4048}
.muestra[data-paleta="azul"]{--azul:#1447c7;--marino:#0f2b57}

/* Selector de paleta: una fila de muestras con su nombre. */
.paletas{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:4px}
.paleta-opcion{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--texto);cursor:pointer;
  border:1px solid var(--linea);border-radius:var(--radio);padding:6px 10px 6px 8px}
.paleta-opcion:has(input:checked){border-color:var(--azul);box-shadow:0 0 0 2px rgba(20,71,199,.15);font-weight:600}
.paleta-opcion input{width:auto;margin:0}
.muestra{display:inline-block;width:22px;height:22px;border-radius:4px;flex:0 0 auto;
  background:linear-gradient(135deg,var(--azul) 50%,var(--marino) 50%)}
.muestra-mini{width:12px;height:12px;border-radius:3px;vertical-align:-1px;margin-right:6px}
.muestra-heredada{background:repeating-linear-gradient(135deg,#dde3ec 0 4px,#fff 4px 8px);border:1px solid var(--linea)}

/* ------------------------------------------------------ repositorio */
.selector-repo{position:relative;min-width:0;display:flex;align-items:center}
.repo-actual{display:flex;flex-direction:column;line-height:1.15;color:#fff;padding:6px 0}
.repo-etiqueta{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:#c3d1f5;font-weight:500;
  line-height:1.2}
.repo-boton{padding:6px 2px;gap:8px;text-align:left;min-width:0;align-items:center}
.repo-texto{display:flex;flex-direction:column;min-width:0}
.repo-nombre{display:block;font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw;
  line-height:1.2}
.menu-repos{left:0;right:auto;min-width:280px;max-width:min(420px,92vw)}
.menu-repos button{display:flex;align-items:center;gap:8px}
.menu-repos button.activo{color:var(--azul);font-weight:600;background:var(--cebra)}
.repo-item-nombre{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.repo-item-cifra{font-size:12.5px;color:var(--tenue);flex:0 0 auto}

/* ------------------------------------------------------- archivos */
.acciones-doc{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.doc-archivo{display:block;font-size:13px;color:var(--tenue);margin-top:3px;overflow-wrap:anywhere}
.doc-archivo-tamano{color:#9aa3b2;margin-left:4px}
.archivo-actual{font-size:14px;color:var(--texto);margin-bottom:8px;line-height:1.5}
.pista-inline{display:block;font-size:13px;color:var(--tenue)}
.quitar-archivo{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:var(--rojo);margin-top:4px;
  font-weight:500;cursor:pointer}
.quitar-archivo input{width:auto;margin:0}
.campo input[type=file]{padding:8px;font-size:14px;background:var(--cebra);cursor:pointer}
.campo input[type=file]::file-selector-button{font:inherit;font-size:14px;font-weight:600;color:var(--azul);
  background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:6px 12px;margin-right:12px;cursor:pointer}

/* ---------------------------------------------- usuarios: repositorios */
.lista-proyectos{display:flex;flex-direction:column;gap:2px;max-height:220px;overflow-y:auto;
  border:1px solid var(--linea);border-radius:var(--radio);padding:6px 8px;margin-top:4px}
.fila-proyecto{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:400;color:var(--texto);
  padding:6px 4px;cursor:pointer;border-radius:var(--radio)}
.fila-proyecto:hover{background:var(--cebra)}
.fila-proyecto input{width:auto;margin:0}
.fila-proyecto-nota{margin-left:auto;font-size:12px;color:var(--tenue)}
.celda-alcance{max-width:260px;font-size:13px;color:var(--tenue)}
.campo .pista{margin-top:6px}

/* Los avisos se desvanecen con una clase, no con estilos en línea: la
   política de seguridad de la página no admite estilos en línea. */
.aviso.se-va{opacity:0;transition:opacity .3s}

@media (max-width:760px){
  .repo-nombre{max-width:52vw;font-size:14px}
  .repo-etiqueta{font-size:10.5px}
  .franja-inner{gap:8px}
  .menu-repos{left:-6px}
  .paleta-opcion{font-size:13px;padding:5px 8px 5px 6px}
  .celda-alcance{max-width:160px}
}

/* ------------------------------------------------- versiones y ficha */
.doc-version{display:inline-block;font-size:12px;font-weight:600;color:var(--azul);background:#eef2fb;
  border-radius:3px;padding:1px 6px;margin-left:8px;vertical-align:1px;letter-spacing:.01em}
.ficha{display:grid;grid-template-columns:1fr 1fr;gap:10px 22px;font-size:14.5px}
.ficha dt{font-size:12.5px;color:var(--tenue);text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.ficha dd{margin:2px 0 0;color:var(--titulo);overflow-wrap:anywhere}
.ficha .ancho{grid-column:1/-1}
.ficha-acciones{display:flex;flex-wrap:wrap;gap:10px 18px;margin:14px 0 4px}
.ficha h3{font-size:15px;font-weight:700;color:var(--titulo);margin:18px 0 8px;grid-column:1/-1;
  border-top:1px solid var(--linea);padding-top:14px}
.versiones{list-style:none;margin:0;padding:0;border:1px solid var(--linea);border-radius:var(--radio)}
.versiones li{display:grid;grid-template-columns:auto 1fr auto;gap:4px 14px;align-items:start;padding:10px 14px;
  border-bottom:1px solid var(--linea-suave)}
.versiones li:last-child{border-bottom:0}
.versiones li.vigente{background:var(--cebra)}
.version-numero{font-weight:700;color:var(--azul);font-variant-numeric:tabular-nums;white-space:nowrap;min-width:52px}
.version-nota{color:var(--titulo);font-size:14.5px}
.version-meta{display:block;font-size:12.5px;color:var(--tenue);margin-top:2px}
.version-archivo{display:block;font-size:13px;margin-top:4px;color:var(--texto)}
.version-acciones{white-space:nowrap;display:flex;gap:12px;align-items:center}
.version-acciones .enlace-texto{font-size:13.5px}
.vigente-etiqueta{font-size:11px;font-weight:700;color:#fff;background:var(--verde);border-radius:3px;
  padding:1px 6px;margin-left:6px;vertical-align:1px}

/* QR: se ve solo en su ventana, nunca en la tabla. */
.qr-caja{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap}
.qr-imagen{width:220px;height:220px;flex:0 0 auto;border:1px solid var(--linea);border-radius:var(--radio);
  background:#fff;padding:6px}
.qr-imagen img{width:100%;height:100%;display:block;image-rendering:pixelated}
.qr-detalle{flex:1 1 240px;min-width:0;font-size:14.5px}
.qr-detalle .enlace-qr{display:block;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;
  color:var(--titulo);background:var(--cebra);border-radius:var(--radio);padding:8px 10px;margin:8px 0 12px;
  overflow-wrap:anywhere}
.qr-botones{display:flex;flex-wrap:wrap;gap:10px}
.qr-botones .boton{padding:9px 16px;font-size:14px}

@media (max-width:760px){
  .ficha{grid-template-columns:1fr}
  .versiones li{grid-template-columns:auto 1fr}
  .version-acciones{grid-column:1/-1;justify-content:flex-start}
  .qr-caja{justify-content:center}
}
@media print{
  .doc-version{border:1px solid #999;background:none;color:#000}
}

/* ------------------------------------------ barra de pestañas resaltada
   Las pestañas temáticas iban subrayadas sobre fondo blanco y costaba
   encontrarlas. Ahora van en una banda gris con rótulo, y la activa se
   destaca en blanco con el borde de color. */
.nav-rotulo{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--tenue);
  font-weight:600;margin:14px 0 4px}
.nav-envoltura{position:relative;margin:0 0 -1px;background:var(--cebra);border:1px solid var(--linea);
  border-radius:6px;padding:4px 6px}
.navegacion{gap:2px}
.nav-item{border:1px solid transparent;border-radius:5px;padding:9px 13px;font-size:14.5px;font-weight:500}
.nav-item:hover{background:#fff;color:var(--azul)}
.nav-item.activa{background:#fff;border-color:var(--linea);border-bottom:3px solid var(--azul);color:var(--azul);
  font-weight:700;box-shadow:0 1px 2px rgba(13,27,51,.06)}
.nav-flecha{top:4px;bottom:4px;border-radius:5px}
.nav-izquierda{background:linear-gradient(90deg,var(--cebra) 55%,rgba(243,246,251,0))}
.nav-derecha{background:linear-gradient(270deg,var(--cebra) 55%,rgba(243,246,251,0))}
.cabecera .contenedor{gap:0;padding-bottom:12px}
.marca strong{font-size:28px}
@media (max-width:760px){
  .nav-envoltura{margin:0 0 -1px}
  .navegacion{padding:0}
  .marca strong{font-size:23px}
  .nav-item{padding:9px 11px;font-size:14px}
}

/* ------------------------------------------------- buscar por codigo QR */
.boton-qr{flex:0 0 auto;gap:8px;padding:0 16px}
.boton-qr svg{width:20px;height:20px}
.qr-codigo{font-size:14px;color:var(--texto);margin:0 0 12px}
.qr-codigo b,.codigo-consulta{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:15px;letter-spacing:.08em;
  color:var(--titulo);background:var(--cebra);border-radius:3px;padding:1px 6px}
.qr-pegar{display:flex;gap:8px}
.qr-pegar input{flex:1 1 auto;min-width:0}
.qr-pegar .boton{padding:9px 16px;flex:0 0 auto}
.casilla{display:flex;align-items:flex-start;gap:8px;font-size:14px;font-weight:400;color:var(--texto);margin-top:10px;cursor:pointer}
.casilla input{width:auto;margin:3px 0 0}
@media (max-width:760px){
  .buscar{flex-direction:column}
  .boton-qr{width:100%;justify-content:center;padding:12px}
}

.bloque-paleta{border:1px solid var(--linea);border-radius:var(--radio);padding:12px 14px}
.bloque-paleta > label{margin-bottom:8px}
.bloque-paleta .nota-aviso{margin:10px 0 0}

/* ------------------------------------------------- quién está en línea
   Círculos con iniciales en la franja, como en el gestor de proyectos. */
.en-linea{display:flex;align-items:center;gap:2px;margin-left:auto;flex:0 0 auto}
.menu-usuario{margin-left:14px}
.en-linea-cuenta,.en-linea-solo{display:inline-flex;align-items:center;gap:5px;margin-right:8px;font-size:12.5px;color:#dbe4fb;white-space:nowrap}
.punto-vivo{width:7px;height:7px;border-radius:50%;background:#5ee39a;flex:none;box-shadow:0 0 0 2px rgba(94,227,154,.25)}
.ficha-persona{position:relative;display:inline-flex;outline:none}
.circulo{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;color:#fff;font-size:11.5px;font-weight:700;
  letter-spacing:.3px;border:2px solid rgba(255,255,255,.85);margin-left:-6px;user-select:none;cursor:default;background:var(--marino)}
.circulo.mas{background:rgba(255,255,255,.25);color:#fff}
.ficha-persona:first-of-type .circulo{margin-left:0}
.tarjeta-persona{position:absolute;top:calc(100% + 8px);right:0;z-index:70;display:none;flex-direction:column;gap:2px;background:var(--titulo);color:#fff;
  padding:8px 11px;border-radius:var(--radio);box-shadow:0 4px 16px rgba(12,24,36,.28);white-space:nowrap;font-size:12.5px;font-weight:400;text-align:left}
.tarjeta-persona b{font-size:13px}
.tarjeta-persona .sutil{color:#b9c8d6;font-size:11.5px}
.ficha-persona:hover .tarjeta-persona,.ficha-persona:focus .tarjeta-persona,.ficha-persona:focus-within .tarjeta-persona{display:flex}
@media (max-width:760px){
  .en-linea-cuenta span:not(.punto-vivo),.en-linea-solo{font-size:0}
  .en-linea-solo .punto-vivo{margin-right:0}
  .circulo{width:27px;height:27px;font-size:10.5px}
  .tarjeta-persona{white-space:normal;max-width:62vw}
  .menu-usuario{margin-left:8px}
}

/* --------------------------------------- enlace con el gestor de proyectos */
.doc-gestor{display:block;font-size:12.5px;color:var(--azul);margin-top:3px;overflow-wrap:anywhere}
.doc-gestor::before{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--azul);margin-right:6px;vertical-align:0}
.entregable-buscar{display:flex;flex-direction:column;gap:6px}
.entregable-buscar select{font-size:14px;padding:4px 6px}
.entregable-buscar option{padding:4px 6px}
.entregable-ficha p{margin:0 0 4px}
.entregable-ficha .pista-inline{margin-top:2px}
.lista-adjuntos-gestor{list-style:none;margin:8px 0 0;padding:0}
.lista-adjuntos-gestor li{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:6px 0;border-top:1px solid var(--linea-suave);font-size:14px}
.lista-adjuntos-gestor li > span{min-width:0;overflow-wrap:anywhere}
.lista-adjuntos-gestor .enlace-texto{white-space:nowrap;font-size:13.5px}