:root {
  --azul-oscuro: #0f4196;
  --azul: #0a78be;
  --azul-claro: #19a0dc;
  --azul-suave: #eef9fd;
  --azul-niebla: #f3f9fd;
  --azul-panel: #e8f4fb;
  --fondo: #eef4f8;
  --superficie: #ffffff;
  --texto: #26364a;
  --texto-fuerte: #141414;
  --texto-suave: #718096;
  --borde: #dce6ee;
  --positivo: #15965a;
  --negativo: #d83a52;
  --advertencia: #c77800;
  --radio: 16px;
  --sombra: 0 8px 24px rgba(15, 65, 150, .07);
  --barra: 268px;
  --fuente: "Poppins", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; font-size: 12px; }
body { min-width: 320px; margin: 0; color: var(--texto); background: var(--fondo); font: 14px/1.5 var(--fuente); }
button, input, select, textarea { font: inherit; }
a { color: inherit; }

/*
 * Los valores se escriben directamente. Los controles de incremento no son
 * útiles para cifras monetarias, cantidades grandes ni porcentajes.
 */
input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.barra-lateral {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 30;
  width: var(--barra);
  display: flex;
  flex-direction: column;
  color: #d9ebfa;
  background: linear-gradient(180deg, #082f6f, #06275c);
  box-shadow: -10px 0 30px rgba(6, 39, 92, .14);
}
.marca { min-height: 88px; display: flex; align-items: center; gap: 12px; padding: 17px 19px; border-bottom: 1px solid rgba(255,255,255,.1); color: #fff; text-decoration: none; }
.marca span:last-child { display: grid; }
.marca strong { font-size: 15px; }
.marca small { color: #a8c7e4; font-size: 12px; }
.marca-simbolo { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.3); border-radius: 13px; color: #fff; background: rgba(255,255,255,.11); font-weight: 700; }
.marca-simbolo-grande { width: 62px; height: 62px; font-size: 20px; }
.navegacion { display: grid; gap: 5px; padding: 16px 11px; overflow-y: auto; }
.navegacion a { min-height: 47px; display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 11px; text-decoration: none; font-size: 13px; font-weight: 500; }
.navegacion a:hover, .navegacion a.activo { color: #fff; background: rgba(255,255,255,.12); }
.navegacion-icono { width: 29px; height: 29px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.18); border-radius: 9px; font-size: 12px; font-weight: 700; }
.perfil { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 16px; border-top: 1px solid rgba(255,255,255,.1); }
.perfil-avatar { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: #083474; background: #fff; font-weight: 700; text-transform: uppercase; }
.perfil-datos { min-width: 0; display: grid; flex: 1; }
.perfil-datos strong, .perfil-datos small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.perfil-datos strong { color: #fff; font-size: 12px; }
.perfil-datos small { color: #9fc0de; font-size: 12px; text-transform: capitalize; }
.perfil > a { color: #fff; font-size: 12px; }
.espacio-trabajo { min-height: 100vh; margin-right: var(--barra); }
.pagina { width: min(1580px, 100%); margin: 0 auto; padding: 34px; }
.aviso-demostracion { padding: 9px 20px; color: #724500; background: #fff0c7; border-bottom: 1px solid #f0d27d; font-size: 12px; text-align: center; }

.encabezado-pagina { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.sobrelinea { margin: 0 0 6px; color: var(--azul); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.sobrelinea strong { margin-left: 8px; color: var(--texto-suave); font-weight: 500; letter-spacing: 0; text-transform: none; }
.encabezado-pagina h1 { margin: 0; color: var(--azul-oscuro); font-size: clamp(27px, 3vw, 38px); line-height: 1.18; letter-spacing: -.035em; }
.encabezado-pagina p:last-child { margin: 7px 0 0; color: var(--texto-suave); }
.acciones-pagina { display: flex; gap: 9px; flex-wrap: wrap; }
.boton { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 9px 15px; border: 1px solid transparent; border-radius: 10px; font-weight: 600; text-decoration: none; cursor: pointer; }
.boton-primario { color: #fff; background: var(--azul-oscuro); box-shadow: 0 7px 16px rgba(15,65,150,.18); }
.boton-secundario { border-color: var(--borde); color: var(--azul-oscuro); background: #fff; }
.boton-peligro { border-color: #f1cbd2; color: #a9233a; background: #fff5f6; }
.boton-texto { min-height: auto; padding: 4px; color: var(--texto-suave); background: transparent; }
.boton:disabled { opacity: .45; cursor: not-allowed; }

.rejilla-indicadores { display: grid; grid-template-columns: repeat(5, minmax(180px, 1fr)); gap: 14px; margin-bottom: 20px; }
.tarjeta-indicador { min-height: 188px; display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 17px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); box-shadow: var(--sombra); }
.tarjeta-indicador-icono { width: 40px; height: 40px; border-radius: 12px; background: var(--tono-suave, var(--azul-suave)); }
.tarjeta-indicador > div:nth-child(2) { display: grid; align-content: start; }
.tarjeta-indicador strong { color: var(--texto-fuerte); font-size: 14px; }
.tarjeta-indicador small { color: var(--texto-suave); font-size: 12px; }
.tarjeta-indicador > b { grid-column: 1 / -1; align-self: end; color: var(--texto-fuerte); font-size: 23px; text-align: right; }
.tarjeta-indicador footer { grid-column: 1 / -1; padding-top: 10px; border-top: 1px solid #edf2f6; color: var(--texto-suave); font-size: 12px; }
.tono-positivo { --tono-suave: #e8f7ef; }
.tono-negativo { --tono-suave: #fdecef; }
.tono-advertencia { --tono-suave: #fff4d6; }
.tono-informativo { --tono-suave: var(--azul-suave); }
.rejilla-indicadores-compacta { grid-template-columns: repeat(3, minmax(180px, 1fr)); }
.rejilla-indicadores-cuatro { grid-template-columns: repeat(4, minmax(180px, 1fr)); }
.tarjeta-indicador-compacta { min-height: 130px; }

.rejilla-panel { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr); gap: 20px; }
.panel { overflow: hidden; border: 1px solid #cfe0eb; border-radius: var(--radio); background: var(--azul-niebla); box-shadow: var(--sombra); }
.panel > header { min-height: 67px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 18px; border-bottom: 1px solid #d8e8f2; background: linear-gradient(90deg, var(--azul-panel), #f5fbfe); }
.panel h2 { margin: 0; color: var(--texto-fuerte); font-size: 15px; }
.panel header p { margin: 2px 0 0; color: var(--texto-suave); font-size: 12px; }
.panel header a { color: var(--azul); font-size: 12px; font-weight: 600; text-decoration: none; }
.estado-vacio { min-height: 255px; display: grid; place-content: center; padding: 30px; color: var(--texto-suave); text-align: center; }
.estado-vacio strong { color: var(--texto-fuerte); }
.estado-vacio p { max-width: 440px; margin: 6px 0 0; }
.lista-resumen { display: grid; padding: 10px 17px 18px; }
.lista-resumen span { min-height: 50px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; border-bottom: 1px solid #edf2f6; font-size: 12px; }
.lista-resumen i { width: 9px; height: 9px; border-radius: 50%; background: var(--azul-claro); }
.lista-resumen b { color: var(--azul-oscuro); font-size: 16px; }
.modulo-preparado { max-width: 760px; padding: 32px; }
.modulo-preparado h1, .modulo-preparado h2 { margin: 12px 0 8px; color: var(--azul-oscuro); }
.modulo-preparado p { color: var(--texto-suave); }
.etiqueta { display: inline-flex; padding: 5px 9px; border-radius: 999px; color: var(--azul-oscuro); background: var(--azul-suave); font-size: 12px; font-weight: 600; }
.alerta { margin: 0 0 18px; padding: 12px 14px; border: 1px solid transparent; border-radius: 11px; font-size: 12px; }
.alerta-error { color: #9f263b; border-color: #f6cfd6; background: #fdecef; }
.alerta-exito { color: #0b7241; border-color: #c7ead7; background: #e9f8f0; }
.alerta-aviso { color: #855400; border-color: #f0dba0; background: #fff7df; }

.barra-filtros { display: grid; grid-template-columns: minmax(240px, 1fr) repeat(3, minmax(130px, auto)) auto; align-items: end; gap: 12px; padding: 16px 18px; border-bottom: 1px solid #edf2f6; }
.barra-filtros label, .rejilla-formulario label { display: grid; gap: 6px; color: var(--texto); font-size: 12px; font-weight: 600; }
.barra-filtros input, .barra-filtros select, .rejilla-formulario input, .rejilla-formulario select, .rejilla-formulario textarea {
  width: 100%; min-height: 43px; padding: 9px 11px; border: 1px solid var(--borde);
  border-radius: 10px; color: var(--texto); background: #fff; outline: none;
}
.barra-filtros input:focus, .barra-filtros select:focus, .rejilla-formulario input:focus, .rejilla-formulario select:focus, .rejilla-formulario textarea:focus {
  border-color: var(--azul-claro); box-shadow: 0 0 0 3px rgba(25,160,220,.14);
}
.rejilla-formulario textarea { resize: vertical; }
.tabla-contenedor { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; }
.tabla th, .tabla td { padding: 14px 17px; border-bottom: 1px solid #edf2f6; text-align: left; vertical-align: middle; }
.tabla th { color: var(--texto-suave); background: #f8fbfd; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; }
.tabla td { font-size: 12px; }
.tabla td strong, .tabla td small { display: block; }
.tabla td strong { color: var(--texto-fuerte); font-size: 13px; }
.tabla td small { margin-top: 2px; color: var(--texto-suave); }
.tabla tbody tr:nth-child(odd) { background: #fff; }
.tabla tbody tr:nth-child(even) { background: var(--azul-panel); }
.tabla tbody tr:hover { background: #dceef9; }
.tabla-accion { width: 190px; text-align: right !important; }
.tabla-accion a { color: var(--azul); font-weight: 600; text-decoration: none; }
.acciones-tabla { display: flex; align-items: center; justify-content: flex-end; gap: 9px; }
.acciones-tabla form { margin: 0; }
.accion-icono { min-height: 34px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border: 1px solid #c9deeb; border-radius: 9px; background: #fff; }
.accion-icono svg { width: 16px; height: 16px; fill: currentColor; }
.grupo-etiquetas { display: flex; gap: 5px; flex-wrap: wrap; }
.estado { display: inline-flex; align-items: center; min-height: 25px; padding: 4px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; text-transform: capitalize; }
.estado-positivo { color: #0b7241; background: #e9f8f0; }
.estado-negativo { color: #a9233a; background: #fdecef; }
.estado-advertencia { color: #8a5700; background: #fff3d3; }
.estado-neutro { color: #385168; background: #edf3f7; }

.formulario-modulo { display: grid; gap: 18px; }
.seccion-formulario > header .paso { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: var(--azul-oscuro); background: var(--azul-suave); font-size: 12px; font-weight: 700; }
.rejilla-formulario { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 17px; padding: 20px; background: var(--azul-niebla); }
.campo-amplio { grid-column: 1 / -1; }
.campo-error { color: var(--negativo); font-size: 12px; font-weight: 500; }
.grupo-opciones { min-height: 66px; display: flex; align-items: center; align-self: end; gap: 18px; margin: 0; padding: 12px 14px; border: 1px solid #cbdde9; border-radius: 10px; background: #fff; }
.grupo-opciones legend { padding: 0 5px; color: var(--texto); font-size: 12px; font-weight: 600; }
.grupo-opciones label { display: flex; align-items: center; gap: 7px; font-size: 12px; }
.grupo-opciones input { width: 17px; min-height: 17px; }
.barra-guardado { position: sticky; bottom: 12px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 17px; border: 1px solid #c9dfea; border-radius: 13px; background: rgba(238,249,253,.96); box-shadow: 0 12px 30px rgba(15,65,150,.12); backdrop-filter: blur(8px); }
.barra-guardado p { margin: 0; color: var(--texto-suave); font-size: 12px; }
.opciones-ruta { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 20px; background: var(--azul-niebla); }
.opcion-ruta { position: relative; display: block; }
.opcion-ruta input { position: absolute; opacity: 0; pointer-events: none; }
.opcion-ruta span { min-height: 112px; display: grid; align-content: center; gap: 5px; padding: 18px; border: 1px solid #cbdde9; border-radius: 13px; background: #fff; cursor: pointer; }
.opcion-ruta strong { color: var(--texto-fuerte); }
.opcion-ruta small { color: var(--texto-suave); }
.opcion-ruta input:checked + span { border-color: var(--azul); background: var(--azul-suave); box-shadow: 0 0 0 3px rgba(25,160,220,.12); }
.campo-moneda { display: flex; align-items: center; border: 1px solid var(--borde); border-radius: 10px; background: #fff; overflow: hidden; }
.campo-moneda > span { padding-left: 12px; color: var(--texto-suave); }
.campo-moneda input { border: 0; box-shadow: none !important; }
.aviso-contextual { padding: 12px 14px; border-radius: 10px; color: #53677b; background: #f3f7fa; font-size: 12px; }
.aviso-contextual a { color: var(--azul); font-weight: 600; }
.rejilla-detalle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; }
.lista-datos { display: grid; margin: 0; padding: 5px 18px 18px; }
.lista-datos > div { display: grid; grid-template-columns: minmax(120px, .4fr) 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid #edf2f6; }
.lista-datos dt { color: var(--texto-suave); font-size: 12px; }
.lista-datos dd { margin: 0; color: var(--texto-fuerte); font-size: 12px; text-align: right; }
.panel-acciones { margin-top: 18px; }
.acciones-estado { display: flex; flex-wrap: wrap; gap: 9px; padding: 16px 18px; }
.accion-discreta { margin-top: 16px; text-align: right; }
.lista-trabajos-recientes { display: grid; padding: 8px 17px 16px; }
.lista-trabajos-recientes > a { min-height: 59px; display: flex; align-items: center; justify-content: space-between; gap: 15px; border-bottom: 1px solid #edf2f6; text-decoration: none; }
.lista-trabajos-recientes span:first-child { display: grid; }
.lista-trabajos-recientes strong { color: var(--texto-fuerte); font-size: 12px; }
.lista-trabajos-recientes small { color: var(--texto-suave); font-size: 12px; }
.historial-panel { margin-top: 18px; }
.rejilla-cotizador { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr); gap:18px; }
.tabla-items input,.tabla-items select { width:100%; min-width:90px; min-height:40px; padding:8px 9px; border:1px solid var(--borde); border-radius:9px; background:#fff; }
.tabla-items td:first-child input { min-width:230px; }
.resumen-cotizador { align-self:start; position:sticky; top:20px; }
.resumen-cotizador .lista-datos div:nth-last-child(-n+2) { background:var(--azul-suave); margin:0 -18px; padding:13px 18px; }
.cotizador-error { padding:0 18px 14px; }
.selector-catalogo { min-height:42px; max-width:290px; padding:8px 10px; border:1px solid var(--borde); border-radius:10px; color:var(--texto); background:#fff; }
.panel-version { margin:18px 0; }
.documento-cotizacion { width:min(1000px,100%); margin:0 auto; padding:42px; border:1px solid var(--borde); border-radius:18px; color:#27384a; background:#fff; box-shadow:var(--sombra); }
.documento-cabecera { display:flex; justify-content:space-between; gap:28px; padding-bottom:24px; border-bottom:3px solid var(--azul-oscuro); }
.documento-cabecera > div { display:flex; align-items:center; gap:12px; }
.documento-cabecera > div:last-child { display:grid; justify-items:end; gap:2px; }
.documento-cabecera b { color:var(--azul); letter-spacing:.12em; }
.documento-cabecera small { color:var(--texto-suave); }
.documento-marca { width:48px; height:48px; display:grid; place-items:center; border-radius:14px; color:#fff; background:var(--azul-oscuro); font-weight:700; }
.documento-datos { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:24px 0; }
.documento-datos div { display:grid; gap:4px; padding:14px; border-radius:12px; background:var(--azul-niebla); }
.documento-datos span { color:var(--texto-suave); font-size:12px; }
.documento-tabla { width:100%; border-collapse:collapse; }
.documento-tabla th,.documento-tabla td { padding:13px 11px; border-bottom:1px solid var(--borde); text-align:left; }
.documento-tabla th { color:var(--azul-oscuro); background:var(--azul-panel); }
.documento-tabla tbody tr:nth-child(odd) { background:#fff; }
.documento-tabla tbody tr:nth-child(even) { background:var(--azul-panel); }
.documento-cierre { display:grid; grid-template-columns:1fr 320px; gap:35px; margin-top:28px; }
.documento-cierre h2 { margin:0 0 8px; color:var(--azul-oscuro); font-size:15px; }
.documento-cierre p { white-space:normal; }
.documento-cierre dl { margin:0; }
.documento-cierre dl div { display:flex; justify-content:space-between; gap:20px; padding:10px 0; border-bottom:1px solid var(--borde); }
.documento-cierre dd { margin:0; font-weight:600; }
.documento-total { color:var(--azul-oscuro); font-size:18px; }
.documento-cotizacion > footer { display:flex; justify-content:space-between; margin-top:35px; padding-top:18px; border-top:1px solid var(--borde); color:var(--texto-suave); }
.acciones-impresion { width:min(1000px,100%); display:flex; justify-content:flex-end; gap:10px; margin:18px auto; }
.linea-tiempo { display: grid; padding: 10px 18px 18px; }
.linea-tiempo > div { min-height: 58px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; border-bottom: 1px solid #edf2f6; }
.linea-tiempo i { width: 10px; height: 10px; border: 2px solid #fff; border-radius: 50%; background: var(--azul-claro); box-shadow: 0 0 0 3px var(--azul-suave); }
.linea-tiempo span { display: grid; }
.linea-tiempo strong { color: var(--texto-fuerte); font-size: 12px; }
.linea-tiempo small, .linea-tiempo time { color: var(--texto-suave); font-size: 12px; }

.boton-menu-movil, .fondo-menu { display: none; }
.pagina-acceso { background: #072b65; }
.acceso { min-height: 100vh; display: grid; grid-template-columns: 1.1fr .9fr; }
.acceso-presentacion { display: grid; align-content: center; justify-items: start; padding: clamp(36px, 8vw, 110px); color: #fff; background: radial-gradient(circle at 25% 25%, #147fbd, transparent 40%), linear-gradient(145deg, #0f4196, #06265a); }
.acceso-presentacion .sobrelinea { margin-top: 24px; color: #9eddf7; }
.acceso-presentacion h1 { max-width: 620px; margin: 0; font-size: clamp(38px, 5vw, 68px); line-height: 1.06; letter-spacing: -.05em; }
.acceso-presentacion p:last-child { max-width: 560px; color: #c1d9ec; font-size: 16px; }
.acceso-tarjeta { width: min(440px, calc(100% - 40px)); align-self: center; justify-self: center; padding: 34px; border-radius: 20px; background: #fff; box-shadow: 0 30px 70px rgba(0,0,0,.22); }
.acceso-tarjeta h2 { margin: 0; color: var(--azul-oscuro); font-size: 28px; }
.acceso-tarjeta > div:first-child > p:last-child { color: var(--texto-suave); }
.formulario { display: grid; gap: 16px; margin-top: 24px; }
.formulario label { display: grid; gap: 7px; color: var(--texto); font-size: 12px; font-weight: 600; }
.formulario input { width: 100%; min-height: 45px; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 10px; outline: none; }
.formulario input:focus { border-color: var(--azul-claro); box-shadow: 0 0 0 3px rgba(25,160,220,.18); }
@media (prefers-reduced-motion: no-preference) {
  html.interfaz-lista .pagina > * { animation: entrada .32s ease both; }
  html.interfaz-lista .pagina > *:nth-child(2) { animation-delay: .05s; }
  @keyframes entrada { from { opacity: .01; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 1180px) {
  .rejilla-indicadores { grid-template-columns: repeat(3, 1fr); }
  .barra-filtros { grid-template-columns: repeat(3, 1fr); }
  .campo-busqueda { grid-column: span 2; }
}
@media (max-width: 860px) {
  .barra-lateral { width: min(310px, 88vw); transform: translateX(105%); transition: transform .22s ease; }
  .menu-abierto .barra-lateral { transform: none; }
  .fondo-menu { position: fixed; inset: 0; z-index: 20; background: rgba(4,23,49,.48); }
  .menu-abierto .fondo-menu { display: block; }
  .boton-menu-movil { position: fixed; top: 12px; right: 12px; z-index: 18; display: block; min-height: 40px; padding: 8px 13px; border: 0; border-radius: 10px; color: #fff; background: var(--azul-oscuro); font-weight: 600; }
  .espacio-trabajo { margin-right: 0; }
  .pagina { padding: 70px 18px 24px; }
  .encabezado-pagina { align-items: flex-start; flex-direction: column; }
  .rejilla-indicadores { grid-template-columns: repeat(2, 1fr); }
  .rejilla-panel { grid-template-columns: 1fr; }
  .rejilla-detalle { grid-template-columns: 1fr; }
  .rejilla-cotizador { grid-template-columns:1fr; }
  .resumen-cotizador { position:static; }
  .documento-datos { grid-template-columns:1fr 1fr; }
  .documento-cierre { grid-template-columns:1fr; }
  .barra-filtros { grid-template-columns: 1fr 1fr; }
  .campo-busqueda { grid-column: 1 / -1; }
  .acceso { grid-template-columns: 1fr; padding: 40px 0; }
  .acceso-presentacion { display: none; }
}
@media print {
  .barra-lateral,.boton-menu-movil,.fondo-menu,.aviso-demostracion,.acciones-impresion { display:none !important; }
  .espacio-trabajo { margin:0; }
  .pagina { width:100%; padding:0; }
  .documento-cotizacion { width:100%; padding:12mm; border:0; box-shadow:none; }
  body { background:#fff; }
}
@media (max-width: 520px) {
  .rejilla-indicadores { grid-template-columns: 1fr; }
  .tarjeta-indicador { min-height: 165px; }
  .acciones-pagina, .acciones-pagina .boton { width: 100%; }
  .acceso-tarjeta { padding: 26px 22px; }
  .barra-filtros, .rejilla-formulario, .opciones-ruta { grid-template-columns: 1fr; }
  .campo-busqueda, .campo-amplio { grid-column: auto; }
  .tabla thead { display: none; }
  .tabla, .tabla tbody, .tabla tr, .tabla td { display: block; width: 100%; }
  .tabla tr { padding: 12px 16px; border-bottom: 1px solid var(--borde); }
  .tabla td { display: grid; grid-template-columns: 92px 1fr; gap: 12px; padding: 7px 0; border: 0; }
  .tabla td::before { content: attr(data-etiqueta); color: var(--texto-suave); font-size: 12px; text-transform: uppercase; }
  .tabla-accion { text-align: left !important; }
  .tabla-accion::before { content: ""; }
  .acciones-tabla { justify-content: flex-start; }
  .barra-guardado { position: static; align-items: stretch; flex-direction: column; }
  .barra-guardado .boton { width: 100%; }
  .lista-datos > div { grid-template-columns: 1fr; gap: 4px; }
  .lista-datos dd { text-align: left; }
}