/* ===========================================================================
   Clasificador Anexo 3 — LSC

   Instrumento de trabajo, no folleto: el dato manda y el resto se aparta.

   Dos ideas guían todo lo demás:

   1. El código WBS es una coordenada, no una etiqueta. Dentro de un capítulo
      los primeros segmentos se repiten en todas las filas, así que se apagan
      y solo queda encendido el segmento que cambia. Se lee la columna de un
      vistazo en vez de descifrar quince dígitos por fila.

   2. Una sola marca de estado por fila. Los huecos de dato (sin unidad, sin
      cubicar) ya se ven en la celda vacía y no necesitan etiqueta.

   Paleta: papel frío de plano técnico, tinta petróleo, y latón reservado
   exclusivamente para las cifras en UF — el dinero es el único eje que se
   lee distinto en un presupuesto.
   =========================================================================== */

:root{
  --papel:#f2f4f3;
  --panel:#ffffff;
  --panel-2:#fafbfa;

  --tinta:#16232b;
  --tinta-2:#55666e;
  --tinta-3:#8c9aa1;

  --linea:#dde4e3;
  --linea-2:#eef2f1;

  --acento:#0e5b63;
  --acento-2:#0a4a51;
  --acento-bg:#e1edee;

  --valor:#7a5e1a;          /* latón: solo cifras en UF */
  --aviso:#9a3b4a;
  --aviso-bg:#f6e6e8;

  --ok:#2f6b4f;
  --ok-bg:#e8f2ec;

  --texto:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,"Cascadia Mono","JetBrains Mono","Consolas",monospace;

  --r:7px;
  --sombra:0 1px 2px rgba(22,35,43,.04), 0 1px 1px rgba(22,35,43,.03);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font:14.5px/1.55 var(--texto);
  -webkit-font-smoothing:antialiased;
}

a{color:var(--acento);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}

:focus-visible{outline:2px solid var(--acento);outline-offset:2px;border-radius:3px}

/* Todo lo numérico en tabular: las columnas de UF tienen que alinearse. */
.mono,.wbs,.num,.total,input.campo,select.campo,.cifra{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
}

/* eyebrow / micro-rótulo: la voz de servicio de la interfaz */
.micro,h2,table.lista th,.datos dt,.alta label > span{
  font-family:var(--texto);
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.11em;
  color:var(--tinta-3);
}

h1{
  font-size:26px;
  line-height:1.15;
  font-weight:650;
  letter-spacing:-.021em;
  margin:0;
}
h2{margin:30px 0 10px}

/* ===========================  barra superior  =========================== */
.top{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:20px;
  padding:0 20px;height:52px;
  background:var(--panel);
  border-bottom:1px solid var(--linea);
}
.marca{display:flex;align-items:baseline;gap:9px;color:var(--tinta);flex:none}
.marca:hover{text-decoration:none}
.marca-n{font-weight:700;letter-spacing:-.02em;font-size:15px}
.marca-s{color:var(--tinta-3);font-size:11.5px;letter-spacing:.02em}

