/* ================================================================
   CajaTXS — identidad visual
   Verde tinta de libreta de cuentas, papel con matiz verde, verde dinero
   para acciones y un toque de latón (monedas) solo para lo activo.
   Cifras con números tabulares: las cantidades se alinean en columna.
   ================================================================ */
:root{
  --tinta:#12352d;      /* menú, títulos */
  --tinta-2:#1b4a3f;
  --papel:#f4f6f2;      /* fondo */
  --hoja:#ffffff;       /* superficies */
  --texto:#1d2b27;
  --mut:#64736d;
  --linea:#e2e7e0;
  --linea-2:#eef1ec;
  --verde:#0f7a57;      /* acción principal */
  --verde-suave:#e4f2ec;
  --laton:#c9932b;      /* acento: activo, marca */
  --rojo:#b8322a;  --rojo-suave:#fbeceb;
  --ambar:#a8650e; --ambar-suave:#fcf2e2;
  --azul:#2c5f8a;  --azul-suave:#e9f0f6;
  --radio:10px;
  --radio-g:14px;
  --cond:"IBM Plex Sans Condensed","Arial Narrow",system-ui,sans-serif;
  --ok:var(--verde); --bad:var(--rojo); --warn:var(--ambar); --ac:var(--verde); --line:var(--linea); --bg:var(--papel); --ink:var(--texto);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:15px/1.5 "IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--papel);color:var(--texto);font-variant-numeric:tabular-nums}
a{color:var(--verde);text-underline-offset:2px}
h1,h2,h3{color:var(--tinta);line-height:1.25}
:focus-visible{outline:2px solid var(--laton);outline-offset:2px}
.ico{flex:none;vertical-align:middle}
.mut{color:var(--mut);margin:2px 0}
.chico{font-size:12.5px}
.t-ok{color:var(--verde)}.t-bad{color:var(--rojo)}.t-warn{color:var(--ambar)}
.mt{margin-top:18px}.mb{margin-bottom:16px}.sin-mt{margin-top:0}
.oculto{display:none}
.solo-movil{display:none}

/* ---------- Botones ---------- */
button,.boton{font:inherit;font-weight:600;font-size:14.5px;border:1px solid transparent;border-radius:var(--radio);padding:9px 16px;cursor:pointer;background:var(--verde);color:#fff;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;line-height:1.3;text-align:center;transition:background .15s,border-color .15s}
button:hover,.boton:hover{background:#0b6648}
button.ghost,.boton.ghost{background:var(--hoja);color:var(--texto);border-color:var(--linea)}
button.ghost:hover,.boton.ghost:hover{border-color:#c6cfc4;background:#fafbf9}
button.ok,.boton.ok{background:var(--verde)}
button.sm,.boton.sm{padding:5px 11px;font-size:13px;border-radius:8px}
button:disabled{opacity:.45;cursor:not-allowed}
.link-boton{background:none;border:0;padding:0;color:var(--verde);font-size:12.5px;font-weight:500;text-decoration:underline;cursor:pointer}
.link-boton:hover{background:none}
.link-boton.peligro{color:var(--rojo)}
.ancho-btn{width:100%;margin-top:10px}

/* ---------- Formularios ---------- */
label{display:grid;gap:6px;font-size:13px;font-weight:500;color:var(--mut)}
input,select,textarea{font:inherit;font-size:15px;padding:10px 12px;border:1px solid #d5ddd3;border-radius:var(--radio);width:100%;background:var(--hoja);color:var(--texto);font-variant-numeric:tabular-nums}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--verde);box-shadow:0 0 0 3px rgba(15,122,87,.15)}
input[readonly]{background:var(--linea-2);color:var(--mut)}
textarea{resize:vertical}
.form{display:grid;gap:14px 16px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.form .ancho{grid-column:1/-1}
.check{display:flex;align-items:center;gap:8px;color:var(--texto);font-size:14px}
.check input{width:auto;accent-color:var(--verde)}
.en-linea{display:flex;gap:6px;align-items:center;margin-top:6px}
.en-linea select,.en-linea input{width:auto;padding:7px 9px;font-size:13.5px}
.buscador{flex:1;min-width:240px;max-width:560px;margin-top:0}
.buscador input{flex:1;width:100%}
.filtros{flex-wrap:wrap;align-items:flex-end;gap:10px}
.filtros label{font-size:12px}
.campo-bad{border-color:var(--rojo);color:var(--rojo)}
.monto-grande{font-family:var(--cond);font-size:26px;font-weight:600;padding:12px 14px;letter-spacing:.2px}

/* ---------- Estructura ---------- */
.app{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100vh;background:linear-gradient(to right,var(--tinta) 248px,transparent 248px)}
.contenido{min-width:0;display:flex;flex-direction:column}
main{padding:26px 32px 48px;max-width:1360px;width:100%}

/* Menú lateral: la "libreta" */
.side{background:var(--tinta);color:#c9d8d2;padding:20px 14px 14px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.marca{display:flex;align-items:center;gap:10px;padding:0 8px}
.sello{width:34px;height:34px;border-radius:9px;background:var(--laton);color:var(--tinta);display:grid;place-items:center;font:700 19px/1 var(--cond)}
.logo{font:700 21px/1 var(--cond);letter-spacing:.2px;color:#fff}
.logo span{color:var(--laton)}
.empresa-actual{margin:14px 8px 6px;padding:9px 11px;border-radius:9px;background:rgba(255,255,255,.06);color:#e7efeb;font-size:13px;font-weight:500;line-height:1.35}
.side nav{display:flex;flex-direction:column;gap:2px;margin-top:6px}
.grupo{font-size:12px;color:#83a097;margin:16px 10px 6px}
.side .item{position:relative;display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:9px;font-size:14.5px;color:#c9d8d2;text-decoration:none}
.side .item:hover{background:rgba(255,255,255,.06);color:#fff}
.side .item.on{background:var(--tinta-2);color:#fff;font-weight:600}
.side .item.on::before{content:"";position:absolute;left:-14px;top:8px;bottom:8px;width:4px;border-radius:0 4px 4px 0;background:var(--laton)}
.side .item.on .ico{color:var(--laton)}
.who{margin-top:auto;display:flex;align-items:center;gap:10px;padding:12px 8px 4px;border-top:1px solid rgba(255,255,255,.08)}
.who-av{width:34px;height:34px;border-radius:50%;background:#2a5a4e;color:#fff;display:grid;place-items:center;font-size:13px;font-weight:600;flex:none}
.who-txt{display:flex;flex-direction:column;min-width:0;flex:1}
.who-txt b{color:#fff;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who-txt small{color:#83a097;font-size:12px}
.who form{margin:0}
.salir{background:transparent;border:0;color:#83a097;padding:6px;border-radius:8px}
.salir:hover{background:rgba(255,255,255,.08);color:#fff}
.menu-cerrar,.menu-abrir,.velo{display:none}

/* Barra superior */
.top{display:flex;align-items:center;gap:14px;padding:16px 32px;background:var(--hoja);border-bottom:1px solid var(--linea);position:sticky;top:0;z-index:5}
.top-tit{flex:1;min-width:0}
.top h1{margin:0;font:600 22px/1.2 var(--cond);letter-spacing:.1px}
.top p{margin:2px 0 0;font-size:13px}
.top-acc{display:flex;gap:8px;align-items:center}
.top-acc form{margin:0}
.pill.rol{background:var(--linea-2);color:var(--tinta)}

/* ---------- Superficies ---------- */
.card{background:var(--hoja);border:1px solid var(--linea);border-radius:var(--radio-g);padding:20px;min-width:0;overflow-x:auto}
.card h3{margin:0 0 14px;font-size:16px;font-weight:600}
.fila-tit{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.fila-tit h3{margin:0}
.fila-botones{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.fila-botones form{margin:0}
.seccion{margin:28px 0 12px;font:600 18px/1.2 var(--cond);color:var(--tinta)}
.wrap{overflow-x:auto}
.split{display:grid;gap:18px;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);align-items:start}
.pila{display:grid;gap:18px}
.dos-col{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));align-items:start}
.vacio{font-size:14px;margin:0;color:var(--mut);padding:18px 0 6px}
.texto{margin:0;font-size:14.5px;line-height:1.55;overflow-wrap:anywhere}

/* Cifras: el sello de la marca */
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.kpi{display:flex;flex-direction:column;gap:2px;padding:16px 18px;position:relative}
.kpi > span:first-child{color:var(--mut);font-size:13px;font-weight:500}
.kpi b{display:block;margin-top:6px;font:600 26px/1.15 var(--cond);color:var(--tinta);letter-spacing:.1px;overflow-wrap:anywhere}
.kpi b.t-bad{color:var(--rojo)} .kpi b.t-ok{color:var(--verde)} .kpi b.t-warn{color:var(--ambar)}
.kpi em{font-style:normal;font-size:12.5px;color:var(--mut);margin-top:2px}
.monto{white-space:nowrap}
.monto .rd{font-size:.52em;font-weight:600;color:var(--mut);margin-right:3px;vertical-align:.45em;letter-spacing:.3px}
.monto .cts{font-size:.6em;color:var(--mut);font-weight:500}
.kpi.destacado{background:var(--tinta);border-color:var(--tinta)}
.kpi.destacado > span:first-child,.kpi.destacado em,.kpi.destacado .monto .rd,.kpi.destacado .monto .cts{color:#9fbdb3}
.kpi.destacado b{color:#fff;font-size:30px}
.enlace{text-decoration:none;color:inherit}
.card.enlace:hover{border-color:#c6cfc4}

/* Etiquetas de estado: punto + texto */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;padding:3px 10px;border-radius:99px;background:var(--azul-suave);color:var(--azul);white-space:nowrap;line-height:1.5}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.85}
.pill.rol::before{display:none}
.pill.ok{background:var(--verde-suave);color:#0b6045}
.pill.warn{background:var(--ambar-suave);color:var(--ambar)}
.pill.bad{background:var(--rojo-suave);color:var(--rojo)}

/* Avisos */
.aviso{display:block;padding:12px 16px;border-radius:var(--radio);font-size:14px;margin-bottom:16px;border:1px solid;border-left-width:4px}
.aviso.ok{background:#f1f8f4;border-color:#cfe6da;border-left-color:var(--verde);color:#0b4f39}
.aviso.warn{background:#fdf7ec;border-color:#f0dfbf;border-left-color:var(--laton);color:#6e4508}
.aviso.bad{background:#fcf1f0;border-color:#efcfcc;border-left-color:var(--rojo);color:#86221b}
.aviso a{color:inherit;font-weight:600}
.bloque{display:block;text-decoration:none}

/* ---------- Tablas ---------- */
table{width:100%;border-collapse:separate;border-spacing:0;font-size:14.5px}
th,td{padding:11px 10px;border-bottom:1px solid var(--linea-2);text-align:left;vertical-align:middle}
th{font-size:12.5px;font-weight:600;color:var(--mut);background:#f7f9f6;border-bottom:1px solid var(--linea);white-space:nowrap}
th:first-child{border-top-left-radius:8px} th:last-child{border-top-right-radius:8px}
tbody tr:hover td,table tr:hover td{background:#fafcf9}
tr:last-child td{border-bottom:0}
.num{text-align:right;white-space:nowrap}
td.acc{text-align:right;white-space:nowrap}
.fila-bad td{background:#fdf6f5}
.fila-bad:hover td{background:#fbefed}
.fila-anulada td{opacity:.5;text-decoration:line-through}
.fila-anulada td .pill{text-decoration:none}
.fila-total td{font-weight:700;border-top:2px solid var(--tinta)}
.fila-nueva td{background:#f8faf7}
.tabla-form td{padding:6px 4px;white-space:nowrap}
.tabla-form input{padding:7px 9px;min-width:70px}
.tabla-form input[type=checkbox]{width:auto;min-width:0;accent-color:var(--verde)}
.tabla-form td:nth-child(1) input{min-width:120px}
.tabla-form td:nth-child(2) select{min-width:115px}
.tabla-form td:nth-child(3) select{min-width:300px}
.tabla-form td:nth-child(n+4) input:not([type=checkbox]){width:90px}
.tabla-form td:nth-child(8) input{width:120px}

/* Pestañas */
.tabs{display:flex;gap:2px;flex-wrap:wrap;background:var(--linea-2);padding:4px;border-radius:11px}
.tab{padding:7px 13px;border-radius:8px;text-decoration:none;color:var(--mut);font-size:14px;font-weight:500}
.tab small{background:rgba(0,0,0,.05);border-radius:99px;padding:1px 7px;margin-left:5px;font-size:12px}
.tab.on{background:var(--hoja);color:var(--tinta);font-weight:600;box-shadow:0 1px 2px rgba(18,53,45,.12)}

/* Listas de datos */
.datos{margin:0;display:grid;gap:0}
.datos div{display:grid;grid-template-columns:120px 1fr;gap:12px;font-size:14.5px;border-bottom:1px solid var(--linea-2);padding:9px 0}
.datos div:last-child{border:0}
.datos dt{color:var(--mut)}
.datos dd{margin:0;overflow-wrap:anywhere}

/* Simulación / resumen lateral */
.sim .row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0;border-bottom:1px solid var(--linea-2);font-size:14.5px}
.sim .row b{text-align:right}
.sim .grande{font:600 26px/1.1 var(--cond);color:var(--tinta)}
.sim .row.total{border-bottom:2px solid var(--tinta)}
.sim .aviso{margin:14px 0 0}
.rapidos{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px}
.rapidos button{flex-direction:column;gap:2px;line-height:1.3;padding:9px 8px;font-weight:500;font-size:13px}
.rapidos button b{font-family:var(--cond);font-size:16px;font-weight:600;color:var(--tinta)}
.aprobar{border-color:#ecd7a8;background:#fffaf0}
.abrir-caja{max-width:520px}
.mov{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid var(--linea-2);font-size:14.5px}
details.anular{display:inline-block;margin-left:6px}
details.anular summary{list-style:none;display:inline}
details.anular summary::-webkit-details-marker{display:none}
details.anular form{margin-top:6px}

/* Barras del reporte */
.barras{display:grid;gap:8px}
.barra-fila{display:grid;grid-template-columns:48px 1fr 130px;gap:10px;align-items:center;font-size:13.5px}
.barra-fila b{text-align:right;font-weight:600}
.barra-fondo{background:var(--linea-2);border-radius:5px;height:12px;overflow:hidden}
.barra-relleno{background:var(--verde);height:100%;border-radius:5px}

/* Ficha */
.volver{display:inline-flex;margin-bottom:14px;font-size:14px;font-weight:500;text-decoration:none}
.cab-cliente{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.avatar{width:58px;height:58px;border-radius:14px;background:var(--tinta);color:var(--laton);display:grid;place-items:center;font:700 22px/1 var(--cond);flex:none}
.cab-info{flex:1;min-width:200px}
.cab-info h2{margin:0 0 4px;font:600 24px/1.2 var(--cond)}
.cab-info p{margin:0 0 10px}
.cab-acciones{display:flex;gap:8px;flex-wrap:wrap}
.pie-ficha{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.en-linea-texto{display:inline;margin:0}

/* Panel: pendientes */
.saludo{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.saludo h2{margin:0;font:600 26px/1.2 var(--cond)}
.saludo p{margin:2px 0 0}
.estado-caja{display:block;line-height:1.5;padding:9px 14px;border-radius:99px;font-size:14px;font-weight:500;text-decoration:none;border:1px solid}
.estado-caja .ico{margin:-2px 6px 0 0}
.estado-caja.abierta{background:#f1f8f4;border-color:#cfe6da;color:#0b4f39}
.estado-caja.cerrada{background:#fdf7ec;border-color:#f0dfbf;color:#6e4508}
.pendientes{list-style:none;margin:0;padding:0}
.pendientes li + li{border-top:1px solid var(--linea-2)}
.pendientes a{display:flex;gap:12px;align-items:flex-start;padding:12px 2px;text-decoration:none;color:var(--texto);font-size:14px;line-height:1.45}
.pendientes a:hover{color:var(--verde)}
.pendientes .ico{margin-top:1px;color:var(--ambar)}
.pendientes .ok .ico{color:var(--verde)}

/* ---------- Pantalla de entrada ---------- */
.login-fondo{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);background:var(--hoja)}
.login-lado{background:var(--tinta);color:#c9d8d2;padding:48px 56px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.login-lado .marca{padding:0}
.login-lado h2{color:#fff;font:600 38px/1.15 var(--cond);margin:0 0 14px;max-width:16ch}
.login-lado p{max-width:44ch;margin:0;font-size:16px;line-height:1.6}
.login-lado ul{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:12px;font-size:15px}
.login-lado li{display:flex;gap:10px;align-items:center}
.login-lado li .ico{color:var(--laton)}
.login-lado .pie{font-size:13px;color:#83a097}
.recibo-deco{position:absolute;right:48px;bottom:84px;width:230px;padding:18px 18px 22px;background:#fbfaf6;color:#2c2c2c;font:12px/1.6 "Courier New",monospace;transform:rotate(-7deg);box-shadow:0 18px 40px rgba(0,0,0,.35);opacity:.92}
.recibo-deco b{display:block;text-align:center;font-size:13px}
.recibo-deco hr{border:0;border-top:1px dashed #999;margin:6px 0}
.recibo-deco div{display:flex;justify-content:space-between}
.login-caja{align-self:center;justify-self:center;width:min(400px,100%);padding:40px 24px;display:grid;gap:16px}
.login-caja h1{margin:0;font:600 28px/1.2 var(--cond)}
.login-caja .aviso{margin:0}
.login-caja button{padding:12px;font-size:15.5px}
.logo.grande{font-size:30px;color:var(--tinta)}
.logo.grande span{color:var(--laton)}
.login-movil{display:none}

/* ---------- Laptops y tabletas ---------- */
@media (max-width:1280px){
  .app{grid-template-columns:224px minmax(0,1fr);background:linear-gradient(to right,var(--tinta) 224px,transparent 224px)}
  main{padding:22px 22px 44px}
  .top{padding:14px 22px}
  table{font-size:13.5px}
  th,td{padding:9px 7px}
  .card{padding:18px}
}
@media (max-width:1200px){
  .split{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:1100px){
  .col-opc{display:none}
}
/* ---------- Celular ---------- */
@media (max-width:900px){
  .app{grid-template-columns:minmax(0,1fr);background:none}
  .side{position:fixed;inset:0 auto 0 0;width:280px;z-index:30;transform:translateX(-100%);transition:transform .2s ease;height:100%}
  .menu-abierto .side{transform:none;box-shadow:0 0 0 100vmax rgba(0,0,0,0)}
  .velo{position:fixed;inset:0;background:rgba(10,30,25,.45);z-index:20}
  .menu-abierto .velo{display:block}
  .menu-cerrar{display:inline-flex;margin-left:auto;background:transparent;color:#c9d8d2;padding:6px;border:0}
  .menu-abrir{display:inline-flex;background:transparent;color:var(--tinta);padding:6px;border:0;margin-left:-6px}
  .menu-abrir:hover,.menu-cerrar:hover{background:rgba(0,0,0,.05)}
  .top{padding:12px 16px;gap:10px}
  .top h1{font-size:19px}
  .top p{display:none}
  .top-acc .boton span,.top-acc .pill.rol,.solo-pc-flex,.top-acc .boton.ghost{display:none}
  .top-acc .boton{padding:9px 11px}
  main{padding:18px 16px 40px}
  .split{grid-template-columns:minmax(0,1fr)}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .kpi{padding:14px}
  .kpi b{font-size:21px}
  .kpi.destacado{grid-column:1/-1}
  .cab-acciones{width:100%}
  .cab-acciones .boton{flex:1}
  .datos div{grid-template-columns:1fr;gap:2px}
  .saludo h2{font-size:22px}
  .tabla-movil thead{display:none}
  .tabla-movil,.tabla-movil tbody,.tabla-movil tr,.tabla-movil td{display:block;width:100%}
  .tabla-movil tr{border:1px solid var(--linea);border-radius:12px;padding:4px 14px;margin-bottom:10px;background:var(--hoja)}
  .tabla-movil tr:hover td{background:transparent}
  .tabla-movil td{display:flex;justify-content:space-between;align-items:center;gap:12px;border:0;border-bottom:1px solid var(--linea-2);padding:9px 0;text-align:right}
  .tabla-movil td:last-child{border:0}
  .tabla-movil td.num{white-space:normal;flex-wrap:wrap}
  .tabla-movil td .chico{flex-basis:100%;text-align:right}
  .cobrar-split > *,.cobrar-split .card{min-width:0;max-width:100%}
  .tabla-movil td::before{content:attr(data-label);color:var(--mut);font-size:13px;text-align:left}
  .tabla-movil td.acc{justify-content:flex-end}
  .tabla-movil td.acc .boton{width:100%}
  .tabla-movil td.solo-pc,.tabla-movil tr.fila-solo-pc{display:none}
  .fila-bad td{background:transparent}
  .tabla-movil tr.fila-bad{border-color:#efcfcc;background:#fdf8f7}
  .cobrar-split{display:flex;flex-direction:column;gap:14px}
  .cobrar-split > div{display:contents}
  .cobrar-split .cab-cliente{order:-2}
  .cobrar-split > form{order:-1}
  .cobrar-split .card.mt{margin-top:0}
  .pend-primero{display:flex;flex-direction:column;gap:14px}
  .pend-primero > .card:last-child{order:-1}
  /* Lista compacta del panel: dos líneas por cliente */
  .tabla-compacta tr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"cli cli monto" "venc pres acc";gap:6px 10px;align-items:center;padding:12px 14px}
  .tabla-compacta td{display:block;padding:0;border:0;text-align:left}
  .tabla-compacta td::before{display:none}
  .tabla-compacta td:nth-child(1){grid-area:venc}
  .tabla-compacta td:nth-child(2){grid-area:cli}
  .tabla-compacta td:nth-child(2) br,.tabla-compacta td:nth-child(2) a{display:none}
  .tabla-compacta td:nth-child(3){grid-area:pres;font-size:13px}
  .tabla-compacta td:nth-child(4){grid-area:monto;text-align:right}
  .tabla-compacta td.acc{grid-area:acc}
  .tabla-compacta td.acc .boton{width:auto}
  .solo-movil{display:block}
  .login-fondo{grid-template-columns:1fr}
  .login-lado{display:none}
  .login-movil{display:flex;align-items:center;gap:10px}
}
@media (max-width:340px){ .grid{grid-template-columns:minmax(0,1fr)} }
@media (prefers-reduced-motion:reduce){ *{transition:none!important} }
.fondo-simple{min-height:100vh;display:grid;place-items:center;padding:20px;background:var(--papel)}
.fondo-simple .login-caja{background:var(--hoja);border:1px solid var(--linea);border-radius:var(--radio-g);padding:32px}

a[href^="tel:"]{white-space:nowrap}