/* ============================================================
   Tema legacy: replica el diseño del admin JSP (alfabeta.css)
   sobre la estructura de plantillas nueva. Ajustado contra el
   webapp Java (ver reporte-ui.md) para igualar métricas: alto de
   cabecera, sangría del menú, alto de fila, tipografía de los
   controles de formulario y bandas beige de los formularios.
   ============================================================ */

/* ============================================================
   Variables de diseño (paleta del admin legacy)
   ============================================================ */
:root {
  --azul-cabecera: #4783B5;
  --enlace: #0066CC;
  --enlace-menu: cornflowerblue;
  --titulo-menu: #009999;
  --peligro: #CC0033;
  --error-cabecera: #FC0144;
  --fondo-menu: #E7E7E7;
  --fondo-cabecera-tabla: #EBEEDC;
  --tinta: #000000;
  --tenue: #666666;
  --borde: #999999;
  --borde-suave: #cccccc;
  --borde-fila: #d9d9d9;
  --fondo-fila-hover: #f5f5f5;
  --relleno-celda: 2px 6px;
  --fuente: Verdana, Helvetica, sans-serif;
  --fuente-mono: Verdana, Helvetica, sans-serif;
}

* { box-sizing: border-box; }

/* Las reglas de layout de abajo (display:block en .campo, .banda-etiqueta,
   etc.) ganan por especificidad al [hidden] de la hoja del navegador y dejaban
   visibles los campos condicionales del alta de items. */
[hidden] { display: none !important; }

html, body { min-height: 100%; }

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 12px;
  background: #ffffff;
  color: var(--tinta);
}

a { color: inherit; text-decoration: none; }
img { border: 0; vertical-align: middle; }

/* Los controles de formulario del JSP no tienen estilo propio: quedan con la
   fuente y el borde por defecto del navegador (Arial 13.3px, borde #767676).
   Se respeta eso salvo donde el legacy aplica .input-anmat. NO declarar ni
   siquiera border-radius acá: cualquier propiedad de borde/radio hace que el
   navegador deje de pintar el control con el tema nativo y caiga al fallback
   del UA (inset en inputs, outset en botones), el "recuadro 3D" que el JSP
   no tiene. */

/* ============================================================
   Estructura general: marco centrado estilo legacy
   ============================================================ */
.portal {
  max-width: 780px;
  margin: 0 auto;
  position: relative;
  padding: 0 8px;
  display: flex;
  flex-direction: column;
}

/* Franjas laterales con degradé azul (reemplazan el degrade.gif del legacy):
   van dentro del marco, pegadas al contenido y sin bordes, como en el JSP */