.buscador{flex:1 1 auto;max-width:560px;position:relative}
.buscador input{
  width:100%;height:34px;padding:0 12px 0 32px;
  font:inherit;color:var(--tinta);
  background:var(--papel);
  border:1px solid transparent;border-radius:var(--r);
}
.buscador input:hover{background:#eef1f0}
.buscador input:focus{background:var(--panel);border-color:var(--acento);outline:none;
                      box-shadow:0 0 0 3px var(--acento-bg)}
.buscador input::placeholder{color:var(--tinta-3)}
.buscador::before{
  content:"";position:absolute;left:11px;top:50%;width:11px;height:11px;
  margin-top:-7px;border:1.5px solid var(--tinta-3);border-radius:50%;
  pointer-events:none;
}
.buscador::after{
  content:"";position:absolute;left:20px;top:50%;width:5px;height:1.5px;
  margin-top:3px;background:var(--tinta-3);transform:rotate(45deg);
  pointer-events:none;
}
.top nav{margin-left:auto;display:flex;gap:18px;font-size:13px;flex:none}
.top nav a{color:var(--tinta-2)}
.top nav a:hover{color:var(--acento)}

main{max-width:1320px;margin:0 auto;padding:0 20px 90px}

/* ==========================  barra de coordenada  ====================== */
/* La ruta completa del ítem, que con 8 niveles de WBS es la única forma de
   saber dónde estás parado. */
.coord{
  display:flex;flex-wrap:wrap;align-items:center;gap:0 4px;
  padding:11px 0 0;font-size:12.5px;
}
.coord a,.coord .aqui{
  display:inline-flex;align-items:baseline;gap:5px;
  padding:2px 7px;border-radius:5px;color:var(--tinta-2);
}
.coord a:hover{background:var(--acento-bg);color:var(--acento);text-decoration:none}
.coord .aqui{background:var(--tinta);color:var(--panel)}
.coord .c{font-family:var(--mono);font-size:11.5px;opacity:.72}
.coord .sep{color:var(--linea);font-size:14px}

/* ===========================  cabecera de nodo  ========================= */
.cabecera{
  display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap;
  padding:14px 0 18px;
}
.cabecera .id{
  font-family:var(--mono);font-size:13px;color:var(--tinta-3);
  margin:7px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:8px;
}
.cabecera .contexto{color:var(--tinta-2);font-family:var(--texto);font-size:12.5px}
.acciones{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;flex:none}

/* ===============================  botones  ============================== */
button,.btn{
  font:inherit;font-size:13.5px;
  padding:7px 13px;border:1px solid var(--linea);border-radius:var(--r);
  background:var(--panel);color:var(--tinta);cursor:pointer;
  transition:border-color .12s, background .12s;
}
button:hover,.btn:hover{border-color:var(--tinta-3);text-decoration:none}
.btn-pri{background:var(--acento);border-color:var(--acento);color:#fff}
.btn-pri:hover{background:var(--acento-2);border-color:var(--acento-2)}
.btn-borrar{color:var(--aviso)}
.btn-borrar:hover{border-color:var(--aviso)}
.btn-peligro{background:var(--aviso);border-color:var(--aviso);color:#fff}
.btn-peligro:hover{background:#84313e;border-color:#84313e}
.btn-peligro:disabled{opacity:.6;cursor:default}

/* borrar no se deshace: el segundo paso dice en voz alta qué va a pasar */
.borrar .confirmar{display:inline-flex;align-items:center;gap:9px}
.borrar .confirmar[hidden]{display:none}   /* display gana sobre el atributo hidden */
.borrar .confirmar b{font-size:13px;font-weight:600;color:var(--aviso)}

/* ===============================  filtros  ============================== */
/* Plegados por defecto: siete selectores siempre abiertos gritan más que los
   datos. El resumen muestra cuáles están puestos. */
.filtros{margin:0 0 14px}
.filtros summary{
  display:flex;align-items:center;gap:9px;cursor:pointer;
  padding:7px 11px;width:fit-content;
  border:1px solid var(--linea);border-radius:var(--r);
  background:var(--panel);font-size:13px;color:var(--tinta-2);
  list-style:none;
}
.filtros summary::-webkit-details-marker{display:none}
.filtros summary::before{
  content:"";width:0;height:0;
  border:4px solid transparent;border-left-color:var(--tinta-3);
  transition:transform .14s;
}
.filtros[open] summary::before{transform:rotate(90deg) translateX(-1px)}
.filtros summary:hover{border-color:var(--tinta-3)}
.filtros .puestos{color:var(--acento);font-weight:600}

.campos{
  display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  margin-top:9px;padding:13px;
  background:var(--panel);border:1px solid var(--linea);border-radius:var(--r);
}
.campos select{
  font:inherit;font-size:13.5px;padding:6px 9px;
  border:1px solid var(--linea);border-radius:6px;
  background:var(--panel);color:var(--tinta);max-width:250px;cursor:pointer;
}
.campos select:focus{border-color:var(--acento);outline:none;box-shadow:0 0 0 3px var(--acento-bg)}
.limpiar{font-size:13px;color:var(--tinta-3)}

.meta{color:var(--tinta-2);font-size:13px;margin:0 0 10px}
.aviso{color:var(--aviso)}
.vacio{color:var(--tinta-3);padding:26px 2px}

/* ===============================  resumen  ============================== */
.resumen{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  gap:1px;margin:4px 0 22px;
  background:var(--linea);border:1px solid var(--linea);
  border-radius:var(--r);overflow:hidden;
}
.resumen > *{
  background:var(--panel);padding:13px 15px;color:inherit;
  display:flex;flex-direction:column;gap:1px;
}
a.tarjeta:hover{background:var(--panel-2);text-decoration:none}
a.tarjeta:hover b{color:var(--acento)}
.resumen b{
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:25px;font-weight:600;letter-spacing:-.03em;line-height:1.1;
}
.resumen span{font-size:11.5px;color:var(--tinta-3);letter-spacing:.01em}

/* ================================  tablas  ============================== */
table.lista{
  width:100%;border-collapse:collapse;
  background:var(--panel);border:1px solid var(--linea);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--sombra);
}
table.lista th{
  text-align:left;padding:9px 12px;
  background:var(--panel-2);border-bottom:1px solid var(--linea);
  white-space:nowrap;
}
table.lista td{
  padding:7px 12px;border-bottom:1px solid var(--linea-2);
  vertical-align:top;
}
table.lista tbody tr:last-child td{border-bottom:0}
table.lista tbody tr:hover td{background:var(--panel-2)}

/* Las filas que tienen ítems debajo son capítulos, no partidas: se leen como
   encabezado y no como algo que se pueda cubicar.

   La banda va en el tono del acento, no en un gris: un gris quedaría a medio
   camino entre el blanco de las filas y el papel del fondo, y en vez de
   destacar parecería un hueco en la tabla. */
tr.grupo > td{background:#dbeaeb;border-bottom-color:#c9dcde}
tr.grupo:hover > td{background:#cfe3e5}
tr.grupo > td:first-child{box-shadow:inset 3px 0 0 var(--acento)}
tr.grupo .nombre{color:var(--acento-2);font-weight:600}
tr.grupo .wbs .pre{color:#6f8f93}
tr.grupo .wbs .seg{color:var(--acento-2)}
tr.grupo .pista{color:#5d7b7f}
tr.grupo .lapiz{color:#6f8f93}
table.lista .num{text-align:right;font-size:13px;white-space:nowrap}
th.num{text-align:right}

/* --- el código como coordenada --- */
.wbs{font-size:12.5px;white-space:nowrap;letter-spacing:-.01em}
.wbs .pre{color:var(--tinta-3)}          /* segmentos heredados: se apagan */
.wbs .seg{color:var(--tinta);font-weight:600}  /* el que cambia: manda */
a.wbs:hover .seg{color:var(--acento)}
td.col-wbs{width:1%}

.desc{font-size:14px}
.cap{font-weight:600}
.pista{
  display:block;color:var(--tinta-3);font-size:11.5px;margin-top:2px;
  letter-spacing:.01em;
}
.pista .n{color:var(--tinta-2)}

/* --- cifras --- */
td.uf,.cifra{color:var(--valor)}
td.total{color:var(--valor);font-weight:600}
td.vacia{color:var(--tinta-3)}

/* --- una marca por fila, no tres --- */
.chip{
  display:inline-block;font-size:10.5px;font-weight:600;
  letter-spacing:.04em;padding:1px 6px;border-radius:4px;
  margin-left:7px;vertical-align:1px;white-space:nowrap;
  font-family:var(--texto);
}
.chip-rev{background:var(--aviso-bg);color:var(--aviso)}
.chip-mio{background:transparent;color:var(--acento);box-shadow:inset 0 0 0 1px var(--acento-bg)}

/* ==========================  celdas editables  ========================= */
td.ed{padding:3px 6px}
.campo{
  font:inherit;font-size:13px;width:100%;
  padding:4px 6px;border:1px solid transparent;border-radius:5px;
  background:transparent;color:inherit;
  transition:border-color .12s, background .12s;
}
td.ed.num .campo{text-align:right;color:var(--valor)}
td.ed .campo{font-family:var(--mono);font-variant-numeric:tabular-nums}
/* El selector de unidad va sin cromo hasta que lo tocas: una flecha por fila,
   en 3.500 filas, es ruido. */
td.ed select.campo{
  appearance:none;-webkit-appearance:none;
  color:var(--tinta-2);cursor:pointer;padding-right:16px;
  background-image:none;
}
td.ed select.campo:hover,
td.ed select.campo:focus{
  background-image:
    linear-gradient(45deg,transparent 50%,var(--tinta-3) 50%),
    linear-gradient(135deg,var(--tinta-3) 50%,transparent 50%);
  background-position:calc(100% - 10px) calc(50% + 1px), calc(100% - 6px) calc(50% + 1px);
  background-size:4px 4px, 4px 4px;
  background-repeat:no-repeat;
}
.datos select.campo{cursor:pointer;color:var(--tinta)}
.campo:hover{border-color:var(--linea);background:var(--panel)}
.campo:focus{
  border-color:var(--acento);background:var(--panel);outline:none;
  box-shadow:0 0 0 3px var(--acento-bg);
}
.campo::placeholder{color:#c2ccd0}
.campo.guardando{opacity:.5}
.campo.ok{border-color:var(--ok);background:var(--ok-bg)}
.campo.err{border-color:var(--aviso);background:var(--aviso-bg)}

/* --- renombrar --- */
/* En la tabla el nombre es el enlace de navegación, así que editarlo necesita
   su propio gesto: un lápiz que solo aparece al pasar por la fila. */
/* Tenue pero siempre presente: si solo apareciera al pasar por encima nadie
   sabría que se puede renombrar, y el blanco sería más difícil de acertar. */
.lapiz{
  padding:2px 4px;margin-left:4px;border:0;background:none;
  color:var(--tinta-3);vertical-align:-1px;line-height:1;cursor:pointer;
  opacity:.35;transition:opacity .12s, color .12s;
}
.lapiz svg{display:block;pointer-events:none}
tr:hover .lapiz{opacity:.8}
.lapiz:hover{opacity:1;color:var(--acento)}
.lapiz:focus-visible{opacity:1}
td.editando > a.nombre,
td.editando > .lapiz,
td.editando > .chip{display:none}
.nombre-edit{font-family:var(--texto);font-size:14px}

/* En la ficha, el nombre es el título: se edita ahí mismo. */
h1 .titulo{
  font:inherit;letter-spacing:inherit;color:inherit;
  width:100%;max-width:760px;padding:1px 6px;margin-left:-7px;
  font-family:var(--texto);
}
h1 .titulo:hover{border-color:var(--linea)}

.copiar{
  padding:3px 9px;font-size:11.5px;color:var(--tinta-3);
  border-color:var(--linea-2);white-space:nowrap;
}
tr:hover .copiar{color:var(--tinta-2);border-color:var(--linea)}
.copiar.hecho{background:var(--acento);border-color:var(--acento);color:#fff}

/* =========================  ficha de la partida  ======================= */
.tarj{
  background:var(--panel);border:1px solid var(--linea);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--sombra);
}
table.params{width:100%;border-collapse:collapse}
.params th{
  text-align:left;font-family:var(--mono);font-size:12.5px;font-weight:500;
  color:var(--acento);padding:9px 13px;width:200px;
  background:var(--panel-2);border-bottom:1px solid var(--linea-2);
  white-space:nowrap;
}
.params td{padding:9px 13px;border-bottom:1px solid var(--linea-2);font-size:14px}
.params tr:last-child > *{border-bottom:0}
.params td.acc{width:80px;text-align:right}
.params .libre th{color:var(--tinta-3)}
.params .libre td{color:var(--tinta-3);font-style:italic}

/* diferencias entre documentos: vigente a la izquierda, superado a la derecha */
.cruce .params th{width:130px}
.cruce .params td{width:auto}
.cruce .viejo{color:var(--aviso);text-decoration:line-through;
              text-decoration-color:#d9b4ba;text-decoration-thickness:1px}
.cruce .pie > *{
  font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--tinta-3);font-style:normal;
}

.datos dl{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  gap:1px;margin:0;background:var(--linea-2);
}
.datos dl > div{background:var(--panel);padding:10px 14px}
.datos dd{margin:2px 0 0;font-size:14.5px}
.datos .ed dd{margin:0}
.datos .ed .campo{margin-left:-6px;font-size:14px}
.datos dd.cifra{font-size:15px}
.ruta-larga{color:var(--tinta-3);font-size:12.5px;margin:11px 2px 0}

.nota{
  background:var(--panel);border:1px solid var(--linea);
  border-left:3px solid var(--valor);
  color:var(--tinta-2);padding:10px 13px;
  border-radius:0 var(--r) var(--r) 0;font-size:13.5px;margin:0 0 18px;
}

.hermanos{list-style:none;margin:0;padding:0;columns:2;column-gap:30px}
.hermanos li{break-inside:avoid;padding:2px 0;font-size:13.5px}
.hermanos .wbs{margin-right:7px}
.hermanos .aqui{font-weight:600}
.hermanos .aqui a{color:var(--tinta)}

/* ==============================  alta  ================================= */
.explica{color:var(--tinta-2);font-size:13.5px;max-width:68ch;margin:4px 0 20px}
.error{background:var(--aviso-bg);color:var(--aviso);padding:9px 13px;
       border-radius:var(--r);margin:0 0 16px;font-size:13.5px}
.dos-col{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.alta{
  flex:1 1 440px;background:var(--panel);border:1px solid var(--linea);
  border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:15px;
  box-shadow:var(--sombra);
}
.alta label{display:flex;flex-direction:column;gap:5px}
.alta input,.alta textarea,.alta select{
  font:inherit;font-size:14px;padding:7px 10px;
  border:1px solid var(--linea);border-radius:6px;background:var(--panel);color:var(--tinta);
}
.alta input:focus,.alta textarea:focus{
  border-color:var(--acento);outline:none;box-shadow:0 0 0 3px var(--acento-bg);
}
.alta .fila{display:flex;gap:12px;flex-wrap:wrap}
.alta .fila label{flex:1 1 130px}
.req{color:var(--aviso)}
.propuesto{
  font-family:var(--mono);font-size:21px;font-weight:600;
  color:var(--acento);letter-spacing:-.02em;
}
.ayuda{color:var(--tinta-3);font-size:12.5px;margin:0}
.botones{display:flex;gap:8px;margin-top:2px}
.contexto-alta{
  flex:1 1 290px;background:var(--panel);border:1px solid var(--linea);
  border-radius:var(--r);padding:20px;box-shadow:var(--sombra);
}
.contexto-alta h2{margin-top:0}
.existentes{margin:0;padding:0;list-style:none;font-size:13.5px;color:var(--tinta-2)}
.existentes li{padding:3px 0;border-bottom:1px solid var(--linea-2)}
.existentes li:last-child{border-bottom:0}
.existentes .wbs{margin-right:7px}
.existentes .pista{display:inline;margin-left:7px}

/* ==============================  responsive  =========================== */
@media (max-width:900px){
  .top{height:auto;flex-wrap:wrap;padding:10px 16px;gap:10px}
  .buscador{order:3;flex:1 1 100%;max-width:none}
  .top nav{margin-left:auto}
  main{padding:0 16px 60px}
  .hermanos{columns:1}
  table.lista{display:block;overflow-x:auto}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}

/* ==========================  moneda y configuración  ==================== */
/* El itemizado se guarda en UF; el interruptor solo cambia la lectura. */
.moneda{display:flex;align-items:center;gap:0;flex:none}
.moneda button{
  padding:5px 11px;font-size:12.5px;border-radius:0;
  border:1px solid var(--linea);border-right-width:0;
  color:var(--tinta-3);background:var(--panel);
}
.moneda button:first-child{border-radius:6px 0 0 6px}
.moneda button:last-of-type{border-radius:0 6px 6px 0;border-right-width:1px}
.moneda button.activo{
  background:var(--acento);border-color:var(--acento);color:#fff;font-weight:600;
}
.moneda button.activo + button{border-left-color:var(--acento)}
.uf-valor{
  margin-left:11px;font-family:var(--mono);font-size:11.5px;
  color:var(--valor);white-space:nowrap;
}
body.en-pesos .total,
body.en-pesos td.ed.num .campo{color:var(--valor)}

.ok-aviso{
  background:var(--ok-bg);color:var(--ok);border-radius:var(--r);
  padding:9px 13px;margin:0 0 16px;font-size:13.5px;
}

.lote{padding:0}
.accion-lote{
  display:flex;gap:18px;align-items:center;flex-wrap:wrap;
  padding:16px 18px;border-bottom:1px solid var(--linea-2);
}
.accion-lote:last-child{border-bottom:0}
.accion-lote > div{flex:1 1 340px}
.accion-lote b{font-size:14.5px;font-weight:600}
.accion-lote p{margin:3px 0 0;color:var(--tinta-2);font-size:13px;max-width:64ch}
.accion-lote button[disabled]{opacity:.45;cursor:default}
.accion-lote .borrar{margin-left:auto}

@media (max-width:900px){
  .moneda{order:4}
}

/* ======================  panel de unidades constructivas  ============== */
/* El equipo salta entre edificios todo el día: PAX, SED, CCA. El panel usa
   sus siglas —las mismas de las hojas del LI— porque es como los nombran. */
.marco{display:flex;align-items:flex-start;gap:0;max-width:1560px;margin:0 auto}
.marco > main{flex:1 1 auto;min-width:0;max-width:none;margin:0}

.panel{
  flex:0 0 214px;position:sticky;top:52px;align-self:flex-start;
  max-height:calc(100vh - 52px);overflow-y:auto;
  padding:14px 10px 40px;border-right:1px solid var(--linea);
  background:var(--panel);
}
.grupo-uc{
  font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;
  color:var(--tinta-3);margin:16px 0 5px;padding:0 8px;
}
.grupo-uc:first-of-type{margin-top:12px}

.ir{
  display:grid;grid-template-columns:1fr auto;align-items:baseline;
  gap:0 8px;padding:5px 8px;border-radius:6px;color:var(--tinta);
  border-left:2px solid transparent;
}
.ir:hover{background:var(--acento-bg);text-decoration:none}
.ir .sigla{font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:-.01em}
.ir .nom{
  grid-column:1 / -1;font-size:11px;color:var(--tinta-3);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ir .cuenta{
  font-family:var(--mono);font-size:11px;color:var(--tinta-3);
  font-variant-numeric:tabular-nums;
}
.ir.aqui{
  background:var(--acento);border-left-color:var(--acento-2);
}
.ir.aqui .sigla,.ir.aqui .nom,.ir.aqui .cuenta{color:#fff}
.ir.aqui .nom,.ir.aqui .cuenta{opacity:.75}

@media (max-width:1100px){
  .panel{display:none}
}

/* ==============================  entrada  ============================== */
.pantalla-login{
  display:flex;align-items:center;justify-content:center;
  min-height:100vh;padding:24px;
}
.entrada{display:flex;flex-direction:column;gap:18px;width:100%;max-width:360px}
.marca-login{display:flex;align-items:baseline;gap:10px;justify-content:center}
.pantalla-login .alta{flex:none}
.pantalla-login .botones button{width:100%;justify-content:center}
.salir{
  border:0;background:none;padding:0;font-size:13px;color:var(--tinta-2);
}
.salir:hover{color:var(--aviso);border:0}