/* ============================================================
   Fuentes (self-hosteadas en /fonts, subset latin de Google Fonts)
   font-display: optional evita el layout shift: si la fuente no está
   lista al primer render se usa la del sistema y no se cambia después.
   ============================================================ */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 700; /* fuente variable: un archivo cubre todos los pesos */
  font-display: optional;
  src: url(/fonts/ibm-plex-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url(/fonts/ibm-plex-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url(/fonts/ibm-plex-mono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url(/fonts/ibm-plex-mono-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   Variables de diseño
   ============================================================ */
:root {
  --acento: #2f5fa8;
  --acento-suave: color-mix(in oklab, var(--acento) 12%, #ffffff);
  --acento-oscuro: color-mix(in oklab, var(--acento) 78%, #101512);
  --peligro: #b23a30;
  --peligro-oscuro: #93291f;
  --fondo: #f2f1ed;
  --tinta: #20241f;
  --tenue: #71766e;
  --borde: #e2dfd7;
  --borde-fila: #efece5;
  --fondo-cabecera-tabla: #fafaf7;
  --fondo-fila-hover: #f8f8f4;
  --relleno-celda: 7px 14px;
  --fuente: 'IBM Plex Sans', system-ui, sans-serif;
  --fuente-mono: 'IBM Plex Mono', ui-monospace, monospace;
  /* Barra lateral (tema oscuro) */
  --lateral-fondo: #1c2b27;
  --lateral-texto: #c6d2cb;
  --lateral-atenuado: #6f7f78;
  --lateral-destacado: #ffffff;
  --lateral-borde: rgba(255, 255, 255, .09);
  --lateral-hover: rgba(255, 255, 255, .06);
  --lateral-activo-fondo: color-mix(in oklab, var(--acento) 55%, #1c2b27);
  --lateral-titulo: #5f6f68;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 13.5px;
  background: var(--fondo);
  color: var(--tinta);
}

button { font-family: inherit; }
input, select, textarea { font-family: inherit; }

/* ============================================================
   Estructura general
   ============================================================ */
.aplicacion { display: flex; min-height: 100vh; align-items: stretch; }

.zona-principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.contenido {
  padding: 26px 30px 70px;
  max-width: 1140px;
  width: 100%;
  margin: 0 auto;
}

.pantalla[hidden] { display: none; }

/* ============================================================
   Barra lateral
   ============================================================ */
.barra-lateral {
  width: 252px;
  flex: none;
  background: var(--lateral-fondo);
  display: flex;
  flex-direction: column;
}

.marca {
  cursor: pointer;
  padding: 16px 16px 14px;
  display: flex;
  gap: 11px;
  align-items: center;
  border-bottom: 1px solid var(--lateral-borde);
}

.logotipo {
  width: 34px; height: 34px; flex: none;
  border-radius: 8px;
  background: var(--acento);
  color: #ffffff;
  display: flex; align-items: center; justify-content: center;
  font: 600 15px var(--fuente-mono);
  letter-spacing: -.05em;
}

.marca-nombre { font: 600 14.5px/1.2 var(--fuente); color: var(--lateral-destacado); }
.marca-subtitulo {
  font: 500 10.5px/1.3 var(--fuente-mono);
  color: var(--lateral-atenuado);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.menu { padding: 10px 10px 24px; display: flex; flex-direction: column; gap: 14px; }

.menu-titulo {
  font: 600 10.5px var(--fuente-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lateral-titulo);
  padding: 0 10px;
  margin: 0 0 5px;
}

.menu-opciones { display: flex; flex-direction: column; gap: 1px; }

.menu-opcion {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.4;
  cursor: pointer;
  color: var(--lateral-texto);
}
.menu-opcion:hover { background: var(--lateral-hover); }
.menu-opcion.activa {
  background: var(--lateral-activo-fondo);
  color: var(--lateral-destacado);
  font-weight: 600;
}
.menu-opcion.deshabilitada { color: var(--lateral-atenuado); cursor: default; }
.menu-opcion.deshabilitada:hover { background: transparent; }
.menu-opcion .marca-no-disponible { font-size: 11px; opacity: .55; }

/* ============================================================
   Encabezado superior
   ============================================================ */
.encabezado {
  background: #ffffff;
  border-bottom: 1px solid var(--borde);
  padding: 10px 30px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  position: sticky; top: 0; z-index: 5;
}

.miga-de-pan { font: 500 12.5px var(--fuente-mono); color: var(--tenue); }

.sesion { display: flex; align-items: center; gap: 14px; }
.sesion-usuario { display: flex; align-items: center; gap: 10px; }

.avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--acento-suave);
  color: var(--acento-oscuro);
  display: flex; align-items: center; justify-content: center;
  font: 600 12px var(--fuente);
}

.sesion-nombre { font: 600 13px/1.2 var(--fuente); }
.sesion-perfil { font: 400 11.5px/1.3 var(--fuente); color: var(--tenue); }
.sesion-separador { width: 1px; height: 26px; background: var(--borde); }

.boton-salir {
  background: none;
  border: 1px solid var(--borde);
  border-radius: 7px;
  padding: 6px 13px;
  font: 500 12.5px var(--fuente);
  color: #454b44;
  cursor: pointer;
}
.boton-salir:hover { background: #f5f4f0; border-color: #cdc9bf; }

/* ============================================================
   Cabecera de cada pantalla
   ============================================================ */
.cabecera-pantalla {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px;
  margin: 0 0 18px;
}

h1 { margin: 0; font: 600 21px/1.25 var(--fuente); letter-spacing: -.01em; }
.pantalla-inicio h1 { font-size: 24px; }

.subtitulo { margin: 5px 0 0; color: var(--tenue); font-size: 13.5px; }
.subtitulo.con-margen { margin-bottom: 20px; }

.acciones-cabecera { display: flex; gap: 10px; flex: none; }

/* ============================================================
   Botones y enlaces de acción
   ============================================================ */
.boton-primario {
  background: var(--acento);
  color: #ffffff;
  border: none;
  border-radius: 7px;
  padding: 9px 16px;
  font: 600 13px var(--fuente);
  cursor: pointer;
  flex: none;
}
.boton-primario:hover { background: var(--acento-oscuro); }
.boton-primario.grande { padding: 10px 20px; }
.boton-primario.ancho-completo { width: 100%; }

.boton-secundario {
  background: #ffffff;
  border: 1px solid var(--borde);
  border-radius: 7px;
  padding: 8px 15px;
  font: 500 13px var(--fuente);
  color: #2a2f2a;
  cursor: pointer;
}
.boton-secundario:hover { background: #f5f4f0; }

.boton-peligro {
  background: var(--peligro);
  border: none;
  border-radius: 7px;
  padding: 8px 15px;
  font: 600 13px var(--fuente);
  color: #ffffff;
  cursor: pointer;
}
.boton-peligro:hover { background: var(--peligro-oscuro); }

.boton-eliminar-multiples {
  background: #ffffff;
  border: 1px solid var(--borde);
  border-radius: 7px;
  padding: 8px 14px;
  font: 600 13px var(--fuente);
  color: #c2bfb6;
  cursor: default;
}
.boton-eliminar-multiples.habilitado {
  border-color: var(--peligro);
  color: var(--peligro);
  cursor: pointer;
}

.enlace-accion {
  background: none; border: none; padding: 0;
  font: 500 12.5px var(--fuente);
  cursor: pointer;
}
.enlace-accion:hover { text-decoration: underline; }
.enlace-editar { color: var(--acento-oscuro); margin-right: 14px; }
.enlace-eliminar { color: var(--peligro); }

.enlace-volver {
  display: inline-block;
  background: none; border: none; padding: 0;
  color: var(--acento-oscuro);
  font: 500 13px var(--fuente);
  cursor: pointer;
  margin: 0 0 12px;
}
.enlace-volver:hover { text-decoration: underline; }

.enlace-cancelar {
  background: none; border: none; padding: 0;
  color: var(--tenue);
  font: 500 13px var(--fuente);
  cursor: pointer;
}
.enlace-cancelar:hover { color: var(--tinta); }

/* ============================================================
   Tarjetas
   ============================================================ */
.tarjeta {
  background: #ffffff;
  border: 1px solid var(--borde);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(24, 28, 24, .04);
}
.tarjeta.con-relleno { padding: 22px 24px; }
.tarjeta.con-relleno-medio { padding: 20px 22px; }
.tarjeta.con-desborde { overflow-x: auto; }

.titulo-grupo {
  font: 600 11px var(--fuente-mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--acento-oscuro);
  margin: 0 0 12px;
}

.titulo-tarjeta {
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--borde-fila);
  font: 600 13.5px var(--fuente);
}
.titulo-tarjeta .aclaracion { font: 500 12px var(--fuente-mono); color: var(--tenue); }

/* ============================================================
   Inicio: grilla de módulos
   ============================================================ */
.grilla-modulos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
  margin-top: 26px;
}

.modulo { padding: 16px 18px 12px; }

.modulo-titulo {
  font: 600 11px var(--fuente-mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--acento-oscuro);
  margin: 0 0 10px;
}

.modulo-opciones { display: flex; flex-direction: column; }

.modulo-opcion {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 8px;
  margin: 0 -8px;
  border-radius: 6px;
  font-size: 13.5px;
  cursor: pointer;
  color: var(--acento-oscuro);
  font-weight: 500;
}
.modulo-opcion::after {
  content: "→";
  font: 500 12px var(--fuente-mono);
  color: #b3b0a7;
}
.modulo-opcion:hover { background: #f7f6f2; }
.modulo-opcion.deshabilitada { color: #b3b0a7; font-weight: 400; cursor: default; }
.modulo-opcion.deshabilitada::after { content: none; }
.modulo-opcion.deshabilitada:hover { background: transparent; }
.modulo-opcion .indicador { font: 500 11px var(--fuente-mono); color: #b3b0a7; }

/* ============================================================
   Tablas
   ============================================================ */
.tabla { width: 100%; border-collapse: collapse; }

.tabla th {
  text-align: left;
  font: 600 11px var(--fuente);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tenue);
  padding: 9px 14px;
  border-bottom: 1px solid var(--borde);
  background: var(--fondo-cabecera-tabla);
  white-space: nowrap;
}
.tabla th.columna-amplia { width: 38%; white-space: normal; }
.tabla th.columna-titulo { width: 52%; white-space: normal; }
.tabla th.columna-acciones { text-align: right; }
.tabla th.columna-seleccion { width: 34px; padding: 9px 8px 9px 14px; }

.tabla th.ordenable { cursor: pointer; user-select: none; }
.tabla th.ordenable:hover { color: var(--tinta); }
.tabla th .flecha-orden { color: var(--acento-oscuro); }

.tabla td {
  padding: var(--relleno-celda);
  border-bottom: 1px solid var(--borde-fila);
  font-size: 13px;
}
.tabla tbody tr:hover { background: var(--fondo-fila-hover); }
.tabla tbody tr.seleccionada { background: var(--acento-suave); }

.tabla td.celda-acciones { text-align: right; white-space: nowrap; }
.tabla td.celda-fecha { white-space: nowrap; }

.celda-mono { font: 500 12.5px var(--fuente-mono); }
.celda-mono-tenue { font: 400 12.5px var(--fuente-mono); color: var(--tenue); }
.celda-mono-normal { font: 400 12.5px var(--fuente-mono); }
.celda-clave { font: 400 12.5px var(--fuente-mono); color: #b3b0a7; letter-spacing: .1em; }
.celda-archivo { font: 400 12px var(--fuente-mono); color: var(--acento-oscuro); }
.celda-correo { font: 400 12.5px var(--fuente-mono); color: var(--acento-oscuro); }

.estado-vacio {
  padding: 36px 14px !important;
  text-align: center;
  color: var(--tenue);
  font-size: 13.5px;
}

/* Insignias de estado (Clasifarma) */
.insignia {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 99px;
  font: 600 11px var(--fuente);
  letter-spacing: .02em;
}
.insignia.publicado { background: #e2efe6; color: #1f5c38; }
.insignia.pendiente { background: #fbf0da; color: #8a5b12; }

/* Paginación */
.paginacion {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  background: var(--fondo-cabecera-tabla);
  border-top: 1px solid var(--borde-fila);
}

.boton-paginacion {
  padding: 6px 12px;
  border: 1px solid var(--borde);
  border-radius: 6px;
  background: #ffffff;
  font: 500 12.5px var(--fuente);
  color: #2a2f2a;
  cursor: pointer;
}
.boton-paginacion:disabled { color: #c2bfb6; cursor: default; }

.indicador-pagina { font: 500 12px var(--fuente-mono); color: var(--tenue); }

/* ============================================================
   Formularios
   ============================================================ */
.formulario-grilla { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.campo-completo { grid-column: 1 / -1; }

.campo label, .campo .etiqueta {
  display: block;
  font: 600 12px var(--fuente);
  color: #454b44;
  margin: 0 0 6px;
}
.nota-etiqueta { font: 400 11px var(--fuente); color: #a4a89e; }

.campo input[type="text"],
.campo input[type="password"],
.campo input[type="email"],
.campo input[type="date"],
.campo select,
.campo textarea {
  width: 100%;
  border: 1px solid #d8d5cc;
  border-radius: 7px;
  padding: 8px 10px;
  font: 400 13.5px var(--fuente);
  background: #ffffff;
  color: var(--tinta);
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-suave);
}
.campo input[readonly] {
  border-color: #e4e1d8;
  background: #f4f3ee;
  color: #84887f;
  font: 400 13px var(--fuente-mono);
}
.campo input.entrada-mono, .campo input[type="date"] { font: 400 13px var(--fuente-mono); }
.campo textarea { resize: vertical; }

.entrada-cuit {
  font: 500 15px var(--fuente-mono) !important;
  letter-spacing: .06em;
  padding: 9px 11px !important;
}

.casilla {
  display: flex; align-items: center; gap: 9px;
  font: 400 13px var(--fuente);
  cursor: pointer;
  padding: 4px 2px;
}
.casilla input[type="checkbox"] {
  width: 15px; height: 15px;
  accent-color: var(--acento);
  cursor: pointer;
}

.grupo-servicios { margin: 24px 0 0; border-top: 1px solid var(--borde-fila); padding: 18px 0 0; }
.grupo-servicios .titulo-grupo { margin-bottom: 4px; }
.grupo-servicios .descripcion-grupo { margin: 0 0 12px; color: var(--tenue); font-size: 12.5px; }
.lista-servicios { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; }

.acciones-formulario { margin: 22px 0 0; display: flex; align-items: center; gap: 14px; }

/* Código de disposición: "1234 / 2026" */
.grupo-codigo { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.grupo-codigo .campo-codigo { width: 150px; }
.grupo-codigo .campo-anio { width: 120px; }
.grupo-codigo .separador-codigo { font: 600 16px var(--fuente-mono); color: #b3b0a7; padding: 0 0 9px; }
.grupo-codigo .vista-previa { font: 400 12.5px var(--fuente); color: var(--tenue); padding: 0 0 10px; }
.grupo-codigo .vista-previa strong { font: 500 12.5px var(--fuente-mono); color: var(--tinta); }

/* Zona de carga de archivos */
.zona-archivo {
  border: 1.5px dashed #cdc9bf;
  border-radius: 8px;
  padding: 14px 16px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: #fbfbf8;
}

.boton-archivo {
  background: #ffffff;
  border: 1px solid var(--borde);
  border-radius: 7px;
  padding: 7px 14px;
  font: 500 12.5px var(--fuente);
  color: #2a2f2a;
  cursor: pointer;
  flex: none;
  white-space: nowrap;
}
.boton-archivo:hover { background: #f5f4f0; }
.boton-archivo input[type="file"] { display: none; }

.nombre-archivo {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--acento-suave);
  color: var(--acento-oscuro);
  border-radius: 6px;
  padding: 5px 10px;
  font: 500 12px var(--fuente-mono);
}
.nombre-archivo .aclaracion { opacity: .6; }

.ayuda-archivo { font: 400 12.5px var(--fuente); color: var(--tenue); }

/* ============================================================
   Pantallas con disposición particular
   ============================================================ */
.ancho-formulario { max-width: 820px; }
.ancho-formulario-medio { max-width: 720px; }
.ancho-formulario-angosto { max-width: 560px; }

/* CUITS: formulario + listado lado a lado */
.disposicion-cuits {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 18px;
  align-items: start;
}
.disposicion-cuits .campo + .casilla { margin-top: 12px; }
.disposicion-cuits .boton-primario { margin-top: 16px; }

/* IPO: grilla del formulario de alta */
.formulario-ipo {
  display: grid;
  grid-template-columns: 110px 1fr 110px 170px;
  gap: 14px 16px;
}
.formulario-ipo .campo-descripcion { grid-column: 1 / 3; }
.formulario-ipo .campo-envio { grid-column: 3 / -1; display: flex; align-items: flex-end; gap: 12px; }
.formulario-ipo .campo-envio .boton-primario { flex: 1; }

/* Novedades: ficha del archivo publicado */
.ficha-archivo { display: grid; grid-template-columns: 180px 1fr; }
.ficha-archivo > div { padding: 11px 16px; border-bottom: 1px solid var(--borde-fila); }
.ficha-archivo > div:nth-last-child(-n+2) { border-bottom: none; }
.ficha-archivo .ficha-etiqueta { font: 600 12px var(--fuente); color: var(--tenue); }
.ficha-archivo .ficha-valor { font: 400 12.5px var(--fuente-mono); }

.margen-inferior { margin-bottom: 18px; }

/* ============================================================
   Mensajes de éxito / error / información
   ============================================================ */
.mensaje {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  border-radius: 8px;
  margin: 0 0 20px;
  font: 500 13px var(--fuente);
  animation: aparecer-mensaje .25s ease;
}
.mensaje.exito { background: #e6f2ea; border: 1px solid #bfdccb; color: #1f5c38; }
.mensaje.error { background: #f9e9e6; border: 1px solid #eac4bd; color: #8f2f26; }
.mensaje.informacion { background: #eceef2; border: 1px solid #d3d7de; color: #3b4450; }

.mensaje .icono { font: 600 13px var(--fuente-mono); }
.mensaje .texto { flex: 1; }
.mensaje .cerrar {
  background: none; border: none;
  cursor: pointer;
  opacity: .55;
  font: 400 15px var(--fuente-mono);
  color: inherit;
  padding: 0 2px;
}
.mensaje .cerrar:hover { opacity: 1; }

@keyframes aparecer-mensaje {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: none; }
}

/* ============================================================
   Ventana de confirmación
   ============================================================ */
.telon {
  position: fixed; inset: 0;
  background: rgba(18, 24, 20, .46);
  display: flex; align-items: center; justify-content: center;
  z-index: 50;
}
.telon[hidden] { display: none; }

.ventana-confirmacion {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(10, 16, 12, .28);
  width: 400px;
  max-width: calc(100vw - 48px);
  padding: 22px 24px;
  animation: aparecer-ventana .18s ease;
}

.ventana-confirmacion h2 { margin: 0 0 8px; font: 600 15.5px var(--fuente); }
.ventana-confirmacion p { margin: 0 0 18px; font: 400 13.5px/1.5 var(--fuente); color: #4a5049; }
.ventana-confirmacion .acciones { display: flex; justify-content: flex-end; gap: 10px; }

@keyframes aparecer-ventana {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to { opacity: 1; transform: none; }
}

/* ============================================================
   Adaptaciones SSR (plantillas Go, no SPA)
   ============================================================ */
html, body { min-height: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { appearance: none; }

a.boton-primario,
a.boton-secundario,
a.boton-salir,
a.boton-paginacion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-sizing: border-box;
}

a.menu-opcion { text-decoration: none; }
a.marca { text-decoration: none; color: inherit; }

/* Campos: label.campo con span (convención de plantillas) */
.campo {
  display: block;
  min-width: 0;
}
.campo > span,
label.campo > span {
  display: block;
  font: 600 12px var(--fuente);
  color: #454b44;
  margin: 0 0 6px;
}
.campo input[type="number"],
.campo input[type="file"],
.campo input:not([type]),
label.campo input[type="text"],
label.campo input[type="password"],
label.campo input[type="email"],
label.campo input[type="date"],
label.campo input[type="number"],
label.campo input[type="file"],
label.campo select,
label.campo textarea {
  width: 100%;
  border: 1px solid #d8d5cc;
  border-radius: 7px;
  padding: 8px 10px;
  font: 400 13.5px var(--fuente);
  background: #ffffff;
  color: var(--tinta);
}
.campo input[type="file"] { padding: 6px 8px; }
.campo input:focus,
.campo select:focus,
.campo textarea:focus,
label.campo input:focus,
label.campo select:focus,
label.campo textarea:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-suave);
}
.campo input[readonly],
label.campo input[readonly] {
  border-color: #e4e1d8;
  background: #f4f3ee;
  color: #84887f;
  font: 400 13px var(--fuente-mono);
}

/* Filtros de listado (agenda) */
.formulario-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 16px;
  align-items: flex-end;
  margin: 0 0 18px;
}
.formulario-filtros .campo { min-width: 200px; flex: 1; }
.formulario-filtros .boton-secundario { flex: none; }

/* Pie de tabla con acciones (orden, eliminar múltiples) */
.acciones-pie-tabla {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid var(--borde-fila);
  background: var(--fondo-cabecera-tabla);
}

/* Input de orden en tabla */
.input-orden {
  width: 72px;
  border: 1px solid #d8d5cc;
  border-radius: 6px;
  padding: 5px 8px;
  font: 400 13px var(--fuente-mono);
  background: #ffffff;
}
.input-orden:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-suave);
}

/* Paginación como enlaces */
a.boton-paginacion {
  padding: 6px 12px;
  border: 1px solid var(--borde);
  border-radius: 6px;
  background: #ffffff;
  font: 500 12.5px var(--fuente);
  color: #2a2f2a;
}
a.boton-paginacion:hover { background: #f5f4f0; }
a.boton-paginacion.deshabilitado,
span.boton-paginacion.deshabilitado {
  padding: 6px 12px;
  border: 1px solid var(--borde);
  border-radius: 6px;
  background: #ffffff;
  font: 500 12.5px var(--fuente);
  color: #c2bfb6;
  cursor: default;
  pointer-events: none;
}

/* Encabezados de tabla ordenables (enlaces) */
.tabla th a {
  color: inherit;
  text-decoration: none;
}
.tabla th a:hover { color: var(--tinta); }

/* Acciones en celda: forms inline */
.celda-acciones form {
  display: inline;
  margin: 0;
}
.celda-acciones .enlace-accion,
.celda-acciones .enlace-editar,
.celda-acciones .enlace-eliminar {
  vertical-align: middle;
}

/* Editor HTML / textareas largos */
.editor-html {
  min-height: 280px;
  font-family: var(--fuente-mono) !important;
  font-size: 12.5px !important;
}

/* Barra de herramientas del editor HTML (actnotas) */
.editor-barra {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.editor-barra button {
  border: 1px solid var(--borde, #d8d5cd);
  background: #fff;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12.5px;
  cursor: pointer;
}
.editor-barra button:hover { background: #f5f4f0; }
.editor-previa {
  min-height: 280px;
  border: 1px solid var(--borde, #d8d5cd);
  border-radius: 8px;
  padding: 12px 14px;
  background: #fff;
  overflow-x: auto;
}

/* Dato de solo lectura en formularios */
.dato-solo-lectura {
  margin: 0;
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--borde-fila);
  border-radius: 8px;
  background: #f7f6f2;
}
.dato-solo-lectura > div {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 10px;
}
.dato-solo-lectura dt {
  font: 600 12px var(--fuente);
  color: var(--tenue);
}
.dato-solo-lectura dd {
  margin: 0;
  font: 400 13px var(--fuente);
}

/* Grupo de campos (fieldset) */
.grupo-campos {
  grid-column: 1 / -1;
  margin: 0;
  border: none;
  padding: 0;
}
.grupo-campos legend,
.grupo-campos > .titulo-grupo {
  font: 600 11px var(--fuente-mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--acento-oscuro);
  margin: 0 0 12px;
  padding: 0;
}
.campos-codigo,
.campos-fecha-agenda {
  display: flex;
  gap: 14px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.campo-mini { width: 140px; flex: none; }
.campo-corto { /* en grilla ocupa una columna */ }

/* Form apilado genérico → grilla de 2 */
.formulario-apilado {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
}
.formulario-apilado > .campo:has(textarea),
.formulario-apilado > .campo-completo,
.formulario-apilado > .grupo-campos,
.formulario-apilado > .dato-solo-lectura,
.formulario-apilado > .zona-archivo,
.formulario-apilado > .acciones-formulario,
.formulario-apilado > button,
.formulario-apilado > .boton-primario {
  grid-column: 1 / -1;
}
.formulario-apilado > .acciones-formulario {
  margin-top: 6px;
}

/* Casillas: también como .opcion-check legado de templates */
.opcion-check {
  display: flex;
  align-items: center;
  gap: 9px;
  font: 400 13px var(--fuente);
  cursor: pointer;
  padding: 4px 2px;
}
.opcion-check input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--acento);
  cursor: pointer;
}

/* Acciones cabecera: botones y enlaces */
.acciones-cabecera .boton-primario,
.acciones-cabecera .boton-secundario,
.acciones-cabecera .boton-eliminar-multiples {
  flex: none;
}

/* Checkbox en tabla */
.casilla-tabla {
  width: 15px;
  height: 15px;
  accent-color: var(--acento);
  cursor: pointer;
}

/* Login: pantalla partida, panel institucional oscuro + panel de acceso */
.pagina-login { min-height: 100vh; }

.pantalla-login {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
  background: var(--lateral-fondo);
}

.login-presentacion {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: 44px 52px;
}

.marca-login {
  display: flex;
  align-items: center;
  gap: 12px;
}
.marca-login .logotipo {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  font-size: 17px;
}
.marca-login .marca-nombre { font: 600 16px/1.2 var(--fuente); color: var(--lateral-destacado); }
.marca-login .marca-subtitulo {
  font: 500 11px/1.3 var(--fuente-mono);
  color: var(--lateral-atenuado);
  letter-spacing: .09em;
  text-transform: uppercase;
}

.login-lema { max-width: 420px; }
.login-lema h2 {
  margin: 0;
  font: 600 26px/1.3 var(--fuente);
  color: var(--lateral-destacado);
  letter-spacing: -.01em;
  text-wrap: pretty;
}
.login-lema p {
  margin: 14px 0 0;
  font: 400 14px/1.6 var(--fuente);
  color: var(--lateral-texto);
}

.login-pie {
  font: 400 11.5px var(--fuente-mono);
  color: var(--lateral-atenuado);
}

.panel-login {
  width: 460px;
  flex: none;
  background: var(--fondo);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.caja-login { width: 100%; max-width: 330px; }
.caja-login h1 {
  margin: 0;
  font: 600 21px/1.25 var(--fuente);
  letter-spacing: -.01em;
}
.subtitulo-login {
  margin: 6px 0 22px;
  color: var(--tenue);
  font-size: 13.5px;
}

.error-login {
  background: #f9e9e6;
  border: 1px solid #eac4bd;
  color: #8f2f26;
  border-radius: 8px;
  padding: 10px 12px;
  font: 500 12.5px var(--fuente);
  margin: 0 0 16px;
}

.formulario-login { display: grid; gap: 14px; }
.formulario-login .campo input[type="text"],
.formulario-login .campo input[type="password"] {
  padding: 10px 12px;
  font: 400 14px var(--fuente);
}
.formulario-login .boton-primario {
  width: 100%;
  margin-top: 6px;
  padding: 11px 16px;
  font-size: 14px;
}

/* Texto de ayuda bajo campos */
.texto-ayuda,
.ayuda-formulario {
  margin: 0;
  font: 400 12.5px var(--fuente);
  color: var(--tenue);
}

/* Responsive */
@media (max-width: 900px) {
  .aplicacion { flex-direction: column; }
  .barra-lateral {
    width: 100%;
  }
  .disposicion-cuits {
    grid-template-columns: 1fr;
  }
  .formulario-grilla,
  .formulario-apilado {
    grid-template-columns: 1fr;
  }
  .formulario-ipo {
    grid-template-columns: 1fr 1fr;
  }
  .formulario-ipo .campo-descripcion,
  .formulario-ipo .campo-envio {
    grid-column: 1 / -1;
  }
  .contenido {
    padding: 18px 16px 48px;
  }
  .encabezado {
    padding: 10px 16px;
    flex-wrap: wrap;
  }
  .cabecera-pantalla {
    flex-direction: column;
    align-items: flex-start;
  }
  .pantalla-login { flex-direction: column; }
  .login-presentacion { padding: 20px 24px; }
  .login-lema, .login-pie { display: none; }
  .panel-login {
    width: 100%;
    flex: 1;
    align-items: flex-start;
    padding: 36px 20px 56px;
  }
}

@media (max-width: 560px) {
  .formulario-ipo {
    grid-template-columns: 1fr;
  }
  .lista-servicios {
    grid-template-columns: 1fr;
  }
  .ficha-archivo {
    grid-template-columns: 1fr;
  }
  .ficha-archivo > div:nth-last-child(-n+2) {
    border-bottom: 1px solid var(--borde-fila);
  }
  .ficha-archivo > div:last-child {
    border-bottom: none;
  }
}