/* Letra de títulos y menús: Poppins (licencia libre OFL), guardada en esta misma carpeta para que funcione sin internet. */
@font-face { font-family: "Poppins"; font-weight: 500; font-style: normal; font-display: swap; src: url("fuentes/Poppins-Medium.woff") format("woff"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-style: normal; font-display: swap; src: url("fuentes/Poppins-Bold.woff") format("woff"); }
:root {
  --fondo: #f3f6f3; --panel: #ffffff; --tinta: #1c2430; --suave: #667085; --linea: #e3e6eb;
  --marca: #385134; --marca-osc: #283b26; --marca-media: #5a7d55; --marca-clara: #e6eee5;   /* verde Altamira: oscuro, medio y claro */
  --ok: #14703f; --ok-fondo: #dff3e6;
  --aviso: #8a5a00; --aviso-fondo: #fff2d1;
  --revisar: #b42318; --revisar-fondo: #fde8e6;
  --info: #1d5fa8; --info-fondo: #e6effb;
  --radio: 8px;
  --titulos: "Poppins", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { font-size: 15px; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; line-height: 1.45; }
a { color: var(--marca); }
h1 { font-size: 1.45rem; margin: 0 0 .25rem; }
h2 { font-size: 1.05rem; margin: 0 0 .6rem; }
.suave { color: var(--suave); }
.chico { font-size: .86rem; }

/* cabecera: barra principal + submenú de la herramienta */
.cabecera { position: sticky; top: 0; z-index: 20; box-shadow: 0 1px 3px rgba(16,24,40,.18); }
.barra { background: var(--marca); color: #fff; display: flex; align-items: center; gap: 1.5rem; padding: 0 1.25rem; height: 54px; }
.barra .logo { display: flex; align-items: center; gap: .6rem; color: #fff; text-decoration: none; }
.barra .logo img { height: 20px; width: auto; display: block; }
.barra .logo span { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; opacity: .8; border-left: 1px solid rgba(255,255,255,.35); padding-left: .6rem; }
.barra nav { display: flex; gap: .2rem; flex: 1; }
.barra nav a { color: #e3ede4; text-decoration: none; padding: .45rem .85rem; border-radius: 6px; font-weight: 500; }
.barra nav a:hover { background: rgba(255,255,255,.12); color: #fff; }
.barra nav a.activo { background: rgba(255,255,255,.2); color: #fff; }
.barra .usuario { display: flex; align-items: center; gap: .8rem; font-size: .9rem; color: #e3ede4; }
.barra .usuario .quien { font-weight: 600; color: #fff; }
.barra .usuario a, .barra .usuario button { color: #e3ede4; background: none; border: 0; cursor: pointer; font: inherit; text-decoration: none; padding: 0; opacity: .85; }
.barra .usuario a:hover, .barra .usuario button:hover { opacity: 1; text-decoration: underline; }
.subbarra { background: #fff; border-bottom: 1px solid var(--linea); display: flex; align-items: center; gap: .2rem; padding: 0 1.25rem; height: 42px; }
.subbarra .subtitulo { font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--suave); margin-right: .9rem; font-weight: 600; }
.subbarra a { color: #344054; text-decoration: none; padding: .55rem .8rem; border-bottom: 3px solid transparent; font-weight: 500; font-size: .93rem; margin-bottom: -1px; }
.subbarra a:hover { color: var(--marca); background: var(--fondo); }
.subbarra a.activo { color: var(--marca); border-bottom-color: var(--marca); font-weight: 600; }

.contenedor { max-width: 1280px; margin: 0 auto; padding: 1.25rem; }
.contenedor.ancho { max-width: none; padding: 1rem 1.25rem; }
.panel { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1rem 1.15rem; margin-bottom: 1rem; }
.panel > h2:first-child { margin-top: 0; }

/* mensajes */
.mensajes { margin-bottom: 1rem; }
.mensaje { padding: .65rem .9rem; border-radius: var(--radio); margin-bottom: .5rem; border: 1px solid; }
.mensaje.ok { background: var(--ok-fondo); border-color: #b9dfca; color: var(--ok); }
.mensaje.error { background: var(--revisar-fondo); border-color: #f4c3be; color: var(--revisar); }
.mensaje.aviso { background: var(--aviso-fondo); border-color: #f0d590; color: var(--aviso); }

/* formularios */
label { display: block; font-size: .84rem; font-weight: 600; margin-bottom: .2rem; color: #344054; }
input[type=text], input[type=password], input[type=date], input[type=month], input[type=number], input[type=search], select, textarea {
  width: 100%; padding: .5rem .6rem; border: 1px solid #c5cbd5; border-radius: 6px; font: inherit; background: #fff; color: var(--tinta); }
input:focus, select:focus, textarea:focus { outline: 2px solid #9dc0a1; border-color: var(--marca); }
input[readonly] { background: #f3f4f6; }
textarea { min-height: 70px; resize: vertical; }
.campo { margin-bottom: .75rem; }
.campo .ayuda { font-size: .8rem; color: var(--suave); margin-top: .15rem; }
.rejilla { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.rejilla.dos { grid-template-columns: 1fr 1fr; }
.rejilla.tres { grid-template-columns: repeat(3, 1fr); }
.fila { display: flex; gap: .6rem; align-items: end; flex-wrap: wrap; }
.corregido input, .corregido select { background: #fff8e1; border-color: #e0b84a; }
.corregido .antes { font-size: .78rem; color: var(--aviso); margin-top: .15rem; }

/* botones */
.boton { display: inline-block; padding: .5rem 1rem; border-radius: 6px; border: 1px solid var(--marca); background: var(--marca); color: #fff; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
.boton:hover { background: var(--marca-osc); }
.boton.claro { background: #fff; color: var(--marca); }
.boton.claro:hover { background: var(--marca-clara); }
.boton.verde { background: var(--ok); border-color: var(--ok); }
.boton.rojo { background: #fff; color: var(--revisar); border-color: #e2a29b; }
.boton.rojo:hover { background: var(--revisar-fondo); }
.boton.ambar { background: #fff; color: var(--aviso); border-color: #dcb75e; }
.boton.ambar:hover { background: var(--aviso-fondo); }
.boton:disabled { opacity: .5; cursor: not-allowed; }

/* pastillas de estado y alertas */
.pastilla { display: inline-block; padding: .12rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.pastilla.OK, .pastilla.Aprobada { background: var(--ok-fondo); color: var(--ok); }
.pastilla.Aviso, .pastilla.Observada { background: var(--aviso-fondo); color: var(--aviso); }
.pastilla.Revisar { background: var(--revisar-fondo); color: var(--revisar); }
.pastilla.Pendiente { background: var(--info-fondo); color: var(--info); }
.pastilla.Esperando-definitiva { background: #ece6f7; color: #4d2f8c; white-space: normal; line-height: 1.25; }
.pastilla.Anulada { background: #eceff3; color: #5b6472; text-decoration: line-through; }
.pastilla.Ignorada { background: #eceff3; color: #5b6472; }
.pastilla.Borrador { background: var(--info-fondo); color: var(--info); }
.pastilla.Lista { background: var(--aviso-fondo); color: var(--aviso); }
.pastilla.Emitida { background: var(--ok-fondo); color: var(--ok); }
.chip { background: var(--marca-clara); color: var(--marca-osc); border-radius: 6px; padding: .15rem .55rem; font-size: .82rem; font-weight: 600; }
.semaforo { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; vertical-align: middle; }
.semaforo.OK { background: #2fa36b; } .semaforo.Aviso { background: #e0a100; } .semaforo.Revisar { background: #d92d20; }
.alertas { list-style: none; margin: 0; padding: 0; }
.alertas li { padding: .45rem .7rem; border-radius: 6px; margin-bottom: .35rem; font-size: .92rem; border-left: 4px solid; }
.alertas li.Revisar { background: var(--revisar-fondo); border-color: #d92d20; }
.alertas li.Aviso { background: var(--aviso-fondo); border-color: #e0a100; }
.alertas li.Info { background: var(--info-fondo); border-color: #5b9bd8; }
.alertas b { font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; margin-right: .35rem; }

/* tablas */
.tabla-envoltura { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .5rem .6rem; text-align: left; border-bottom: 1px solid var(--linea); vertical-align: top; }
th { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--suave); background: #fafbfc; position: sticky; top: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:hover { background: #f5f9f5; }
tr.click { cursor: pointer; }
tr.anulada td { color: #8a929e; }

/* resumen por estado */
.tarjetas { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.tarjeta { flex: 1; min-width: 140px; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); padding: .7rem .9rem; text-decoration: none; color: inherit; }
.tarjeta:hover { border-color: var(--marca); }
.tarjeta.activa { border-color: var(--marca); box-shadow: 0 0 0 2px var(--marca-clara); }
.tarjeta .n { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.tarjeta .t { font-size: .82rem; color: var(--suave); }

/* pantalla de revisión */
.revision { display: grid; grid-template-columns: minmax(430px, 46%) 1fr; gap: 1rem; align-items: start; }
.visor { position: sticky; top: 66px; height: calc(100vh - 82px); background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); display: flex; flex-direction: column; }
.visor iframe { flex: 1; border: 0; width: 100%; border-radius: 0 0 var(--radio) var(--radio); }
.visor .vacio { padding: 2rem; text-align: center; color: var(--suave); }
.visor .titulo { padding: .5rem .8rem; border-bottom: 1px solid var(--linea); font-size: .85rem; color: var(--suave); }
.cabecera-factura { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .75rem; }
.acciones { display: flex; gap: .5rem; flex-wrap: wrap; }
.bitacora { font-size: .85rem; }
.bitacora li { margin-bottom: .35rem; }
details.panel > summary { cursor: pointer; font-weight: 600; }
.pie-fijo { position: sticky; bottom: .5rem; z-index: 5; background: #fff; padding: .6rem .75rem; margin-top: .5rem; box-shadow: 0 -2px 10px rgba(0,0,0,.12); }
.pie-opciones { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin-bottom: .45rem; font-size: .85rem; }
.pie-opciones label { font-weight: 400; margin: 0; }
.pie-fila { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.pie-fila input[type=text] { flex: 1 1 200px; min-width: 0; box-sizing: border-box; }
.pie-fila .acciones { flex-wrap: nowrap; }

/* acceso */
.acceso { max-width: 380px; margin: 9vh auto; }
.acceso .panel { padding: 1.5rem; }
.acceso h1 { text-align: center; }

@media (max-width: 1000px) {
  .revision { grid-template-columns: 1fr; }
  .visor { position: static; height: 70vh; }
  .rejilla.tres { grid-template-columns: 1fr 1fr; }
}

/* ---- zona para soltar archivos (Cargar facturas) ---- */
.zona { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.4rem; text-align:center; cursor:pointer;
        min-height:150px; padding:1.2rem; border:2px dashed var(--marca); border-radius:10px; background:var(--marca-clara); transition:background .15s, border-color .15s; }
.zona:hover, .zona:focus-visible { background:#dbe9dd; outline:none; }
.zona.encima { background:#D6E6D8; border-style:solid; }
.zona.con-archivos { background:#EEF5EE; }
.zona-grande { font-size:1.15rem; font-weight:600; color:var(--marca); }
.zona-chica { font-size:.9rem; font-weight:400; color:#555; max-width:46rem; }
.zona + .ayuda { margin-top:.5rem; }
.zona input[type=file] { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }

/* ---- fichas de filtro (Exportar) ---- */
.fichas { display:flex; flex-wrap:wrap; gap:.4rem; }
.ficha { display:inline-flex; align-items:center; gap:.35rem; padding:.25rem .65rem; border:1px solid var(--linea); border-radius:999px; background:#fff; cursor:pointer; font-weight:400; font-size:.9rem; }
.ficha:hover { border-color:var(--marca-media); }
.ficha.activa { background:var(--marca-clara); border-color:var(--marca); font-weight:600; }
.ficha input { margin:0; }

body[data-sub] .visor { top: 108px; height: calc(100vh - 124px); }
@media (max-width: 1000px) { body[data-sub] .visor { position: static; height: 70vh; } }

/* ---- página de inicio ---- */
.bienvenida { margin: .5rem 0 1.4rem; }
.bienvenida h1 { font-size: 1.9rem; font-weight: 700; letter-spacing: -.01em; color: var(--marca-osc); }
.herramientas { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.herramienta { background: #fff; border: 1px solid var(--linea); border-radius: 12px; box-shadow: 0 1px 2px rgba(16,24,40,.05); display: flex; flex-direction: column; transition: box-shadow .15s, border-color .15s, transform .15s; }
.herramienta:hover { border-color: var(--marca-media); box-shadow: 0 6px 18px rgba(40,59,38,.12); transform: translateY(-1px); }
.herramienta-principal { display: flex; flex-direction: column; gap: .5rem; padding: 1.3rem 1.3rem 1rem; text-decoration: none; color: inherit; flex: 1; }
.herramienta-icono { width: 52px; height: 52px; border-radius: 12px; background: var(--marca); color: #fff; display: flex; align-items: center; justify-content: center; }
.herramienta-nombre { font-size: 1.2rem; font-weight: 700; color: var(--marca-osc); margin-top: .3rem; }
.herramienta-texto { color: var(--suave); font-size: .93rem; }
.herramienta-enlaces { display: flex; flex-wrap: wrap; gap: .35rem; padding: .8rem 1.3rem 1.1rem; border-top: 1px solid var(--linea); }
.herramienta-enlaces a { font-size: .85rem; text-decoration: none; padding: .2rem .7rem; border-radius: 999px; background: var(--marca-clara); color: var(--marca-osc); font-weight: 600; }
.herramienta-enlaces a:hover { background: var(--marca); color: #fff; }

/* ---- ingreso ---- */
.acceso-logo { display: block; width: 240px; max-width: 70%; margin: 0 auto; border-radius: 10px; }

/* ---- retoques generales ---- */
h1 { font-size: 1.55rem; font-weight: 700; color: var(--marca-osc); letter-spacing: -.005em; margin-bottom: .3rem; }
h1 + p.suave { margin-top: 0; margin-bottom: 1.1rem; }
h2 { font-size: 1.05rem; font-weight: 700; color: #1f2937; }
.panel { border-radius: 10px; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.boton { border-radius: 7px; transition: background .12s, box-shadow .12s; box-shadow: 0 1px 1px rgba(16,24,40,.08); }
.boton:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid #9dc0a1; outline-offset: 2px; }
th { background: var(--marca-clara); color: var(--marca-osc); border-bottom: 2px solid #cfdccf; }
tbody tr:hover { background: #f1f6f1; }
tbody tr:last-child td { border-bottom: 0; }
.tarjeta { border-radius: 10px; transition: box-shadow .12s, border-color .12s; }
.tarjeta:hover { box-shadow: 0 3px 10px rgba(40,59,38,.1); }
.tarjeta .n { color: var(--marca-osc); }
.mensaje { border-radius: 8px; }
@media (max-width: 760px) {
  .barra { gap: .6rem; padding: 0 .75rem; height: auto; min-height: 54px; flex-wrap: wrap; padding-top: .35rem; padding-bottom: .35rem; }
  .barra .logo span { display: none; }
  .barra nav { order: 3; flex-basis: 100%; overflow-x: auto; }
  .barra .usuario { margin-left: auto; }
  .subbarra { overflow-x: auto; padding: 0 .75rem; }
  .contenedor { padding: .9rem; }
}

/* ---- anterior / siguiente en la revisión ---- */
.paginador { display: inline-flex; align-items: center; gap: .5rem; }
.paginador .posicion { font-size: .88rem; font-weight: 600; color: var(--marca-osc); min-width: 4.2rem; text-align: center; font-variant-numeric: tabular-nums; }
.chico-boton { padding: .3rem .7rem; font-size: .88rem; }
.boton.apagado { opacity: .4; cursor: default; pointer-events: none; }

/* ---- franja de pendientes (inicio) ---- */
.franja { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .6rem; background: #fff; border: 1px solid var(--linea); border-radius: 10px; padding: .6rem .9rem; margin-bottom: 1.1rem; }
.franja-titulo { font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--suave); font-weight: 700; margin-right: .3rem; }
.franja-dato { text-decoration: none; padding: .25rem .8rem; border-radius: 999px; font-size: .92rem; border: 1px solid transparent; }
.franja-dato b { font-size: 1.05rem; margin-right: .15rem; }
.franja-dato.info { background: var(--info-fondo); color: var(--info); }
.franja-dato.aviso { background: var(--aviso-fondo); color: var(--aviso); }
.franja-dato.ok { background: var(--ok-fondo); color: var(--ok); }
.franja-dato:hover { border-color: currentColor; }
.franja-dato.cero { background: #f2f4f7; color: var(--suave); }
.franja-ok { color: var(--ok); font-weight: 600; font-size: .92rem; }

/* ---- antigüedad en la lista ---- */
.antiguedad { font-size: .76rem; color: var(--suave); margin-top: .15rem; }
.antiguedad.vieja { color: var(--aviso); font-weight: 700; }

/* ================= Mejoras estéticas (lote 2) ================= */

/* 1. Letra del logo en títulos, menú y encabezados de tarjetas (el cuerpo y las tablas conservan la letra de siempre). */
h1, h2, .barra nav a, .subbarra a, .subbarra .subtitulo, .barra .logo span, .herramienta-nombre, .franja-titulo,
.bienvenida-fecha, .ingreso-marca p { font-family: var(--titulos); }
h1 { font-weight: 700; letter-spacing: 0; }
h2 { font-weight: 700; }
.barra nav a { font-weight: 500; font-size: .9rem; }
.subbarra a { font-weight: 500; font-size: .86rem; }
.subbarra a.activo { font-weight: 700; }
.subbarra .subtitulo { font-weight: 700; font-size: .7rem; }
.herramienta-nombre { font-weight: 700; font-size: 1.1rem; }

/* 4. Íconos pequeños */
.ico { flex: none; vertical-align: -3px; }
.boton .ico { margin-right: .4rem; vertical-align: -3px; }
.boton.chico-boton .ico { width: 14px; height: 14px; }
.subbarra a .ico { margin-right: .4rem; vertical-align: -3px; opacity: .8; }
.subbarra a.activo .ico { opacity: 1; }
.subbarra a { display: inline-flex; align-items: center; }
.boton { display: inline-flex; align-items: center; justify-content: center; }

/* 2. Inicio con banda de bienvenida */
.bienvenida { margin: 0; background: linear-gradient(105deg, var(--marca-osc) 0%, var(--marca) 55%, var(--marca-media) 130%); color: #fff; }
.bienvenida-interior { max-width: 1280px; margin: 0 auto; padding: 1.7rem 1.25rem 1.9rem; }
.bienvenida h1 { color: #fff; font-size: 1.9rem; margin: 0 0 .25rem; }
.bienvenida-fecha { margin: 0 0 .35rem; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; opacity: .75; font-weight: 500; }
.bienvenida-texto { margin: 0; opacity: .88; font-size: 1rem; }
.bienvenida + .contenedor { padding-top: 1.4rem; }

/* 3. Ingreso en dos mitades */
.contenedor.sin-marco { max-width: none; padding: 0; }
.ingreso { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
.ingreso-marca { background: linear-gradient(180deg, rgba(38,62,36,.55) 0%, rgba(38,62,36,.75) 45%, rgba(30,50,30,.95) 100%), url("mina.jpg") center / cover no-repeat, var(--marca-osc); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; text-align: center; }
.ingreso-marca img { width: min(380px, 70%); height: auto; }
.ingreso-marca p { margin: 1.6rem 0 0; font-size: 1rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; opacity: .85; line-height: 1.7; }
.ingreso-form { display: flex; align-items: center; justify-content: center; padding: 2rem 1.25rem; }
.ingreso-form .acceso { width: 100%; max-width: 380px; margin: 0; }
.ingreso-form .acceso h1 { text-align: left; }
.ingreso-form .acceso > p { margin: 0 0 1.1rem; }
@media (max-width: 800px) {
  .ingreso { grid-template-columns: 1fr; min-height: 0; }
  .ingreso-marca { padding: 2rem 1rem 1.6rem; background: linear-gradient(150deg, var(--marca-osc) 0%, var(--marca) 60%, var(--marca-media) 140%); }   /* en celular no hay espacio para la foto */
  .ingreso-marca img { width: 200px; }
  .ingreso-marca p { margin-top: 1rem; font-size: .8rem; }
  .ingreso-form { padding: 1.5rem 1rem 2.5rem; }
}

/* 5. Barra de acciones de la revisión: más delgada (sigue fija abajo) */
.pie-fijo { padding: .35rem .6rem; margin-top: .35rem; bottom: .35rem; }
.pie-fijo.panel { margin-bottom: 0; }
.pie-opciones { margin-bottom: .25rem; gap: .1rem 1rem; font-size: .8rem; }
.pie-fila { gap: .45rem; }
.pie-fijo input[type=text] { padding: .3rem .5rem; font-size: .88rem; }
.pie-fijo .boton { padding: .3rem .7rem; font-size: .88rem; }
.pie-fijo .boton .ico { width: 15px; height: 15px; margin-right: .3rem; }
.pie-fila .acciones { gap: .35rem; }

/* 6. Aviso de «cargando» */
.barra-espera { height: 5px; border-radius: 999px; background: var(--marca-clara); overflow: hidden; margin-top: .8rem; position: relative; }
.barra-espera[hidden] { display: none; }
.barra-espera span { position: absolute; top: 0; bottom: 0; width: 35%; background: var(--marca); border-radius: 999px; animation: espera 1.1s ease-in-out infinite; }
@keyframes espera { 0% { left: -35%; } 100% { left: 100%; } }
.boton:disabled { position: relative; }
@media (prefers-reduced-motion: reduce) { .barra-espera span { animation: none; width: 100%; opacity: .5; } }

/* 7. Mensajes emergentes */
.mensajes { position: fixed; top: 70px; right: 1rem; z-index: 50; width: min(420px, calc(100vw - 2rem)); margin: 0; display: flex; flex-direction: column; gap: .5rem; }
.mensajes .mensaje { display: flex; align-items: flex-start; gap: .6rem; margin: 0; box-shadow: 0 6px 20px rgba(16,24,40,.18); transition: opacity .25s, transform .25s; animation: entra .25s ease-out; }
.mensaje-texto { flex: 1; }
.mensaje-cerrar { flex: none; background: none; border: 0; color: inherit; font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0 .1rem; opacity: .65; }
.mensaje-cerrar:hover { opacity: 1; }
.mensaje.saliendo { opacity: 0; transform: translateX(20px); }
@keyframes entra { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.ingreso .mensajes, body:not([data-sub]) .mensajes { top: 1rem; }
body[data-sub] .mensajes { top: 108px; }

/* 10. Pantallas vacías */
td.sin-borde { border-bottom: 0; padding: 0; }
.vacio-amable { display: flex; flex-direction: column; align-items: center; gap: .45rem; text-align: center; padding: 2.4rem 1rem; max-width: 460px; margin: 0 auto; }
.vacio-amable strong { font-family: var(--titulos); font-size: 1.05rem; color: var(--marca-osc); }
.vacio-icono { width: 68px; height: 68px; border-radius: 50%; background: var(--marca-clara); color: var(--marca); display: flex; align-items: center; justify-content: center; margin-bottom: .3rem; }
.vacio-amable .boton { margin-top: .6rem; }

/* Barra de acciones editable: opciones + comentario en una fila, botones en la de abajo (2 filas en vez de 3) */
.pie-fijo.compacto { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem; }
.pie-fijo.compacto .pie-opciones, .pie-fijo.compacto .pie-fila { display: contents; }
.pie-fijo.compacto .pie-opciones label { flex: none; white-space: nowrap; }
.pie-fijo.compacto input[type=text] { flex: 1 1 220px; }
.pie-fijo.compacto .acciones { flex: 1 0 100%; }

/* ---- selector de servicios (lista de opciones por proveedor) ---- */
.servicio-caja { position: relative; }
.servicio-caja.mejorada input[name=servicio] { display: none; }
.servicio-cuadro { display: flex; align-items: center; gap: .4rem; min-height: 38px; padding: .3rem .6rem; border: 1px solid #c5ccd6; border-radius: 6px; background: #fff; cursor: pointer; }
.servicio-cuadro:focus-visible, .servicio-caja.abierta .servicio-cuadro { border-color: var(--marca); outline: 2px solid #9dc0a1; outline-offset: 0; }
.servicio-fichas { display: flex; flex-wrap: wrap; gap: .3rem; flex: 1; }
.servicio-ficha { background: var(--marca-clara); color: var(--marca-osc); border-radius: 999px; padding: .1rem .6rem; font-size: .88rem; font-weight: 600; }
.servicio-ficha.otra { background: var(--aviso-fondo); color: var(--aviso); }
.servicio-vacio { flex: 1; color: var(--suave); }
.servicio-vacio[hidden] { display: none; }
.servicio-flecha { color: var(--suave); font-size: 1.1rem; margin-left: auto; }
.servicio-panel { position: absolute; z-index: 15; left: 0; right: 0; top: calc(100% + 4px); background: #fff; border: 1px solid var(--linea); border-radius: 8px; box-shadow: 0 8px 24px rgba(16,24,40,.18); padding: .4rem; max-height: 60vh; overflow: auto; }
.servicio-panel[hidden] { display: none; }
.servicio-op { display: flex; align-items: center; gap: .5rem; padding: .35rem .5rem; border-radius: 6px; cursor: pointer; font-weight: 400; margin: 0; }
.servicio-op:hover { background: #f1f6f1; }
.servicio-op.sugerida { background: #f3f9f2; }
.servicio-op input[type=checkbox] { width: auto; margin: 0; }
.servicio-nombre { flex: 1; }
.servicio-etiqueta { background: var(--ok-fondo); color: var(--ok); border-radius: 999px; padding: 0 .55rem; font-size: .74rem; font-weight: 700; }
.servicio-otro { border-top: 1px solid var(--linea); margin-top: .3rem; padding-top: .3rem; }
.servicio-otro-texto { width: 100%; margin: .2rem 0 .3rem; }
.servicio-otro-texto[hidden] { display: none; }
.servicio-pie { display: flex; align-items: center; justify-content: space-between; gap: .5rem; border-top: 1px solid var(--linea); padding: .4rem .3rem 0; margin-top: .3rem; }

/* Calculadora de importes: casillas rellenadas automáticamente */
.campo input.calculado { background: #eef5ee; border-color: #9dc0a1; }
.calc-nota .chico-boton { margin-left: .4rem; }

/* Permisos por herramienta */
.herramientas-usuario { display: flex; flex-wrap: wrap; gap: .35rem .8rem; align-items: center; }
.casilla-herramienta { display: inline-flex; align-items: center; gap: .3rem; font-weight: 400; margin-right: .8rem; }
.vacio-inicio { text-align: center; padding: 2rem 1rem; }

/* Ingreso: íconos en las casillas, ojo y aviso de Bloq Mayús */
.entrada-icono { position: relative; }
.entrada-icono input { padding-left: 2.4rem; }
.entrada-icono .ico-izq { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--suave); pointer-events: none; }
.entrada-icono:focus-within .ico-izq { color: var(--marca); }
.entrada-icono .ojo { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); background: none; border: 0; padding: .35rem; cursor: pointer; color: var(--suave); border-radius: 6px; line-height: 0; }
.entrada-icono .ojo:hover, .entrada-icono .ojo:focus-visible { color: var(--marca); background: #eef2ee; }
.entrada-icono:has(.ojo:not([hidden])) input[type=password], .entrada-icono:has(.ojo:not([hidden])) input#clave { padding-right: 2.6rem; }
.aviso-mayus { margin-top: .35rem; font-size: .82rem; color: #8a5a00; background: #fff4d6; border: 1px solid #f0d58a; border-radius: 6px; padding: .25rem .55rem; }
.entrada-icono .ojo .ojo-cerrado { display: none; }
.entrada-icono .ojo.viendo .ojo-abierto { display: none; }
.entrada-icono .ojo.viendo .ojo-cerrado { display: inline; }

.mensaje.info { background: var(--info-fondo); border-color: #b9d3f0; color: var(--info); }

/* Zona de eliminar (solo administradores con permiso) */
.zona-peligro { border-color:#e3b5b5; background:#fdf6f6; }
.zona-peligro summary { color:#9b2c2c; font-weight:600; cursor:pointer; }

/* Filtros de «Comparar con SUNAT» */
.filtros .desplegable { border: 1px solid var(--linea); border-radius: 8px; background: #fff; padding: .35rem .6rem; }
.filtros .desplegable summary { cursor: pointer; font-weight: 400; }
.filtros .lista-marcas { max-height: 15rem; overflow: auto; margin-top: .4rem; display: grid; gap: .25rem; }
.filtros .lista-marcas label { display: flex; gap: .4rem; align-items: flex-start; font-weight: 400; font-size: .86rem; }

/* Visor de PDF con resaltado del dato que se revisa */
.visor-barra { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .3rem .8rem; border-bottom: 1px solid var(--linea); background: #fafbfc; }
.visor-barra .chico { min-width: 0; }
.visor-barra .ok { color: #1f6b3a; }
.visor-barra .aviso { color: #8a5a00; }
.visor-zoom { display: flex; gap: .25rem; flex: none; }
.visor-lienzo { flex: 1; overflow: auto; background: #dfe3e8; padding: .5rem .75rem; border-radius: 0 0 var(--radio) var(--radio); position: relative; }
.visor-lienzo.visor-nativo { padding: 0; }
.visor-lienzo.visor-nativo iframe { width: 100%; height: 100%; border: 0; }
.visor-pagina { position: relative; margin: 0 auto .6rem; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.visor-pagina canvas { display: block; }
.visor-resaltes { position: absolute; inset: 0; pointer-events: none; }
.visor-resalte { position: absolute; background: rgba(255, 214, 0, .42); outline: 2px solid #e0a800; border-radius: 2px; mix-blend-mode: multiply; animation: visor-pulso .9s ease-out 1; }
@keyframes visor-pulso { 0% { box-shadow: 0 0 0 0 rgba(224,168,0,.9); } 100% { box-shadow: 0 0 0 14px rgba(224,168,0,0); } }
.visor-barra[hidden] { display: none; }
.visor { min-width: 0; }
.visor-lienzo { min-width: 0; }