.portal::before,
.portal::after {
  content: "";
  position: absolute;
  top: 0;
  width: 8px;
  height: 230px;
  background: linear-gradient(to bottom, var(--azul-cabecera) 0, var(--azul-cabecera) 55%, #ffffff 100%);
}
.portal::before { left: 0; }
.portal::after { right: 0; }

.cuerpo {
  display: flex;
  align-items: stretch;
  flex: 1;
}

/* #izq / #centro del legacy: min-height 700px, borde superior gris */
.barra-lateral {
  width: 155px;
  flex: none;
  min-height: 700px;
  background: var(--fondo-menu);
  border-left: 1px solid var(--borde);
  border-right: 1px solid var(--borde);
  border-top: 1px solid var(--borde);
}

.contenido {
  flex: 1;
  min-width: 0;
  min-height: 700px;
  background: #ffffff;
  border-right: 1px solid var(--borde);
  border-top: 1px solid var(--borde);
  padding: 15px 15px 0;
}

/* #footer del legacy: sólo una línea gris al pie del marco */
.pie {
  border-top: 1px solid var(--borde);
  background: #ffffff;
}

.pantalla[hidden] { display: none; }

/* ============================================================
   Cabecera azul del portal
   ============================================================ */
/* table.topsecc del legacy: 73px de alto, sin padding vertical */
.cabecera {
  background: var(--azul-cabecera);
  color: #ffffff;
  display: flex;
  align-items: center;
  padding: 0;
  min-height: 73px;
}

.marca { flex: none; display: block; }
.logotipo { display: block; max-height: 44px; width: auto; }

/* td.logoder: alineado a la izquierda, arranca 278px después del borde
   izquierdo de la cabecera (206px de logo + 72px de aire), no centrado */
.titulo-portal {
  flex: 1;
  text-align: left;
  margin-left: 72px;
  font: bold 15px var(--fuente);
  color: #ffffff;
}

/* Bloque de sesión (derecha): bienvenida + perfil + botón + fecha.
   td.topder fija tamaño y color pero NO la familia, así que el texto hereda la
   del body: Times New Roman 14px. Sólo el input baja a Verdana 12px. */
.sesion {
  flex: none;
  width: 187px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  font: 14px 'Times New Roman', Times, serif;
  line-height: 1.15;
  text-align: right;
}

.sesion-bienvenida b { font-weight: bold; }
.sesion-perfil { font-size: 14px; }
.sesion-fecha { font-size: 14px; }
.sesion form { margin: 1px 0; }

/* td.topder input: fondo blanco, borde azul, sin radio */
.boton-sesion {
  background: #ffffff;
  border: 1px solid var(--enlace);
  border-radius: 0;
  padding: 1px 6px;
  font: 12px var(--fuente);
  color: var(--tinta);
  cursor: pointer;
}
.boton-sesion:hover { background: #e7e7e7; }

/* Formulario de login incrustado en la cabecera (como el JSP):
   inputs size="15" y botón angosto alineado a la derecha */
.login-cabecera {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  margin: 0;
}
.login-cabecera input[type="text"],
.login-cabecera input[type="password"] {
  background: #ffffff;
  border: 1px solid var(--enlace);
  border-radius: 0;
  padding: 1px 3px;
  font: 12px var(--fuente);
  color: var(--tinta);
  width: 136px; /* equivalente a size="15" del JSP */
}
.login-cabecera input:focus { outline: none; border-color: #003d7a; }

.error-login {
  color: var(--error-cabecera);
  font: bold 12px var(--fuente);
  margin-top: 3px;
}

/* ============================================================
   Menú izquierdo (itmenu / itsubmenu del legacy)
   ============================================================ */
.menu { display: block; padding: 0; }

/* .itmenu / .itsubmenu del legacy: 18px de alto útil, sangría 18px,
   borde inferior groove gris */
/* 21px = 18px de alto útil + 1px de relleno arriba/abajo + 1px de borde
   (con box-sizing: border-box el min-height incluye todo) */
.menu-titulo {
  font: bold 11px var(--fuente);
  color: var(--titulo-menu);
  background: url(/img/play.gif) no-repeat left center;
  padding: 1px 1px 1px 18px;
  min-height: 21px;
  display: flex;
  align-items: center;
  border-bottom: 1px groove grey;
}

.menu-opcion {
  display: flex;
  align-items: center;
  min-height: 21px;
  font-size: 11px;
  color: #0000EE;
  text-decoration: underline;
  padding: 1px 1px 1px 18px;
  border-bottom: 1px groove grey;
}
.menu-opcion:visited { color: #551A8B; }
.menu-opcion:hover { color: var(--tinta); text-decoration: underline; }
.menu-opcion.deshabilitada { color: #9a9a9a; cursor: default; }
.menu-opcion.deshabilitada:hover { color: #9a9a9a; text-decoration: none; }

/* ============================================================
   Cabecera de cada pantalla
   ============================================================ */
/* .homevolanta del legacy: 10px negro, alineado a la izquierda */
.volanta {
  font-size: 10px;
  color: var(--tinta);
  margin: 0;
  line-height: 1.5;
}

.cabecera-pantalla {
  display: block;
  margin: 0;
}

/* .hometitle: 13px bold #666 con línea inferior al ancho completo */
h1 {
  margin: 0;
  font: bold 13px/1.4 var(--fuente);
  color: var(--tenue);
  border-bottom: 1px solid lightgrey;
  padding-bottom: 1px;
}

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

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

/* Panel de aviso estilo legacy (titulotabla: fondo verdoso, padding 1px) */
.aviso-panel {
  background: var(--fondo-cabecera-tabla);
  color: var(--tenue);
  font-size: 12px;
  padding: 1px;
  margin: 0;
}
.aviso-panel.aviso-error { color: var(--peligro); }

/* ============================================================
   Botones y enlaces de acción (estilo clásico de formulario)
   ============================================================ */
/* Los botones del JSP son <input type="submit"> sin CSS: se dibujan con el
   widget nativo del navegador. No se les pone borde ni fondo propio — hacerlo
   desactiva el theming y aparece el recuadro 3D duro. */
.boton-primario,
.boton-secundario,
.boton-archivo,
.boton-paginacion,
.boton-eliminar-multiples,
.boton-peligro {
  cursor: pointer;
  flex: none;
}
.boton-primario.ancho-completo { width: 100%; }

.boton-eliminar-multiples:disabled,
.boton-eliminar-multiples:not(.habilitado) { cursor: default; }

/* "Link", "Activar": en el JSP son <a class="textonota"> (Verdana 11px azul) */
.enlace-accion {
  background: none; border: none; padding: 0;
  font: 11px var(--fuente);
  color: #0000EE;
  cursor: pointer;
}
.enlace-accion:hover { text-decoration: underline; }
.enlace-editar { color: var(--enlace); margin-right: 12px; }
.enlace-eliminar { color: var(--peligro); }

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

/* .homesep del legacy: bloque de 30px que aloja el botón "Nuevo ..." debajo
   del listado, alineado a la izquierda */
.acciones-centro {
  text-align: center;
  margin: 0 0 6px;
}

.acciones-pie {
  height: 30px;
  margin-top: 30px;
  text-align: left;
}

/* Íconos de operación en la última columna (edit.png / del.png del legacy) */
.icono-accion {
  background: none;
  border: none;
  padding: 0 2px;
  cursor: pointer;
  vertical-align: middle;
}
a.icono-accion { display: inline-block; }
.icono-accion img { display: block; }

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

/* ============================================================
   Tarjetas: en el tema legacy son bloques planos
   ============================================================ */
/* El JSP no tiene tarjetas: los bloques son planos, sin marco ni relleno */
.tarjeta {
  background: #ffffff;
  border: 0;
  border-radius: 0;
}
.tarjeta.con-relleno,
.tarjeta.con-relleno-medio { padding: 0; }
.tarjeta.con-desborde { overflow-x: auto; }

.titulo-grupo {
  font: bold 11px var(--fuente);
  color: var(--titulo-menu);
  margin: 0 0 10px;
}

.titulo-tarjeta {
  padding: 6px 8px;
  background: var(--fondo-cabecera-tabla);
  border-bottom: 1px solid var(--borde-suave);
  font: bold 12px var(--fuente);
  color: var(--tenue);
}
.titulo-tarjeta .aclaracion { font: 11px var(--fuente); color: var(--tenue); }

/* ============================================================
   Tablas (titulotabla del legacy)
   ============================================================ */
/* table.tnews del legacy: sin marco, sin separadores de fila, celdas de 1px
   de relleno y filas de 18px */
.tabla { width: 100%; border-collapse: collapse; }

.tabla th {
  text-align: left;
  font: 12px var(--fuente);
  color: var(--tenue);
  background: var(--fondo-cabecera-tabla);
  padding: 1px;
  border-bottom: 0;
  white-space: normal;
  font-weight: normal;
}
.tabla th.columna-amplia { width: 38%; }
.tabla th.columna-titulo { width: 30%; }
.tabla th.columna-acciones { text-align: right; }
.tabla th.columna-seleccion { width: 4%; padding: 1px; }

/* Columna por la que está ordenado el listado: fondo palegoldenrod */
.tabla th.orden-activo { background: palegoldenrod; }

.tabla th.ordenable { user-select: none; }
.tabla th a { color: inherit; text-decoration: none; }
.tabla th .flecha-orden img { margin-left: 3px; }

.tabla td {
  padding: 1px;
  border-bottom: 0;
  font-size: 11px;
  height: 16px;
}
.tabla tbody tr.seleccionada { background: var(--fondo-cabecera-tabla); }

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

.celda-mono { font-size: 11px; }
.celda-mono-tenue { font-size: 11px; color: var(--tenue); }
.celda-mono-normal { font-size: 11px; }
.celda-clave { font-size: 11px; color: var(--tenue); }
.celda-archivo { font-size: 11px; color: var(--enlace); }
.celda-correo { font-size: 11px; color: var(--enlace); }

.estado-vacio {
  padding: 24px 8px !important;
  text-align: center;
  color: var(--tenue);
  font-size: 12px;
}

/* El legacy muestra el estado como texto plano, sin insignia */
.insignia {
  display: inline;
  padding: 0;
  background: none;
  color: inherit;
  font: 11px var(--fuente);
}

/* Fila beige al pie de la tabla (clasifarma / bolsa / actnotas) */
.fila-pie-tabla td {
  background: var(--fondo-cabecera-tabla);
  padding: 1px;
}

/* Botones chicos dentro de tablas y filtros: el JSP les pone class="textonota"
   (Verdana 11px) y deja el widget nativo */
.boton-tabla {
  font: 11px var(--fuente);
  cursor: pointer;
}
.boton-tabla:disabled { cursor: default; }

/* Filtros de la agenda: banda "Aplicar Filtros" + una fila por filtro */
.filtros-legacy { margin: 18px 0 0; font-size: 11px; }
.filtros-legacy .banda-etiqueta {
  background: var(--fondo-cabecera-tabla);
  color: var(--tenue);
  font-size: 12px;
  padding: 1px;
}
.filtros-legacy .fila-filtro {
  display: block;
  padding: 1px;
  font: 11px var(--fuente);
}

/* Paginación del legacy: fila de texto plano con flechas prev/next.png,
   sin fondo ni marco, a 30px del listado */
.paginacion {
  display: block;
  padding: 1px;
  margin-top: 30px;
  background: transparent;
  border-top: 0;
  font: 11px var(--fuente);
}
.paginacion img { vertical-align: middle; }

.indicador-pagina {
  font: 11px var(--fuente);
  color: var(--enlace);
}

/* ============================================================
   Formularios
   ============================================================ */
/* Formulario del JSP: una columna, banda beige (titulotabla) con el rótulo y
   debajo la fila del control, ambos con 1px de relleno. Los controles quedan
   con el estilo por defecto del navegador y toman el ancho del atributo
   size=, igual que en el legacy. */
.formulario-grilla { display: block; }
.campo-completo { display: block; }

.campo { display: block; min-width: 0; }

.campo label, .campo .etiqueta,
.campo > span, label.campo > span {
  display: block;
  background: var(--fondo-cabecera-tabla);
  font: 12px var(--fuente);
  color: var(--tenue);
  padding: 1px;
  margin: 0;
}
.nota-etiqueta { font: 10px var(--fuente); color: #999999; }

/* Fila del control: mismo padding que el td.textonota del JSP */
.campo input,
.campo select,
.campo textarea,
label.campo input,
label.campo select,
label.campo textarea {
  margin: 1px 0 2px;
}
.campo textarea { resize: both; }
.campo input[readonly],
label.campo input[readonly] { color: gray; }

.casilla,
.opcion-check {
  display: block;
  font-size: 11px;
  cursor: pointer;
  padding: 0;
}
.casilla input[type="checkbox"],
.opcion-check input[type="checkbox"] { cursor: pointer; }

.casilla-tabla { cursor: pointer; }

.grupo-servicios { margin: 0; border-top: 0; padding: 0; }
.grupo-servicios .titulo-grupo { margin: 0; }
.grupo-servicios .descripcion-grupo { display: none; }
.lista-servicios { display: block; }

.acciones-formulario { margin: 8px 0 0; display: block; }

/* Código de disposición: "1234 / 2026" en una sola fila, como el JSP */
.grupo-codigo { display: block; }
.grupo-codigo .campo-codigo,
.grupo-codigo .campo-anio { display: inline; width: auto; }
.grupo-codigo .separador-codigo { display: inline; }
.grupo-codigo .vista-previa { display: none; }

/* Zona de carga de archivos */
.zona-archivo {
  border: 1px dashed var(--borde);
  border-radius: 2px;
  padding: 10px 12px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: #fafafa;
}

.boton-archivo { white-space: nowrap; }
.boton-archivo input[type="file"] { display: none; }

.nombre-archivo {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--fondo-cabecera-tabla);
  color: var(--tenue);
  border-radius: 2px;
  padding: 3px 8px;
  font: 11px var(--fuente);
}
.nombre-archivo .aclaracion { opacity: .7; }

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

/* ============================================================
   Pantallas con disposición particular
   ============================================================ */
.ancho-formulario { max-width: 760px; }
.ancho-formulario-medio { max-width: 660px; }
.ancho-formulario-angosto { max-width: 520px; }

/* CUITS y Novedades: bloques de texto plano, como el JSP (una sola columna,
   Verdana 12px, sin título de pantalla) */
.bloque-cuits,
.bloque-novedades {
  font: 12px var(--fuente);
  text-align: left;
}
.bloque-cuits .casilla-cuit { margin-left: 8px; white-space: nowrap; }
.bloque-cuits .form-en-linea { display: inline; }

/* El JSP borra el CUIT con un <a>; acá es un POST con CSRF, pero se pinta
   igual: enlace azul sin subrayado */
.enlace-cuit {
  background: none;
  border: 0;
  padding: 0;
  font: 12px var(--fuente);
  color: #0000EE;
  cursor: pointer;
  text-decoration: none;
}
.enlace-cuit:hover { text-decoration: underline; }

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

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

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

/* ============================================================
   Mensajes de éxito / error / información
   ============================================================ */
.mensaje {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  border-radius: 2px;
  margin: 0 0 14px;
  font: 12px var(--fuente);
}
.mensaje.exito { background: var(--fondo-cabecera-tabla); border: 1px solid #c5cba5; color: #336633; }
.mensaje.error { background: #f9e9e6; border: 1px solid #d8a9a0; color: var(--peligro); }
.mensaje.informacion { background: #eeeeee; border: 1px solid var(--borde-suave); color: #333333; }

.mensaje .icono { font: bold 12px var(--fuente); }
.mensaje .texto { flex: 1; }
.mensaje .cerrar {
  background: none; border: none;
  cursor: pointer;
  opacity: .55;
  font: 14px var(--fuente);
  color: inherit;
  padding: 0 2px;
}
.mensaje .cerrar:hover { opacity: 1; }

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

.ventana-confirmacion {
  background: #ffffff;
  border: 1px solid var(--borde);
  border-radius: 2px;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, .3);
  width: 380px;
  max-width: calc(100vw - 48px);
  padding: 16px 18px;
}

.ventana-confirmacion h2 { margin: 0 0 6px; font: bold 13px var(--fuente); color: var(--tinta); }
.ventana-confirmacion p { margin: 0 0 14px; font: 12px/1.5 var(--fuente); color: #333333; }
.ventana-confirmacion .acciones { display: flex; justify-content: flex-end; gap: 8px; }

/* ============================================================
   Elementos SSR compartidos
   ============================================================ */
a.boton-primario,
a.boton-secundario,
a.boton-paginacion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* Filtros de listado (agenda) */
.formulario-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: flex-end;
  margin: 0 0 14px;
}
.formulario-filtros .campo { min-width: 180px; 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: 8px;
  padding: 6px 8px;
  border-top: 1px solid var(--borde-suave);
  background: var(--fondo-cabecera-tabla);
}

/* Input de orden en tabla: size="1" nativo + .textonota del JSP */
.textonota {
  font: 11px var(--fuente);
}

/* 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; }

/* Dato de solo lectura en formularios */
.dato-solo-lectura {
  margin: 0;
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--borde-fila);
  border-radius: 2px;
  background: #f5f5f5;
}
.dato-solo-lectura > div {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 8px;
}
.dato-solo-lectura dt { font: bold 11px var(--fuente); color: var(--tenue); }
.dato-solo-lectura dd { margin: 0; font: 12px 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: bold 11px var(--fuente);
  color: var(--titulo-menu);
  margin: 0 0 10px;
  padding: 0;
}
.campos-codigo,
.campos-fecha-agenda {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.campo-mini { width: 130px; 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: 12px 18px;
}
.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: 4px; }

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

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

/* ============================================================
   Réplicas fieles del legacy (clientes / items / ipo)
   ============================================================ */

/* Formulario apilado del legacy: banda de etiqueta (titulotabla) + fila del
   control. Los controles conservan el estilo por defecto del navegador y el
   ancho lo da el atributo size=, como en el JSP. */
.formulario-legacy { max-width: none; }
.formulario-legacy .banda-etiqueta,
.form-legacy .banda-etiqueta {
  background: var(--fondo-cabecera-tabla);
  color: var(--tenue);
  font-size: 12px;
  padding: 1px;
  margin: 0;
}
.formulario-legacy .fila-campo,
.form-legacy .fila-campo {
  padding: 1px;
  font: 11px var(--fuente);
}
.formulario-legacy input[readonly],
.form-legacy input[readonly] { color: gray; }

/* .input-anmat del legacy: los módulos de contenidos bajan los controles a
   Verdana 11px; el resto queda con la fuente por defecto del navegador */
.input-anmat { font: 11px var(--fuente); }

.casilla-legacy { display: block; font-size: 11px; padding: 0; cursor: pointer; }

.acciones-legacy { margin-top: 8px; display: block; }
/* .input-anmat en el JSP: sólo baja la fuente, el widget sigue siendo nativo */
.boton-legacy {
  font: 11px var(--fuente);
  cursor: pointer;
}

/* Tablas legacy: anchos del JSP (Cliente/Item.getColumnas + medición de
    contenido). Sin overflow-wrap:anywhere para que LOGIN/CLAVE/SERVICIO
    ocupen lo mismo que en el Java. */
.tabla.tabla-clientes { table-layout: auto; }
.tabla.tabla-clientes .col-idalfabeta { width: 13%; }
.tabla.tabla-clientes .col-idguia { width: 10%; }
.tabla.tabla-clientes .col-login { width: 17%; }
.tabla.tabla-clientes .col-clave { width: 19%; }
.tabla.tabla-clientes .col-descripcion { width: 30%; }
.tabla.tabla-clientes .col-fin { width: 11%; }
.tabla.tabla-clientes .col-admin { width: 10%; }
.tabla td.celda-nowrap { white-space: nowrap; }

.tabla.tabla-items .col-item-id { width: 6%; }
.tabla.tabla-items .col-item-servicio { width: 18%; }
.tabla.tabla-items .col-item-manual { width: 35%; }
.tabla.tabla-items .col-item-secuencia { width: 8%; }
.tabla.tabla-items .col-item-fecha { width: 9%; }
.tabla.tabla-items .col-item-comentario { width: 19%; }
.tabla.tabla-items .col-item-admin { width: 5%; }

.tabla.tabla-avisos { table-layout: fixed; }
.tabla.tabla-avisos .col-aviso-id { width: 12%; }
.tabla.tabla-avisos .col-aviso-contacto { width: 18%; }
.tabla.tabla-avisos .col-aviso-email { width: 22%; }
.tabla.tabla-avisos .col-aviso-fecha { width: 16%; }
.tabla.tabla-avisos .col-aviso-estado { width: 14%; }
.tabla.tabla-avisos .col-aviso-acciones { width: 72px; }
.tabla.tabla-avisos td { overflow-wrap: anywhere; }
.tabla.tabla-avisos td.celda-acciones { overflow-wrap: normal; width: 72px; }

.tabla.tabla-actnotas { table-layout: auto; }
.tabla.tabla-actnotas th:nth-child(1) { width: 10%; }
.tabla.tabla-actnotas th:nth-child(2) { width: 40%; }
.tabla.tabla-actnotas th:nth-child(3) { width: 15%; }
.tabla.tabla-actnotas th:nth-child(4) { width: 5%; }
.tabla.tabla-actnotas th:nth-child(5) { width: 10%; }
.tabla.tabla-actnotas th:nth-child(6) { width: 20%; }

/* Celda de ID con ícono mas.gif (clase .fecha del legacy: 10px gris) */
.tabla td.celda-id-legacy { font-size: 10px; color: var(--tenue); white-space: nowrap; }
.tabla td.celda-id-legacy img { margin-right: 2px; }

/* Acciones legacy: íconos alineados a la izquierda como el JSP */
.tabla td.celda-acciones-legacy { white-space: nowrap; }
.celda-acciones-legacy form { display: inline; margin: 0; }

/* Tabla de items: columnas alternadas grises y filas con borde negro */
.tabla.tabla-items td { border-bottom: 1px solid #000000; }
.tabla.tabla-items tbody tr:hover { background: transparent; }
.tabla td.celda-gris { background: #F0F0F0; }
.tabla td.centrada { text-align: center; }

/* IPO: formulario de carga y lista de eliminación del legacy */
.titulo-ipo-legacy { text-align: center; color: #A33; font-size: 12px; margin: 0 0 10px; }
.grilla-ipo {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 1px 6px;
  align-items: center;
  font-size: 12px;
}
.grilla-ipo .ancho-grande { width: min(350px, 100%); }
.grilla-ipo .ancho-chico { width: 100px; }
.envio-ipo { text-align: center; margin-top: 10px; }
.separador-ipo { margin: 16px 0; border: 0; border-top: 1px inset var(--borde-suave); }

.lista-ipo { font-size: 12px; }
.lista-ipo p { margin: 0; }
.lista-ipo form { margin: 18px 0 0; }
.enlace-ipo {
  background: none;
  border: none;
  padding: 0;
  font: 12px var(--fuente);
  color: #0000EE;
  cursor: pointer;
  text-align: left;
}
.enlace-ipo img { margin-right: 4px; }
.enlace-ipo .rojo-ipo { color: brown; font-weight: bold; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 800px) {
  .portal { border: none; }
  .portal::before,
  .portal::after { display: none; }
  .cuerpo { flex-direction: column; }
  .barra-lateral {
    width: 100%;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid var(--borde);
  }
  .contenido { border-right: none; }
  .cabecera { flex-wrap: wrap; }
  .titulo-portal { order: 3; flex-basis: 100%; text-align: left; }
  .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: 12px 12px 32px; }
  .cabecera-pantalla { flex-direction: column; align-items: flex-start; }
}

@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; }
  .login-cabecera input[type="text"],
  .login-cabecera input[type="password"] { width: 130px; }
}

/* ============================================================
   Pantalla diaria
   ============================================================ */

/* Leyenda previa al envío: repasa qué actualiza el formulario. */
.leyenda-actualiza {
  margin: 10px 0 0;
  font-size: 11px;
  color: #333;
}
.leyenda-actualiza ul {
  margin: 3px 0 0;
  padding-left: 22px;
}
.leyenda-actualiza li {
  margin: 2px 0;
}