/* Lo que es de este programa y no del sistema de diseño (estilo.css, que es
   el de ERP FITO tal cual): dónde va el menú, la zona de soltar papeles y
   la pantalla de repaso, que es la que se usa todo el día. */

.lateral{position:fixed;inset:0 auto 0 0;z-index:30}
body.con-lateral{padding-left:244px;min-height:100%}
.lateral .marca .logo{background:linear-gradient(135deg,#2FB16A,#0E7A40);display:flex;align-items:center;justify-content:center;color:#fff}
.lateral .marca .logo svg{width:20px;height:20px}
.lateral a .nombre{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lateral .globo.amb{background:var(--ambar-vivo)}
.lateral .pie{line-height:1.3}
.lateral .pie.leyendo .punto{background:var(--ambar-vivo);animation:late 1.2s ease-in-out infinite}
@keyframes late{50%{opacity:.35}}

@media (max-width:820px){
  .lateral{position:static}
  body.con-lateral{padding-left:0}
}

/* ---------------------------------------------------- soltar los papeles */
.soltar{
  display:flex;align-items:center;gap:18px;padding:22px 24px;border-radius:var(--radio);
  border:1.5px dashed var(--linea-fuerte);background:var(--superficie);margin-bottom:16px;
  transition:border-color var(--rapido),background var(--rapido);cursor:pointer;
}
.soltar:hover{border-color:var(--verde)}
.soltar.encima{border-color:var(--verde);background:var(--verde-claro)}
.soltar .dibujo{flex:none;width:52px;height:52px;border-radius:14px;background:var(--verde-claro);color:var(--verde-oscuro);display:flex;align-items:center;justify-content:center}
.soltar .dibujo svg{width:26px;height:26px}
.soltar .texto{flex:1;min-width:0}
.soltar .texto b{display:block;font-size:16px;letter-spacing:-.01em}
.soltar .texto span{display:block;color:var(--tinta-2);font-size:13px;margin-top:3px;line-height:1.4}
.soltar .opcion{flex:none;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--tinta-2);cursor:default}
.soltar.subiendo{pointer-events:none;opacity:.7}

/* ------------------------------------------------------------- los tacos */
.taco{display:flex;align-items:center;gap:14px;padding:13px 18px;border-bottom:1px solid var(--linea-suave)}
.taco:last-child{border-bottom:0}
.taco .luz{flex:none;width:10px;height:10px;border-radius:50%;background:var(--tinta-3)}
.taco.leyendo .luz{background:var(--ambar-vivo);animation:late 1.2s ease-in-out infinite}
.taco.repasar .luz{background:var(--ambar-vivo)}
.taco.listo .luz{background:var(--verde)}
.taco.error .luz{background:var(--rojo-vivo)}
.taco .texto{flex:1;min-width:0}
.taco .titulo{font-size:14px;font-weight:600;margin:0}
.taco .detalle{font-size:12.5px;color:var(--tinta-2);margin:2px 0 0;line-height:1.4}
.taco .riel{max-width:420px}
.taco .hacer{flex:none;display:flex;gap:8px;align-items:center}

.sola{color:var(--tinta-3);font-size:11.5px}
td .sub{display:block;font-size:11.5px;color:var(--tinta-3);margin-top:1px}
.tipos{display:flex;gap:26px;flex-wrap:wrap;padding:12px 18px;border-top:1px solid var(--linea);background:var(--superficie-2);font-size:13px}
.tipos div span{color:var(--tinta-2);margin-right:8px}
.tipos div b{font-variant-numeric:tabular-nums}

.vacio{padding:44px 24px;text-align:center}
.vacio .que{font-size:17px;font-weight:600;margin:0 0 6px}
.vacio .porque{color:var(--tinta-2);font-size:14px;margin:0 auto 18px;max-width:520px;line-height:1.45}
.vacio .acciones{justify-content:center}

/* El aviso que sale abajo y se va solo */
#avisillo{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);z-index:100;
  background:var(--tinta);color:var(--papel);padding:10px 18px;border-radius:999px;font-size:14px;font-weight:500;
  box-shadow:var(--sombra-alta);opacity:0;transition:opacity var(--normal),transform var(--normal);pointer-events:none;max-width:80vw;
}
#avisillo.fuera{opacity:1;transform:translateX(-50%)}
#avisillo.mal{background:var(--rojo-vivo);color:#fff}

/* ------------------------------------------------------------- el repaso
   Tres columnas a toda la altura: la lista del taco, la ficha y el papel. */
body.repaso{height:100%;overflow:hidden}
.mesa{display:flex;flex-direction:column;height:100vh}
.mesa > header{
  flex:none;display:flex;align-items:center;gap:14px;padding:12px 20px;border-bottom:1px solid var(--linea);background:var(--superficie);
}
.mesa > header h1{font-size:17px;font-weight:700;letter-spacing:-.015em;margin:0}
.mesa > header .pista{margin-left:2px}
.mesa > header .hueco{flex:1}
.mesa .tres{flex:1;display:flex;min-height:0}

.lista{flex:0 0 292px;border-right:1px solid var(--linea);background:var(--superficie);display:flex;flex-direction:column;min-height:0}
.lista .arriba{flex:none;padding:10px 12px;border-bottom:1px solid var(--linea)}
.lista .filas{flex:1;overflow-y:auto}
.fila{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--linea-suave);cursor:pointer}
.fila:hover{background:var(--seleccion)}
.fila.actual{background:var(--verde-claro)}
.fila .luz{flex:none;width:9px;height:9px;border-radius:50%;background:var(--tinta-3)}
.fila.por_repasar .luz{background:var(--ambar-vivo)}
.fila.confirmada .luz{background:var(--verde)}
.fila.descartada{opacity:.55}
.fila .texto{flex:1;min-width:0}
.fila .quien{font-size:13px;font-weight:600;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fila .que{font-size:11.5px;color:var(--tinta-2);margin:1px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fila .cuanto{flex:none;font-size:12.5px;font-variant-numeric:tabular-nums;font-weight:500}

.hoja-ficha{flex:1 1 460px;min-width:400px;display:flex;flex-direction:column;min-height:0;background:var(--papel)}
.hoja-ficha .cuerpo{flex:1;overflow-y:auto;padding:16px 20px}
.hoja-ficha > footer{flex:none;display:flex;gap:8px;align-items:center;padding:12px 20px;border-top:1px solid var(--linea);background:var(--superficie)}
.hoja-ficha > footer .hueco{flex:1}
.hoja-ficha .tarjeta{margin-bottom:12px;overflow:visible}
.dudas{margin:0 0 12px;padding:12px 14px 12px 16px;border-radius:12px;background:var(--ambar-claro);color:var(--ambar);font-size:13.5px;line-height:1.45}
.dudas b{color:var(--tinta);display:block;margin-bottom:4px}
.dudas ul{margin:0;padding-left:18px}
.dudas.bien{background:var(--verde-claro);color:var(--verde-oscuro)}
.dudas.mal{background:var(--rojo-claro);color:var(--rojo)}
.campo.duda input,.campo.duda select,td.duda input{border-color:var(--ambar-vivo);box-shadow:0 0 0 3px rgba(255,141,40,.18)}
.campo .visto{color:var(--verde-oscuro);font-weight:600;margin-left:6px}
#tIva input,#tIva select{min-height:32px;padding:5px 9px;text-align:right}
#tIva select{text-align:left}
#tIva td{padding:5px 6px}
#tIva th{padding:6px 6px}
#tIva td:first-child,#tIva th:first-child{padding-left:14px}
/* Debajo del cuadro de IVA: a la izquierda, añadir otro tipo; a la derecha,
   en dos renglones alineados, la retención y el total. */
.pie-iva{display:flex;align-items:flex-start;gap:12px;padding:10px 14px;border-top:1px solid var(--linea)}
.pie-iva .sumas{margin-left:auto;display:grid;grid-template-columns:auto auto;gap:8px 12px;align-items:center;justify-items:end}
.pie-iva .par{display:flex;gap:6px}
.pie-iva input{min-height:32px;padding:5px 9px}
#fRetTipo{width:64px}
#fRetCuota{width:118px}
#fTotal{width:188px;font-weight:700;font-size:15px}
.pie-iva label.total{font-weight:600;color:var(--tinta)}
.cierre{font-size:13px;padding:9px 14px;border-top:1px solid var(--linea)}
.cierre.ok{color:var(--verde-oscuro)}
.cierre.no{color:var(--rojo)}
input.der{text-align:right;font-variant-numeric:tabular-nums}

.papel{flex:1.25 1 520px;min-width:360px;display:flex;flex-direction:column;min-height:0;border-left:1px solid var(--linea);background:#3a3a3e}
.papel .mandos{flex:none;display:flex;align-items:center;gap:6px;padding:8px 12px;background:rgba(0,0,0,.25);color:#fff;font-size:12.5px}
.papel .mandos .hueco{flex:1}
.papel .mandos button{height:28px;padding:0 10px;font-size:13px;background:rgba(255,255,255,.14);color:#fff;box-shadow:none;backdrop-filter:none}
.papel .mandos button:hover:not(:disabled){background:rgba(255,255,255,.26);box-shadow:none}
.papel .visor{flex:1;overflow:auto;padding:14px;text-align:center}
.papel .visor img{display:block;margin:0 auto 14px;background:#fff;box-shadow:0 4px 24px rgba(0,0,0,.4);transform-origin:top center;max-width:none}
.papel .nada{color:rgba(255,255,255,.6);padding:60px 20px;font-size:14px}

@media (max-width:1100px){
  .lista{flex-basis:220px}
}

/* ------------------------------------------------------------- entrar
   Lo único que se ve sin haber entrado: la marca, el usuario y la clave. */
body.entrar{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px}
body.entrar form.tarjeta{width:100%;max-width:380px;padding:28px 28px 22px;display:flex;flex-direction:column;gap:14px}
body.entrar .marca{display:flex;align-items:center;gap:12px;margin-bottom:6px}
body.entrar .marca img{border-radius:11px;flex:0 0 auto}
body.entrar .marca b{display:block;font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1.2}
body.entrar .marca b em{font-style:normal;color:var(--verde)}
body.entrar .marca span{font-size:12.5px;color:var(--tinta-2)}
body.entrar button{width:100%;justify-content:center;min-height:40px;margin-top:4px}
body.entrar .pista{text-align:center;margin:0}

/* Quién ha entrado, al pie del menú, con cambiar la clave y salir. */
.lateral .usuario{margin-top:4px;padding:8px 4px 2px 8px;gap:8px}
.lateral .usuario .avatar{width:28px;height:28px;font-size:11px}