:root{
  --s22-orange:#287a5b; --s22-orange-dark:#1d6046; --s22-orange-soft:#edf6f0;
  --s22-black:#1c1c1c; --s22-gray:#6b7280; --s22-line:#e8e8ec; --s22-bg:#f7f7f9; --s22-white:#fff;
  --s22-ok:#1d7a44; --s22-warn:#b07a10; --s22-bad:#b3261e; --s22-info:#3b5bdb; --s22-radius:14px;
}
.s22pf-public-shell,
.s22pf-front{
  font-family:'Segoe UI',Arial,Helvetica,sans-serif;
  color:var(--s22-black);
}
.s22pf-public-shell{
  background:var(--s22-bg);
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
.s22pf-public-topbar{
  background:var(--s22-black);
  color:#d9d9de;
  font-size:12.5px;
  padding:7px 28px;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:6px;
}
.s22pf-public-topbar b{color:#fff}
.s22pf-access{
  flex:1;
  display:grid;
  grid-template-columns:1.1fr 1fr;
  min-height:760px;
  max-width:none;
  margin:0;
  border-radius:0;
  overflow:visible;
  box-shadow:none;
  background:#fff;
}
.s22pf-access-hero{
  background:linear-gradient(135deg,var(--s22-black) 0%,#2d2d2d 60%,#3a2a1c 100%);
  color:#fff;
  padding:60px 56px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.s22pf-front-brand{
  font-size:42px;
  font-weight:800;
  letter-spacing:-1.5px;
  line-height:1;
}
.s22pf-front-brand span{color:var(--s22-orange)}
.s22pf-front-brand.dark{
  color:var(--s22-black);
  font-size:24px;
  letter-spacing:-1px;
}
.s22pf-front-brand.dark small{
  color:var(--s22-gray);
  font-size:12px;
  font-weight:600;
  letter-spacing:2px;
}
.s22pf-claim{
  font-size:13px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:#bdbdc2;
  margin:8px 0 34px;
}
.s22pf-access-hero h2{
  font-size:30px;
  line-height:1.25;
  font-weight:800;
  margin:0 0 16px;
  color:#fff;
}
.s22pf-access-hero h2 em{
  color:var(--s22-orange);
  font-style:italic;
}
.s22pf-access-hero p{
  color:#cfcfd4;
  font-size:15px;
  line-height:1.7;
  max-width:500px;
}
.s22pf-access-hero ul{
  margin:22px 0 0 0;
  padding:0;
  list-style:none;
}
.s22pf-access-hero li{
  margin-bottom:10px;
  font-size:14.5px;
  color:#e8e8ec;
}
.s22pf-access-hero li::before{
  content:'●';
  color:var(--s22-orange);
  margin-right:10px;
  font-size:11px;
}
.s22pf-access-card{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:40px 24px;
  background:#fff;
  max-width:500px;
  width:100%;
  margin:0 auto;
  overflow:visible;
}
.s22pf-access-card h3{
  font-size:22px;
  font-weight:800;
  margin:0 0 4px;
}
.s22pf-sub,
.s22pf-access-card>p{
  color:var(--s22-gray);
  font-size:13.5px;
  margin-bottom:18px;
}
.s22pf-tabs-front{
  display:flex;
  border:1.5px solid var(--s22-line);
  border-radius:10px;
  overflow:hidden;
  margin-bottom:18px;
}
.s22pf-tabs-front button{
  flex:1;
  border:none;
  background:#fff;
  padding:11px;
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  color:var(--s22-gray);
}
.s22pf-tabs-front button.active{
  background:var(--s22-orange);
  color:#fff;
}
.s22pf-login-box{
  background:#fff;
  border:0;
  border-radius:0;
  padding:0;
  margin:0;
}
.s22pf-login-box label,
.s22pf-form-grid label{
  display:block;
  font-size:12.5px;
  font-weight:700;
  color:var(--s22-black);
  margin-bottom:5px;
}
.s22pf-login-box input[type=text],
.s22pf-login-box input[type=password],
.s22pf-form-grid input,
.s22pf-form-grid select,
.s22pf-form-grid textarea{
  width:100%;
  padding:10px 12px;
  border:1.5px solid var(--s22-line);
  border-radius:10px;
  font-size:14px;
  background:#fff;
  box-sizing:border-box;
  margin-top:5px;
}
.s22pf-login-box input:focus,
.s22pf-form-grid input:focus,
.s22pf-form-grid select:focus,
.s22pf-form-grid textarea:focus{
  outline:none;
  border-color:var(--s22-orange);
  box-shadow:0 0 0 3px rgba(40,122,91,.15);
}
.s22pf-btn,
.s22pf-login-box input[type=submit]{
  background:var(--s22-orange);
  color:#fff;
  border:none;
  border-radius:10px;
  padding:12px 24px;
  font-size:15px;
  font-weight:800;
  cursor:pointer;
  width:100%;
  text-decoration:none;
}
.s22pf-btn:hover,
.s22pf-login-box input[type=submit]:hover{background:var(--s22-orange-dark)}
.s22pf-divider{
  display:flex;
  align-items:center;
  gap:12px;
  margin:18px 0;
  color:var(--s22-gray);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:1px;
}
.s22pf-divider:before,.s22pf-divider:after{
  content:'';
  flex:1;
  height:1px;
  background:var(--s22-line);
}
.s22pf-sso{
  display:block;
}
.s22pf-sso a{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  padding:11px;
  border:1.5px solid var(--s22-line);
  border-radius:10px;
  background:#fff;
  font-size:14px;
  font-weight:700;
  color:var(--s22-black);
  cursor:pointer;
  margin-bottom:10px;
  text-decoration:none!important;
  box-sizing:border-box;
}
.s22pf-sso a:hover{
  border-color:var(--s22-orange);
  background:#f6faf7;
}
.s22pf-register-box{
  margin-top:18px;
  background:var(--s22-orange-soft);
  border:1px solid #c5e1d2;
  color:#8a4a10;
  border-radius:10px;
  font-size:12px;
  padding:14px;
  line-height:1.6;
  max-height:430px;
  overflow:auto;
}
.s22pf-register-box h4{
  margin:0 0 8px;
  font-size:16px;
  color:var(--s22-black);
}
.s22pf-form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px 14px;
}
.s22pf-form-grid .full{grid-column:1/-1}
.s22pf-check{
  font-weight:500!important;
  font-size:12.5px!important;
}
.s22pf-check input{
  width:auto!important;
  margin-right:8px!important;
}
.s22pf-public-footer{
  background:var(--s22-black);
  color:#bdbdc2;
  font-size:12px;
  padding:18px 28px;
  text-align:center;
  line-height:1.8;
}
.s22pf-public-footer b{color:#fff}
.s22pf-public-footer span{color:var(--s22-orange);font-weight:700}

/* PORTAL PRIVADO */
.s22pf-front{
  max-width:1180px;
  width:100%;
  margin:26px auto;
  padding:0 22px 30px;
  background:var(--s22-bg);
}
.s22pf-front-header{
  background:#fff;
  border-bottom:3px solid var(--s22-orange);
  padding:14px 28px;
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  border-radius:14px 14px 0 0;
  border:1px solid var(--s22-line);
  border-bottom-width:3px;
}
.s22pf-front-header h2{
  margin:6px 0 0;
  font-size:20px;
  font-weight:800;
}
.s22pf-front-header p{
  margin:2px 0 0;
  color:var(--s22-gray);
  font-size:13px;
}
.s22pf-sub-card{
  margin-left:auto;
  text-align:right;
  font-size:13px;
  color:var(--s22-gray);
  background:transparent;
  border:0;
  padding:0;
  min-width:230px;
}
.s22pf-sub-card span{
  display:block;
  color:var(--s22-gray);
  font-size:12px;
  text-transform:none;
  font-weight:500;
}
.s22pf-sub-card strong{
  display:block;
  color:var(--s22-black);
  font-size:16px;
  text-transform:capitalize;
}
.s22pf-sub-card small{color:var(--s22-gray)}
.s22pf-front-nav{
  background:var(--s22-black);
  display:flex;
  padding:0 28px;
  flex-wrap:wrap;
  border-radius:0 0 14px 14px;
  margin-bottom:22px;
}
.s22pf-front-nav span{
  color:#bdbdc2;
  padding:14px 22px;
  font-size:14px;
  font-weight:700;
  border-bottom:3px solid transparent;
}
.s22pf-front-nav span.active{
  color:#fff;
  border-bottom-color:var(--s22-orange);
}
.s22pf-kpis-front{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:14px;
  margin-bottom:22px;
}
.s22pf-kpis-front div{
  background:#fff;
  border:1px solid var(--s22-line);
  border-top:4px solid var(--s22-orange);
  border-radius:var(--s22-radius);
  padding:16px 18px;
  box-shadow:0 1px 4px rgba(0,0,0,.05);
}
.s22pf-kpis-front strong{
  display:block;
  font-size:26px;
  font-weight:800;
}
.s22pf-kpis-front span{
  font-size:11.5px;
  color:var(--s22-gray);
  text-transform:uppercase;
  letter-spacing:.5px;
  font-weight:700;
}
.s22pf-front-grid{
  display:grid;
  grid-template-columns:1fr 330px;
  gap:20px;
  align-items:start;
}
.s22pf-card-front{
  background:#fff;
  border:1px solid var(--s22-line);
  border-radius:var(--s22-radius);
  padding:24px;
  margin-bottom:22px;
  box-shadow:0 1px 4px rgba(0,0,0,.05);
}
.s22pf-card-front h2{
  font-size:20px;
  font-weight:800;
  margin:0 0 4px;
}
.s22pf-card-front p{
  color:var(--s22-gray);
  font-size:13.5px;
  margin-bottom:18px;
}
.s22pf-data-list{
  display:grid;
  grid-template-columns:100px 1fr;
  gap:8px 12px;
  font-size:14px;
}
.s22pf-data-list dt{
  font-weight:700;
  color:var(--s22-gray);
}
.s22pf-data-list dd{margin:0}
.s22pf-front-table{
  width:100%;
  border-collapse:collapse;
  font-size:13.5px;
  margin-top:14px;
}
.s22pf-front-table th{
  background:#f2f7f3;
  color:var(--s22-black);
  text-align:left;
  padding:10px 12px;
  border-bottom:2px solid var(--s22-orange);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.5px;
}
.s22pf-front-table td{
  padding:10px 12px;
  border-bottom:1px solid var(--s22-line);
  vertical-align:middle;
}
.s22pf-front-table tr:hover td{background:#f6faf7}
.s22pf-front-status{
  display:inline-block;
  padding:3px 11px;
  border-radius:20px;
  background:#e8eefb;
  color:var(--s22-info);
  font-size:11.5px;
  font-weight:800;
}
.s22pf-alert{
  max-width:780px;
  margin:28px auto;
  border-radius:12px;
  padding:14px 16px;
  font-weight:800;
}
.s22pf-alert.error{
  background:#fbeaea;
  color:var(--s22-bad);
  border:1px solid #f0c4c1;
}

@media(max-width:900px){
  .s22pf-access{grid-template-columns:1fr}
  .s22pf-access-hero{padding:36px 28px}
  .s22pf-access-card{max-width:none}
  .s22pf-front-grid{grid-template-columns:1fr}
  .s22pf-front-header{flex-direction:column;align-items:stretch}
  .s22pf-sub-card{text-align:left;margin-left:0}
}
@media(max-width:640px){
  .s22pf-form-grid{grid-template-columns:1fr}
  .s22pf-data-list{grid-template-columns:1fr}
}

/* ===== Portal frontal calcado al HTML original ===== */
.s22pf-html-portal{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:var(--s22-bg);
  color:var(--s22-black);
  font-family:'Segoe UI',Arial,Helvetica,sans-serif;
}
.s22pf-port-header{
  background:#fff;
  border-bottom:3px solid var(--s22-orange);
  padding:14px 28px;
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}
.s22pf-logo-mini{
  font-size:24px;
  font-weight:800;
  letter-spacing:-1px;
  color:var(--s22-orange);
}
.s22pf-logo-mini span{color:var(--s22-orange)}
.s22pf-logo-mini small{
  color:var(--s22-orange);
  font-size:12px;
  font-weight:600;
  letter-spacing:2px;
}
.s22pf-quien{
  margin-left:auto;
  text-align:right;
  font-size:13px;
  color:var(--s22-gray);
}
.s22pf-quien b{
  display:block;
  color:var(--s22-black);
  font-size:14px;
}
.s22pf-logout{
  background:var(--s22-black);
  color:#fff!important;
  border:none;
  border-radius:10px;
  padding:6px 14px;
  font-size:12.5px;
  font-weight:700;
  text-decoration:none!important;
}
.s22pf-portal-nav{
  background:var(--s22-black);
  display:flex;
  padding:0 28px;
  flex-wrap:wrap;
}
.s22pf-portal-nav a{
  background:none;
  border:none;
  color:#bdbdc2!important;
  padding:14px 22px;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  border-bottom:3px solid transparent;
  text-decoration:none!important;
}
.s22pf-portal-nav a:hover{color:#fff!important}
.s22pf-portal-nav a.activa{
  color:#fff!important;
  border-bottom-color:var(--s22-orange);
}
.s22pf-portal-main{
  flex:1;
  max-width:1180px;
  width:100%;
  margin:26px auto;
  padding:0 22px;
  box-sizing:border-box;
}
.s22pf-panel{display:none}
.s22pf-panel.activa{display:block;animation:s22pfFade .25s ease}
@keyframes s22pfFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.s22pf-tarjeta{
  background:#fff;
  border:1px solid var(--s22-line);
  border-radius:var(--s22-radius);
  padding:24px;
  margin-bottom:22px;
  box-shadow:0 1px 4px rgba(0,0,0,.05);
}
.s22pf-tarjeta h2{
  font-size:20px;
  font-weight:800;
  margin:0 0 4px;
}
.s22pf-tarjeta h2 span{color:var(--s22-orange)}
.s22pf-tarjeta .desc{
  color:var(--s22-gray);
  font-size:13.5px;
  margin-bottom:18px;
}
.s22pf-callout-front{border-left:5px solid var(--s22-orange)}
.s22pf-btn-auto{
  display:inline-block;
  background:var(--s22-orange);
  color:#fff!important;
  border:none;
  border-radius:10px;
  padding:12px 24px;
  font-size:15px;
  font-weight:800;
  cursor:pointer;
  text-decoration:none!important;
  width:auto;
}
.s22pf-btn-auto:hover{background:var(--s22-orange-dark)}
.s22pf-info-table{
  width:100%;
  border-collapse:collapse;
  font-size:13.5px;
}
.s22pf-info-table td{
  padding:10px 12px;
  border-bottom:1px solid var(--s22-line);
  vertical-align:middle;
}
.s22pf-info-table tr:hover td{background:#f6faf7}
.s22pf-info-table td:first-child{width:170px}
.s22pf-front-status{
  display:inline-block;
  padding:3px 11px;
  border-radius:20px;
  font-size:11.5px;
  font-weight:800;
}
.s22pf-front-status.presentada{background:#e8eefb;color:var(--s22-info)}
.s22pf-front-status.validada{background:#fff4d8;color:var(--s22-warn)}
.s22pf-front-status.pagada{background:#e7f5ec;color:var(--s22-ok)}
.s22pf-front-status.rechazada{background:#fbeaea;color:var(--s22-bad)}
.s22pf-html-form .s22pf-form-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:14px;
}
.s22pf-html-form p{margin:0 0 14px}
.s22pf-html-form label{
  display:block;
  font-size:12.5px;
  font-weight:700;
  color:var(--s22-black);
}
.s22pf-html-form input,
.s22pf-html-form select,
.s22pf-html-form textarea{
  width:100%;
  padding:10px 12px;
  border:1.5px solid var(--s22-line);
  border-radius:10px;
  font-size:14px;
  background:#fff;
  box-sizing:border-box;
  margin-top:5px;
}
.s22pf-html-form input:focus,
.s22pf-html-form select:focus,
.s22pf-html-form textarea:focus{
  outline:none;
  border-color:var(--s22-orange);
  box-shadow:0 0 0 3px rgba(40,122,91,.15);
}
.s22pf-resumen-box{
  background:var(--s22-orange-soft);
  border:1px solid #c5e1d2;
  border-radius:var(--s22-radius);
  padding:18px;
  margin:16px 0;
}
.s22pf-resumen-box table{
  width:100%;
  border-collapse:collapse;
}
.s22pf-resumen-box td,
.s22pf-resumen-box th{
  padding:9px 12px;
  border-bottom:1px solid #c5e1d2;
}
.s22pf-resumen-box .num{text-align:right}
.s22pf-profile-dl{
  display:grid;
  grid-template-columns:190px 1fr;
  gap:8px 12px;
  font-size:14px;
}
.s22pf-profile-dl dt{
  font-weight:700;
  color:var(--s22-gray);
}
.s22pf-profile-dl dd{margin:0}
.s22pf-portal-footer{
  background:var(--s22-black);
  color:#bdbdc2;
  font-size:12px;
  padding:18px 28px;
  text-align:center;
  line-height:1.8;
}
.s22pf-portal-footer b{color:#fff}
.s22pf-portal-footer span{color:var(--s22-orange);font-weight:700}
@media(max-width:640px){
  .s22pf-profile-dl{grid-template-columns:1fr}
  .s22pf-quien{text-align:left;margin-left:0}
}

/* ===== Pantalla completar suscripción igual al HTML original ===== */
.s22pf-subscription-shell .s22pf-access{
  grid-template-columns:1.05fr 1fr;
  min-height:calc(100vh - 92px);
}
.s22pf-subscription-card-form{
  max-width:540px;
  padding-top:34px;
  padding-bottom:34px;
}
.s22pf-subscription-html-form{
  margin-top:0;
}
.s22pf-subscription-html-form .s22pf-form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 14px;
}
.s22pf-subscription-html-form .s22pf-form-grid p{
  margin:0 0 14px;
}
.s22pf-subscription-html-form .s22pf-form-grid .full{
  grid-column:1/-1;
}
.s22pf-subscription-html-form label{
  display:block;
  font-size:12.5px;
  font-weight:700;
  color:var(--s22-black);
  margin-bottom:5px;
}
.s22pf-subscription-html-form input,
.s22pf-subscription-html-form select{
  width:100%;
  padding:10px 12px;
  border:1.5px solid var(--s22-line);
  border-radius:10px;
  font-size:14px;
  background:#fff;
  box-sizing:border-box;
}
.s22pf-subscription-html-form input:focus,
.s22pf-subscription-html-form select:focus{
  outline:none;
  border-color:var(--s22-orange);
  box-shadow:0 0 0 3px rgba(40,122,91,.15);
}
.s22pf-help{
  display:block;
  font-size:11.5px;
  color:var(--s22-gray);
  margin-top:4px;
  line-height:1.45;
}
.s22pf-declaration{
  font-size:12.5px;
}
.s22pf-subscription-html-form .s22pf-check{
  font-weight:400!important;
  display:flex;
  align-items:flex-start;
  gap:8px;
}
.s22pf-subscription-html-form .s22pf-check input{
  width:auto;
  margin-top:2px;
  flex:none;
}
.s22pf-subscription-html-form .s22pf-btn{
  margin-top:2px;
}
.s22pf-demo-hint{
  margin-top:18px;
  background:var(--s22-orange-soft);
  border:1px solid #c5e1d2;
  color:#8a4a10;
  border-radius:10px;
  font-size:12px;
  padding:10px 13px;
  line-height:1.6;
}
@media(max-width:900px){
  .s22pf-subscription-shell .s22pf-access{
    grid-template-columns:1fr;
  }
  .s22pf-subscription-card-form{
    max-width:none;
  }
}
@media(max-width:640px){
  .s22pf-subscription-html-form .s22pf-form-grid{
    grid-template-columns:1fr;
  }
}

/* ===== Acceso + suscripción en la misma caja, igual al HTML original ===== */
.s22pf-original-access-shell .acceso-cuerpo{
  flex:1;
  display:grid;
  grid-template-columns:1.1fr 1fr;
  min-height:0;
}
.s22pf-original-access-shell .acceso-form{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 24px;
  background:#fff;
}
.s22pf-original-access-shell .caja-acceso{
  width:100%;
  max-width:420px;
}
.s22pf-original-access-shell .caja-acceso h3{
  font-size:22px;
  font-weight:800;
  margin:0 0 4px;
}
.s22pf-original-access-shell .caja-acceso .sub{
  color:var(--s22-gray);
  font-size:13.5px;
  margin-bottom:22px;
}
.s22pf-original-access-shell .tabs-acceso{
  display:flex;
  border:1.5px solid var(--s22-line);
  border-radius:10px;
  overflow:hidden;
  margin-bottom:22px;
}
.s22pf-original-access-shell .tabs-acceso button{
  flex:1;
  border:none;
  background:#fff;
  padding:11px;
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  color:var(--s22-gray);
}
.s22pf-original-access-shell .tabs-acceso button.activa{
  background:var(--s22-orange);
  color:#fff;
}
.s22pf-original-access-shell .campo{
  margin-bottom:14px;
}
.s22pf-original-access-shell label{
  display:block;
  font-size:12.5px;
  font-weight:700;
  color:var(--s22-black);
  margin-bottom:5px;
}
.s22pf-original-access-shell input,
.s22pf-original-access-shell select,
.s22pf-original-access-shell textarea{
  width:100%;
  padding:10px 12px;
  border:1.5px solid var(--s22-line);
  border-radius:10px;
  font-size:14px;
  background:#fff;
  box-sizing:border-box;
}
.s22pf-original-access-shell input:focus,
.s22pf-original-access-shell select:focus{
  outline:none;
  border-color:var(--s22-orange);
  box-shadow:0 0 0 3px rgba(40,122,91,.15);
}
.s22pf-original-access-shell .grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:14px;
}
.s22pf-original-access-shell .ayuda{
  font-size:11.5px;
  color:var(--s22-gray);
  margin-top:4px;
  line-height:1.45;
}
.s22pf-original-access-shell .btn{
  background:var(--s22-orange);
  color:#fff;
  border:none;
  border-radius:10px;
  padding:12px 24px;
  font-size:15px;
  font-weight:800;
  cursor:pointer;
  width:100%;
}
.s22pf-original-access-shell .btn:hover{
  background:var(--s22-orange-dark);
}
.s22pf-original-access-shell .divisor{
  display:flex;
  align-items:center;
  gap:12px;
  margin:18px 0;
  color:var(--s22-gray);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:1px;
}
.s22pf-original-access-shell .divisor::before,
.s22pf-original-access-shell .divisor::after{
  content:'';
  flex:1;
  height:1px;
  background:var(--s22-line);
}
.s22pf-original-access-shell .btn-sso{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  padding:11px;
  border:1.5px solid var(--s22-line);
  border-radius:10px;
  background:#fff;
  font-size:14px;
  font-weight:700;
  color:var(--s22-black)!important;
  cursor:pointer;
  margin-bottom:10px;
  text-decoration:none!important;
  box-sizing:border-box;
}
.s22pf-original-access-shell .btn-sso:hover{
  border-color:var(--s22-orange);
  background:#f6faf7;
}
.s22pf-original-access-shell .btn-sso svg{
  flex:none;
}
.s22pf-original-access-shell .btn-sso[disabled],
.s22pf-original-access-shell .s22pf-disabled-sso{
  opacity:.62;
  cursor:not-allowed;
}
.s22pf-original-access-shell .demo-hint{
  margin-top:18px;
  background:var(--s22-orange-soft);
  border:1px solid #c5e1d2;
  color:#8a4a10;
  border-radius:10px;
  font-size:12px;
  padding:10px 13px;
  line-height:1.6;
}
.s22pf-original-access-shell #s22pf-f-alta{
  max-height:62vh;
  overflow:auto;
  padding-right:4px;
}
@media(max-width:860px){
  .s22pf-original-access-shell .acceso-cuerpo{
    grid-template-columns:1fr;
  }
}

/* Corrección funcional pestañas Acceder / Registrarme */
.s22pf-original-access-shell .tabs-acceso button{
  pointer-events:auto;
  position:relative;
  z-index:2;
}
.s22pf-original-access-shell #s22pf-f-login,
.s22pf-original-access-shell #s22pf-f-alta{
  transition:none;
}

/* Recuperación de contraseña en acceso */
.s22pf-lost-password{
  text-align:center;
  margin:10px 0 0!important;
  font-size:12.5px;
}
.s22pf-lost-password a{
  color:var(--s22-orange)!important;
  font-weight:800;
  text-decoration:none!important;
}
.s22pf-lost-password a:hover{
  text-decoration:underline!important;
}

/* ===== Filtros bonitos en panel de usuario ===== */
.s22pf-front-filter-bar{
  display:grid;
  grid-template-columns:2fr repeat(5,minmax(120px,1fr));
  gap:12px;
  align-items:end;
  background:linear-gradient(135deg,#ffffff 0%,#f2f7f3 100%);
  border:1px solid var(--s22-line);
  border-left:5px solid var(--s22-orange);
  border-radius:18px;
  padding:16px;
  margin:0 0 18px;
  box-shadow:0 8px 24px rgba(0,0,0,.045);
}
.s22pf-front-filter-bar label{
  display:block;
  font-size:11px;
  font-weight:900;
  color:var(--s22-gray);
  text-transform:uppercase;
  letter-spacing:.07em;
  margin-bottom:5px;
}
.s22pf-front-filter-bar input,
.s22pf-front-filter-bar select{
  width:100%;
  min-height:39px;
  background:#fff;
  border:1.5px solid var(--s22-line);
  border-radius:12px;
  padding:8px 11px;
  box-sizing:border-box;
}
.s22pf-front-filter-bar input:focus,
.s22pf-front-filter-bar select:focus{
  border-color:var(--s22-orange);
  box-shadow:0 0 0 3px rgba(40,122,91,.14);
  outline:none;
}
.s22pf-front-filter-actions{
  grid-column:1/-1;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.s22pf-front-filter-actions a{
  display:inline-flex;
  align-items:center;
  min-height:39px;
  border:1px solid var(--s22-line);
  border-radius:12px;
  padding:0 14px;
  background:#fff;
  color:var(--s22-black)!important;
  text-decoration:none!important;
  font-weight:850;
}
@media(max-width:1050px){
  .s22pf-front-filter-bar{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .s22pf-front-filter-bar{grid-template-columns:1fr}
}

/* ===== Toolbar frontal de filtros compacta S22 ===== */
.s22pf-front-toolbar-filter,
.s22pf-front-filter-bar{
  display:flex!important;
  align-items:flex-end!important;
  gap:10px!important;
  flex-wrap:nowrap!important;
  overflow-x:auto!important;
  background:linear-gradient(90deg,#1c1c1c 0%,#2a2a2a 100%)!important;
  border:0!important;
  border-bottom:4px solid var(--s22-orange)!important;
  border-radius:18px!important;
  padding:14px!important;
  margin:0 0 18px!important;
  box-shadow:0 12px 28px rgba(0,0,0,.12)!important;
}
.s22pf-front-filter-bar>div{
  flex:0 0 145px!important;
  min-width:145px!important;
}
.s22pf-front-filter-bar .s22pf-filter-search,
.s22pf-front-filter-bar>div:first-child{
  flex-basis:250px!important;
  min-width:250px!important;
}
.s22pf-front-filter-bar label{
  display:block!important;
  color:#91c5ab!important;
  font-size:10px!important;
  font-weight:900!important;
  text-transform:uppercase!important;
  letter-spacing:.08em!important;
  margin:0 0 5px!important;
}
.s22pf-front-filter-bar input,
.s22pf-front-filter-bar select{
  width:100%!important;
  min-height:38px!important;
  height:38px!important;
  background:#fff!important;
  border:1px solid rgba(255,255,255,.35)!important;
  border-radius:12px!important;
  padding:7px 11px!important;
  color:#1c1c1c!important;
  box-shadow:0 2px 8px rgba(0,0,0,.12)!important;
}
.s22pf-front-filter-actions{
  flex:0 0 auto!important;
  min-width:max-content!important;
  display:flex!important;
  gap:8px!important;
  align-items:end!important;
}
.s22pf-front-filter-actions .s22pf-btn-auto{
  height:38px!important;
  min-height:38px!important;
  border-radius:12px!important;
  padding:0 16px!important;
  display:inline-flex!important;
  align-items:center!important;
}
.s22pf-front-filter-actions a{
  height:38px!important;
  min-height:38px!important;
  display:inline-flex!important;
  align-items:center!important;
  background:#fff!important;
  border:1px solid var(--s22-line)!important;
  border-radius:12px!important;
  padding:0 14px!important;
  color:#1c1c1c!important;
  text-decoration:none!important;
  font-weight:900!important;
  white-space:nowrap!important;
}

/* ===== FIX FINAL: filtro frontal Mis facturas ===== */
.s22pf-html-portal .s22pf-front-filter-bar,
.s22pf-front .s22pf-front-filter-bar,
form.s22pf-front-filter-bar{
  display:flex!important;
  align-items:flex-end!important;
  gap:10px!important;
  flex-wrap:nowrap!important;
  overflow-x:auto!important;
  background:linear-gradient(90deg,#1c1c1c 0%,#2a2a2a 100%)!important;
  border:0!important;
  border-bottom:4px solid var(--s22-orange)!important;
  border-radius:18px!important;
  padding:14px!important;
  margin:0 0 18px!important;
  box-shadow:0 12px 28px rgba(0,0,0,.12)!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
.s22pf-html-portal .s22pf-front-filter-bar>div,
.s22pf-front .s22pf-front-filter-bar>div,
form.s22pf-front-filter-bar>div{
  flex:0 0 145px!important;
  min-width:145px!important;
  margin:0!important;
}
.s22pf-html-portal .s22pf-front-filter-bar>div:first-child,
.s22pf-front .s22pf-front-filter-bar>div:first-child,
form.s22pf-front-filter-bar>div:first-child{
  flex-basis:260px!important;
  min-width:260px!important;
}
.s22pf-html-portal .s22pf-front-filter-bar label,
.s22pf-front .s22pf-front-filter-bar label,
form.s22pf-front-filter-bar label{
  display:block!important;
  color:#91c5ab!important;
  font-size:10px!important;
  font-weight:900!important;
  text-transform:uppercase!important;
  letter-spacing:.08em!important;
  margin:0 0 5px!important;
  line-height:1.2!important;
}
.s22pf-html-portal .s22pf-front-filter-bar input,
.s22pf-html-portal .s22pf-front-filter-bar select,
.s22pf-front .s22pf-front-filter-bar input,
.s22pf-front .s22pf-front-filter-bar select,
form.s22pf-front-filter-bar input,
form.s22pf-front-filter-bar select{
  width:100%!important;
  min-height:38px!important;
  height:38px!important;
  background:#fff!important;
  border:1px solid rgba(255,255,255,.35)!important;
  border-radius:12px!important;
  padding:7px 11px!important;
  color:#1c1c1c!important;
  box-shadow:0 2px 8px rgba(0,0,0,.12)!important;
  box-sizing:border-box!important;
}
.s22pf-html-portal .s22pf-front-filter-bar input:focus,
.s22pf-html-portal .s22pf-front-filter-bar select:focus,
.s22pf-front .s22pf-front-filter-bar input:focus,
.s22pf-front .s22pf-front-filter-bar select:focus,
form.s22pf-front-filter-bar input:focus,
form.s22pf-front-filter-bar select:focus{
  border-color:var(--s22-orange)!important;
  box-shadow:0 0 0 3px rgba(40,122,91,.25)!important;
  outline:none!important;
}
.s22pf-html-portal .s22pf-front-filter-actions,
.s22pf-front .s22pf-front-filter-actions,
form.s22pf-front-filter-bar .s22pf-front-filter-actions{
  flex:0 0 auto!important;
  min-width:max-content!important;
  display:flex!important;
  gap:8px!important;
  align-items:flex-end!important;
  margin:0!important;
}
.s22pf-html-portal .s22pf-front-filter-actions .s22pf-btn-auto,
.s22pf-front .s22pf-front-filter-actions .s22pf-btn-auto,
form.s22pf-front-filter-bar .s22pf-front-filter-actions .s22pf-btn-auto{
  height:38px!important;
  min-height:38px!important;
  border-radius:12px!important;
  padding:0 16px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  white-space:nowrap!important;
}
.s22pf-html-portal .s22pf-front-filter-actions a,
.s22pf-front .s22pf-front-filter-actions a,
form.s22pf-front-filter-bar .s22pf-front-filter-actions a{
  height:38px!important;
  min-height:38px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:#fff!important;
  border:1px solid var(--s22-line)!important;
  border-radius:12px!important;
  padding:0 14px!important;
  color:#1c1c1c!important;
  text-decoration:none!important;
  font-weight:900!important;
  white-space:nowrap!important;
}
@media(max-width:900px){
  .s22pf-html-portal .s22pf-front-filter-bar,
  .s22pf-front .s22pf-front-filter-bar,
  form.s22pf-front-filter-bar{
    overflow-x:auto!important;
    flex-wrap:nowrap!important;
  }
}

/* ===== Mis facturas adaptado a móvil ===== */
.s22pf-front-invoice-list{
  width:100%;
  overflow-x:auto;
}
.s22pf-mobile-detail-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--s22-line);
  background:#fff;
  color:var(--s22-black);
  border-radius:999px;
  padding:7px 12px;
  font-size:12px;
  font-weight:900;
  cursor:pointer;
  white-space:nowrap;
}
.s22pf-mobile-detail-btn:hover{
  border-color:var(--s22-orange);
  background:#f6faf7;
}
.s22pf-mobile-detail-row{
  display:none;
}
.s22pf-mobile-detail-row.is-open{
  display:table-row;
}
.s22pf-mobile-invoice-panel{
  background:#f6faf7;
  border:1px solid #c5e1d2;
  border-left:5px solid var(--s22-orange);
  border-radius:16px;
  padding:16px;
  margin:8px 0;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
}
.s22pf-mobile-invoice-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  margin-bottom:12px;
}
.s22pf-mobile-invoice-head span{
  display:block;
  color:var(--s22-gray);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:900;
}
.s22pf-mobile-invoice-head strong{
  display:block;
  font-size:20px;
  color:var(--s22-black);
}
.s22pf-mobile-invoice-panel dl{
  display:grid;
  grid-template-columns:135px 1fr;
  gap:8px 12px;
  margin:0;
}
.s22pf-mobile-invoice-panel dt{
  color:var(--s22-gray);
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.s22pf-mobile-invoice-panel dd{
  margin:0;
  color:var(--s22-black);
  font-size:14px;
  overflow-wrap:anywhere;
}
.s22pf-mobile-file-link{
  display:inline-flex;
  background:#1c1c1c;
  color:#fff!important;
  border-radius:10px;
  padding:8px 12px;
  font-size:12px;
  font-weight:900;
  text-decoration:none!important;
}
.s22pf-mobile-close-btn{
  margin-top:14px;
  width:100%;
  border:1px solid var(--s22-line);
  background:#fff;
  color:var(--s22-black);
  border-radius:12px;
  min-height:38px;
  font-weight:900;
  cursor:pointer;
}
@media(max-width:720px){
  .s22pf-front-invoice-list{
    overflow-x:visible;
  }
  .s22pf-mobile-invoice-table{
    border-collapse:separate!important;
    border-spacing:0 12px!important;
  }
  .s22pf-mobile-invoice-table thead{
    display:none!important;
  }
  .s22pf-mobile-invoice-table,
  .s22pf-mobile-invoice-table tbody,
  .s22pf-mobile-invoice-table tr,
  .s22pf-mobile-invoice-table td{
    display:block!important;
    width:100%!important;
  }
  .s22pf-mobile-invoice-table .s22pf-invoice-row{
    background:#fff!important;
    border:1px solid var(--s22-line)!important;
    border-top:4px solid var(--s22-orange)!important;
    border-radius:16px!important;
    padding:12px!important;
    box-shadow:0 8px 22px rgba(0,0,0,.055)!important;
    box-sizing:border-box!important;
  }
  .s22pf-mobile-invoice-table .s22pf-invoice-row td{
    display:flex!important;
    justify-content:space-between!important;
    align-items:flex-start!important;
    gap:14px!important;
    border:0!important;
    border-bottom:1px solid #f0f0f3!important;
    padding:9px 4px!important;
    text-align:right!important;
    box-sizing:border-box!important;
  }
  .s22pf-mobile-invoice-table .s22pf-invoice-row td:last-child{
    border-bottom:0!important;
    padding-top:12px!important;
  }
  .s22pf-mobile-invoice-table .s22pf-invoice-row td::before{
    content:attr(data-label);
    flex:0 0 92px;
    max-width:92px;
    color:var(--s22-gray);
    text-align:left;
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.05em;
  }
  .s22pf-mobile-invoice-table .s22pf-invoice-row td[data-label="Evento"],
  .s22pf-mobile-invoice-table .s22pf-invoice-row td[data-label="Concepto"]{
    display:block!important;
    text-align:left!important;
  }
  .s22pf-mobile-invoice-table .s22pf-invoice-row td[data-label="Evento"]::before,
  .s22pf-mobile-invoice-table .s22pf-invoice-row td[data-label="Concepto"]::before{
    display:block!important;
    margin-bottom:4px;
    max-width:none;
  }
  .s22pf-mobile-detail-btn{
    width:100%;
    min-height:38px;
    background:var(--s22-orange);
    border-color:var(--s22-orange);
    color:#fff;
  }
  .s22pf-mobile-detail-row.is-open{
    display:block!important;
  }
  .s22pf-mobile-detail-row td{
    display:block!important;
    border:0!important;
    padding:0!important;
  }
  .s22pf-mobile-invoice-panel{
    margin:-4px 0 14px;
  }
  .s22pf-mobile-invoice-panel dl{
    grid-template-columns:1fr;
    gap:4px;
  }
  .s22pf-mobile-invoice-panel dt{
    margin-top:8px;
  }
}

/* ===== Código de evento en formulario de factura ===== */
.s22pf-field-help{
  display:block;
  color:var(--s22-gray);
  font-size:11.5px;
  line-height:1.45;
  margin-top:4px;
}
.s22pf-front-error{
  background:#fbeaea;
  border:1px solid #f0c4c1;
  color:#9f241c;
  border-radius:12px;
  padding:12px 14px;
  margin:0 0 16px;
  font-size:13px;
  line-height:1.45;
  font-weight:700;
}

/* ===== Mis datos editables por usuario ===== */
.s22pf-profile-edit-grid{
  display:grid;
  grid-template-columns:1.4fr .9fr;
  gap:18px;
  margin-top:22px;
}
.s22pf-profile-edit-form{
  background:#fff;
  border:1px solid var(--s22-line);
  border-left:5px solid var(--s22-orange);
  border-radius:18px;
  padding:18px;
  box-shadow:0 8px 24px rgba(0,0,0,.045);
}
.s22pf-password-form{
  border-left-color:#3b5bdb;
}
.s22pf-profile-edit-form h3{
  margin:0 0 14px;
  font-size:18px;
  color:var(--s22-black);
}
.s22pf-profile-edit-form label{
  display:block;
  font-size:11px;
  font-weight:900;
  color:var(--s22-gray);
  text-transform:uppercase;
  letter-spacing:.07em;
  margin-bottom:5px;
}
.s22pf-profile-edit-form input,
.s22pf-profile-edit-form select{
  width:100%;
  min-height:40px;
  border:1.5px solid var(--s22-line);
  border-radius:12px;
  padding:8px 11px;
  box-sizing:border-box;
  background:#fff;
}
.s22pf-profile-edit-form input:focus,
.s22pf-profile-edit-form select:focus{
  border-color:var(--s22-orange);
  box-shadow:0 0 0 3px rgba(40,122,91,.14);
  outline:none;
}
.s22pf-password-form input:focus{
  border-color:#3b5bdb;
  box-shadow:0 0 0 3px rgba(59,91,219,.14);
}
.s22pf-readonly-box{
  background:#f6f6f8;
  border:1px solid var(--s22-line);
  border-radius:14px;
  padding:12px 14px;
  margin:4px 0 14px;
}
.s22pf-readonly-box strong{
  display:block;
  color:var(--s22-black);
  margin-bottom:3px;
}
.s22pf-readonly-box p{
  margin:0;
  color:var(--s22-gray);
  font-size:13px;
  line-height:1.45;
}
.s22pf-locked{
  display:inline-flex;
  margin-left:8px;
  background:#fff4d8;
  color:#8a5a00;
  border:1px solid #f0d28a;
  border-radius:999px;
  padding:2px 8px;
  font-size:10.5px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.s22pf-password-help{
  margin:12px 0 0;
  color:var(--s22-gray);
  font-size:13px;
  line-height:1.45;
}
.s22pf-password-help a{
  color:var(--s22-orange)!important;
  font-weight:900;
  text-decoration:none!important;
}
.s22pf-password-help a:hover{
  text-decoration:underline!important;
}
.s22pf-front-success{
  background:#e7f5ec;
  border:1px solid #b7e0c6;
  color:#1d7a44;
  border-radius:12px;
  padding:12px 14px;
  margin:0 0 16px;
  font-size:13px;
  line-height:1.45;
  font-weight:800;
}
@media(max-width:900px){
  .s22pf-profile-edit-grid{
    grid-template-columns:1fr;
  }
}

.s22pf-front-type{
  display:inline-flex;
  align-items:center;
  padding:4px 9px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  background:#eef2ff;
  color:#273a73;
}
.s22pf-front-type.pago{
  background:#edf6f0;
  color:#b54708;
}


/* ===== Mejoras filtros front, legibilidad y scroll Mac 2.2.6 ===== */
.s22pf-front-filter-bar.s22pf-front-toolbar-filter {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(170px, 1fr)) !important;
  gap: 14px 16px !important;
  align-items: end !important;
}

.s22pf-front-filter-bar .s22pf-front-filter-actions {
  grid-column: 1 / -1 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.s22pf-front-filter-bar label,
.s22pf-front-toolbar-filter label,
.s22pf-html-form label,
.s22pf-subscription-html-form label,
.s22pf-profile-edit-form label,
#s22pf-f-login label,
#s22pf-f-alta label {
  color: #111827 !important;
  font-size: 14.5px !important;
  font-weight: 900 !important;
}

.s22pf-front-filter-bar input,
.s22pf-front-filter-bar select,
.s22pf-front-toolbar-filter input,
.s22pf-front-toolbar-filter select,
.s22pf-html-form input,
.s22pf-html-form select,
.s22pf-html-form textarea,
.s22pf-subscription-html-form input,
.s22pf-subscription-html-form select,
.s22pf-subscription-html-form textarea,
.s22pf-profile-edit-form input,
.s22pf-profile-edit-form select,
#s22pf-f-login input,
#s22pf-f-alta input,
#s22pf-f-alta select {
  color: #0f172a !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: geometricPrecision !important;
}

.s22pf-front-filter-bar input::placeholder,
.s22pf-front-toolbar-filter input::placeholder,
.s22pf-html-form input::placeholder,
.s22pf-subscription-html-form input::placeholder,
.s22pf-profile-edit-form input::placeholder,
#s22pf-f-login input::placeholder,
#s22pf-f-alta input::placeholder {
  color: #334155 !important;
  opacity: 1 !important;
  font-weight: 800 !important;
}

.s22pf-front-invoice-list,
.s22pf-table-scroll {
  overflow-x: scroll !important;
  scrollbar-gutter: stable both-edges !important;
  -webkit-overflow-scrolling: touch !important;
}

.s22pf-front-invoice-list::-webkit-scrollbar,
.s22pf-table-scroll::-webkit-scrollbar {
  height: 14px !important;
}

.s22pf-front-invoice-list::-webkit-scrollbar-track,
.s22pf-table-scroll::-webkit-scrollbar-track {
  background: #e5e7eb !important;
  border-radius: 999px !important;
}

.s22pf-front-invoice-list::-webkit-scrollbar-thumb,
.s22pf-table-scroll::-webkit-scrollbar-thumb {
  background: #111827 !important;
  border-radius: 999px !important;
  border: 3px solid #e5e7eb !important;
}

.s22pf-irpf-percent-field {
  transition: opacity .18s ease;
}

@media (max-width: 980px) {
  .s22pf-front-filter-bar.s22pf-front-toolbar-filter {
    grid-template-columns: repeat(2, minmax(170px, 1fr)) !important;
  }
}

@media (max-width: 680px) {
  .s22pf-front-filter-bar.s22pf-front-toolbar-filter {
    grid-template-columns: 1fr !important;
  }
}


/* ===== Fix contraste filtros front 2.2.7 ===== */
.s22pf-front-filter-bar.s22pf-front-toolbar-filter {
  background: #171717 !important;
  border: 1px solid #287a5b !important;
  border-bottom: 4px solid #287a5b !important;
  border-radius: 18px !important;
  padding: 18px 14px !important;
}

.s22pf-front-filter-bar.s22pf-front-toolbar-filter label {
  display: block !important;
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 950 !important;
  letter-spacing: .035em !important;
  text-transform: uppercase !important;
  margin: 0 0 8px !important;
  opacity: 1 !important;
}

.s22pf-front-filter-bar.s22pf-front-toolbar-filter input,
.s22pf-front-filter-bar.s22pf-front-toolbar-filter select {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 2px solid #ffffff !important;
  border-radius: 12px !important;
  min-height: 42px !important;
  padding: 8px 12px !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}

.s22pf-front-filter-bar.s22pf-front-toolbar-filter input::placeholder {
  color: #1f2937 !important;
  opacity: 1 !important;
  font-weight: 900 !important;
}

.s22pf-front-filter-bar.s22pf-front-toolbar-filter input:focus,
.s22pf-front-filter-bar.s22pf-front-toolbar-filter select:focus {
  outline: 3px solid rgba(40,122,91,.45) !important;
  border-color: #287a5b !important;
}


/* ===== Formulario enviar factura mejorado y PDF obligatorio 2.2.8 ===== */
.s22pf-invoice-submit-card {
  max-width: 1140px;
  margin: 0 auto;
  padding: 30px 30px 34px !important;
  border-radius: 22px !important;
  border: 1px solid #e5e7eb !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .08) !important;
}

.s22pf-invoice-submit-card h2 {
  font-size: 25px !important;
  line-height: 1.15 !important;
  margin-bottom: 8px !important;
  color: #020617 !important;
  letter-spacing: -.02em !important;
}

.s22pf-invoice-submit-card .desc {
  color: #475569 !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  margin-bottom: 24px !important;
}

.s22pf-invoice-submit-card .s22pf-html-form {
  display: block !important;
}

.s22pf-invoice-submit-card .s22pf-form-grid {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 18px 18px !important;
  align-items: start !important;
}

.s22pf-invoice-submit-card .s22pf-form-grid > p {
  grid-column: span 3 !important;
  margin: 0 !important;
  min-width: 0 !important;
}

.s22pf-invoice-submit-card .s22pf-form-grid > p.full {
  grid-column: 1 / -1 !important;
}

.s22pf-invoice-submit-card .s22pf-form-grid > p:nth-child(5) {
  grid-column: span 6 !important;
}

.s22pf-invoice-submit-card label {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  color: #020617 !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  letter-spacing: -.01em !important;
}

.s22pf-invoice-submit-card input,
.s22pf-invoice-submit-card select,
.s22pf-invoice-submit-card textarea {
  width: 100% !important;
  min-height: 48px !important;
  border: 1.8px solid #cbd5e1 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  color: #0f172a !important;
  font-size: 15.5px !important;
  font-weight: 850 !important;
  padding: 11px 14px !important;
  box-shadow: 0 1px 0 rgba(15,23,42,.03) !important;
  outline: none !important;
}

.s22pf-invoice-submit-card input:focus,
.s22pf-invoice-submit-card select:focus,
.s22pf-invoice-submit-card textarea:focus {
  border-color: #287a5b !important;
  box-shadow: 0 0 0 4px rgba(40,122,91, .16) !important;
}

.s22pf-invoice-submit-card input::placeholder {
  color: #334155 !important;
  opacity: 1 !important;
  font-weight: 850 !important;
}

.s22pf-invoice-submit-card .s22pf-field-help {
  display: block !important;
  margin-top: 7px !important;
  color: #475569 !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
}

.s22pf-invoice-submit-card .s22pf-file-required-field {
  padding: 16px !important;
  border: 2px dashed #ffb36b !important;
  border-radius: 16px !important;
  background: #fff7ed !important;
}

.s22pf-invoice-submit-card input[type="file"] {
  min-height: auto !important;
  padding: 13px !important;
  border: 1.8px solid #fed7aa !important;
  background: #ffffff !important;
  cursor: pointer !important;
}

.s22pf-invoice-submit-card input[type="file"]::file-selector-button {
  margin-right: 12px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: #111827 !important;
  color: #ffffff !important;
  padding: 10px 14px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

.s22pf-invoice-submit-card .s22pf-resumen-box {
  margin-top: 24px !important;
  border-radius: 18px !important;
  border: 1px solid #fed7aa !important;
  background: #fff7ed !important;
  padding: 18px !important;
}

.s22pf-invoice-submit-card .s22pf-resumen-box table {
  width: 100% !important;
  border-collapse: collapse !important;
  background: #ffffff !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

.s22pf-invoice-submit-card .s22pf-resumen-box td,
.s22pf-invoice-submit-card .s22pf-resumen-box th {
  padding: 13px 14px !important;
  border: 1px solid #fed7aa !important;
  color: #111827 !important;
  font-size: 14.5px !important;
}

.s22pf-invoice-submit-card .s22pf-btn-auto {
  margin-top: 22px !important;
  min-height: 48px !important;
  padding: 0 24px !important;
  border-radius: 14px !important;
  background: #287a5b !important;
  color: #ffffff !important;
  border: 0 !important;
  font-size: 16px !important;
  font-weight: 950 !important;
  box-shadow: 0 16px 35px rgba(40,122,91,.28) !important;
}

.s22pf-invoice-submit-card .s22pf-irpf-apply {
  appearance: auto !important;
}

@media (max-width: 980px) {
  .s22pf-invoice-submit-card {
    padding: 22px 18px 26px !important;
  }

  .s22pf-invoice-submit-card .s22pf-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .s22pf-invoice-submit-card .s22pf-form-grid > p,
  .s22pf-invoice-submit-card .s22pf-form-grid > p:nth-child(5) {
    grid-column: span 1 !important;
  }

  .s22pf-invoice-submit-card .s22pf-form-grid > p.full,
  .s22pf-invoice-submit-card .s22pf-file-required-field {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 640px) {
  .s22pf-invoice-submit-card .s22pf-form-grid {
    grid-template-columns: 1fr !important;
  }

  .s22pf-invoice-submit-card .s22pf-form-grid > p,
  .s22pf-invoice-submit-card .s22pf-form-grid > p:nth-child(5),
  .s22pf-invoice-submit-card .s22pf-form-grid > p.full {
    grid-column: 1 / -1 !important;
  }
}


/* ===== Ajuste fila Concepto Base IVA 2.2.9 ===== */
#s22-enviar .s22pf-invoice-submit-card .s22pf-form-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  column-gap: 18px !important;
  row-gap: 20px !important;
  align-items: start !important;
}

/* Primera línea */
#s22-enviar .s22pf-invoice-submit-card .s22pf-form-grid > p:nth-child(1) {
  grid-column: 1 / span 3 !important;
}

#s22-enviar .s22pf-invoice-submit-card .s22pf-form-grid > p:nth-child(2) {
  grid-column: 4 / span 3 !important;
}

#s22-enviar .s22pf-invoice-submit-card .s22pf-form-grid > p:nth-child(3) {
  grid-column: 7 / span 3 !important;
}

#s22-enviar .s22pf-invoice-submit-card .s22pf-form-grid > p:nth-child(4) {
  grid-column: 10 / span 3 !important;
}

/* Segunda línea: Concepto + Base + IVA */
#s22-enviar .s22pf-invoice-submit-card .s22pf-form-grid > p:nth-child(5) {
  grid-column: 1 / span 6 !important;
}

#s22-enviar .s22pf-invoice-submit-card .s22pf-form-grid > p:nth-child(6) {
  grid-column: 7 / span 3 !important;
}

#s22-enviar .s22pf-invoice-submit-card .s22pf-form-grid > p:nth-child(7) {
  grid-column: 10 / span 3 !important;
}

/* Tercera línea: IRPF */
#s22-enviar .s22pf-invoice-submit-card .s22pf-form-grid > p:nth-child(8) {
  grid-column: 1 / span 3 !important;
}

#s22-enviar .s22pf-invoice-submit-card .s22pf-form-grid > p:nth-child(9) {
  grid-column: 4 / span 3 !important;
}

/* Archivo siempre ancho completo */
#s22-enviar .s22pf-invoice-submit-card .s22pf-form-grid > p.s22pf-file-required-field,
#s22-enviar .s22pf-invoice-submit-card .s22pf-form-grid > p:nth-last-child(1) {
  grid-column: 1 / -1 !important;
}

#s22-enviar .s22pf-invoice-submit-card .s22pf-form-grid > p:nth-child(5) input,
#s22-enviar .s22pf-invoice-submit-card .s22pf-form-grid > p:nth-child(6) input,
#s22-enviar .s22pf-invoice-submit-card .s22pf-form-grid > p:nth-child(7) input {
  min-height: 50px !important;
}

#s22-enviar .s22pf-invoice-submit-card .s22pf-form-grid > p:nth-child(6) label,
#s22-enviar .s22pf-invoice-submit-card .s22pf-form-grid > p:nth-child(7) label {
  min-height: 78px !important;
}

#s22-enviar .s22pf-invoice-submit-card .s22pf-form-grid > p:nth-child(6) label {
  line-height: 1.18 !important;
}

#s22-enviar .s22pf-invoice-submit-card .s22pf-form-grid > p:nth-child(6) label::first-line {
  font-weight: 950 !important;
}

@media (max-width: 980px) {
  #s22-enviar .s22pf-invoice-submit-card .s22pf-form-grid > p:nth-child(n) {
    grid-column: auto !important;
  }

  #s22-enviar .s22pf-invoice-submit-card .s22pf-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #s22-enviar .s22pf-invoice-submit-card .s22pf-form-grid > p:nth-child(5),
  #s22-enviar .s22pf-invoice-submit-card .s22pf-form-grid > p.s22pf-file-required-field,
  #s22-enviar .s22pf-invoice-submit-card .s22pf-form-grid > p:nth-last-child(1) {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 640px) {
  #s22-enviar .s22pf-invoice-submit-card .s22pf-form-grid {
    grid-template-columns: 1fr !important;
  }

  #s22-enviar .s22pf-invoice-submit-card .s22pf-form-grid > p:nth-child(n) {
    grid-column: 1 / -1 !important;
  }
}


/* ===== KPIs front clicables y filtros automaticos 2.3.0 ===== */
.s22pf-kpis-front.s22pf-kpis-clickable {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.s22pf-kpis-front.s22pf-kpis-clickable .s22pf-kpi-link {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  text-decoration: none !important;
  color: inherit !important;
  border-radius: 18px !important;
  border: 1px solid rgba(40,122,91,.22) !important;
  background: #ffffff !important;
  padding: 18px 16px !important;
  box-shadow: 0 14px 36px rgba(15,23,42,.08) !important;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease !important;
  cursor: pointer !important;
}

.s22pf-kpis-front.s22pf-kpis-clickable .s22pf-kpi-link:hover,
.s22pf-kpis-front.s22pf-kpis-clickable .s22pf-kpi-link:focus {
  transform: translateY(-2px) !important;
  border-color: #287a5b !important;
  box-shadow: 0 18px 44px rgba(40,122,91,.16) !important;
  outline: none !important;
}

.s22pf-kpis-front.s22pf-kpis-clickable .s22pf-kpi-link strong {
  color: #0f172a !important;
  font-size: 28px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

.s22pf-kpis-front.s22pf-kpis-clickable .s22pf-kpi-link span {
  color: #334155 !important;
  font-size: 13.5px !important;
  font-weight: 850 !important;
}

@media (max-width: 900px) {
  .s22pf-kpis-front.s22pf-kpis-clickable {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px) {
  .s22pf-kpis-front.s22pf-kpis-clickable {
    grid-template-columns: 1fr !important;
  }
}


/* ===== Filtros front en dos lineas sin scroll 2.3.1 ===== */
.s22pf-front-filter-bar.s22pf-front-toolbar-filter {
  display: grid !important;
  grid-template-columns: 1.35fr .8fr .8fr 1fr .8fr .8fr !important;
  gap: 14px 12px !important;
  align-items: end !important;
  overflow: visible !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: #171717 !important;
  border: 1px solid #287a5b !important;
  border-bottom: 4px solid #287a5b !important;
  border-radius: 18px !important;
  padding: 18px 14px 16px !important;
}

.s22pf-front-filter-bar.s22pf-front-toolbar-filter > div {
  min-width: 0 !important;
  width: 100% !important;
}

.s22pf-front-filter-bar.s22pf-front-toolbar-filter > div:nth-child(1) {
  grid-column: 1 / span 2 !important;
}

.s22pf-front-filter-bar.s22pf-front-toolbar-filter > div:nth-child(2) {
  grid-column: 3 / span 1 !important;
}

.s22pf-front-filter-bar.s22pf-front-toolbar-filter > div:nth-child(3) {
  grid-column: 4 / span 1 !important;
}

.s22pf-front-filter-bar.s22pf-front-toolbar-filter > div:nth-child(4) {
  grid-column: 5 / span 2 !important;
}

.s22pf-front-filter-bar.s22pf-front-toolbar-filter > div:nth-child(5) {
  grid-column: 1 / span 1 !important;
}

.s22pf-front-filter-bar.s22pf-front-toolbar-filter > div:nth-child(6) {
  grid-column: 2 / span 1 !important;
}

.s22pf-front-filter-bar.s22pf-front-toolbar-filter > .s22pf-front-filter-actions {
  grid-column: 3 / -1 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-items: end !important;
  gap: 10px !important;
  min-width: 0 !important;
  padding-top: 22px !important;
}

.s22pf-front-filter-bar.s22pf-front-toolbar-filter label {
  display: block !important;
  margin: 0 0 8px !important;
  color: #ffffff !important;
  font-size: 12.5px !important;
  line-height: 1.2 !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
  letter-spacing: .035em !important;
}

.s22pf-front-filter-bar.s22pf-front-toolbar-filter input,
.s22pf-front-filter-bar.s22pf-front-toolbar-filter select {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 42px !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  color: #0f172a !important;
  border: 2px solid #ffffff !important;
  border-radius: 12px !important;
  padding: 8px 12px !important;
  font-size: 15px !important;
  font-weight: 850 !important;
  box-shadow: none !important;
}

.s22pf-front-filter-bar.s22pf-front-toolbar-filter input::placeholder {
  color: #334155 !important;
  opacity: 1 !important;
  font-weight: 850 !important;
}

.s22pf-front-filter-bar.s22pf-front-toolbar-filter input:focus,
.s22pf-front-filter-bar.s22pf-front-toolbar-filter select:focus {
  outline: 3px solid rgba(40,122,91,.45) !important;
  border-color: #287a5b !important;
}

.s22pf-front-filter-bar.s22pf-front-toolbar-filter .s22pf-btn-auto,
.s22pf-front-filter-bar.s22pf-front-toolbar-filter button[type="submit"] {
  min-height: 42px !important;
  border-radius: 11px !important;
  padding: 0 18px !important;
  background: #287a5b !important;
  color: #ffffff !important;
  border: 0 !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

.s22pf-front-filter-bar.s22pf-front-toolbar-filter .s22pf-front-filter-actions a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 42px !important;
  padding: 0 18px !important;
  border-radius: 11px !important;
  border: 1px solid #4f7cff !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

.s22pf-tarjeta .s22pf-front-filter-bar.s22pf-front-toolbar-filter {
  margin-top: 16px !important;
  margin-bottom: 20px !important;
}

@media (max-width: 1100px) {
  .s22pf-front-filter-bar.s22pf-front-toolbar-filter {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .s22pf-front-filter-bar.s22pf-front-toolbar-filter > div:nth-child(n) {
    grid-column: auto !important;
  }

  .s22pf-front-filter-bar.s22pf-front-toolbar-filter > div:nth-child(1),
  .s22pf-front-filter-bar.s22pf-front-toolbar-filter > div:nth-child(4) {
    grid-column: span 2 !important;
  }

  .s22pf-front-filter-bar.s22pf-front-toolbar-filter > .s22pf-front-filter-actions {
    grid-column: 1 / -1 !important;
    padding-top: 0 !important;
  }
}

@media (max-width: 720px) {
  .s22pf-front-filter-bar.s22pf-front-toolbar-filter {
    grid-template-columns: 1fr !important;
  }

  .s22pf-front-filter-bar.s22pf-front-toolbar-filter > div:nth-child(n),
  .s22pf-front-filter-bar.s22pf-front-toolbar-filter > div:nth-child(1),
  .s22pf-front-filter-bar.s22pf-front-toolbar-filter > div:nth-child(4),
  .s22pf-front-filter-bar.s22pf-front-toolbar-filter > .s22pf-front-filter-actions {
    grid-column: 1 / -1 !important;
  }
}


/* ===== Fix boton limpiar filtros front 2.3.2 ===== */
.s22pf-front-filter-bar.s22pf-front-toolbar-filter > .s22pf-front-filter-actions {
  grid-column: 3 / -1 !important;
  display: flex !important;
  align-items: end !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  padding-top: 22px !important;
  min-width: 0 !important;
}

.s22pf-front-filter-bar.s22pf-front-toolbar-filter .s22pf-front-filter-actions .s22pf-btn-auto,
.s22pf-front-filter-bar.s22pf-front-toolbar-filter .s22pf-front-filter-actions button[type="submit"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 82px !important;
  max-width: none !important;
  min-height: 42px !important;
  padding: 0 18px !important;
  background: #287a5b !important;
  border: 1px solid #287a5b !important;
  border-radius: 11px !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.s22pf-front-filter-bar.s22pf-front-toolbar-filter .s22pf-front-filter-actions a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 86px !important;
  max-width: none !important;
  min-height: 42px !important;
  padding: 0 18px !important;
  background: transparent !important;
  border: 1.5px solid #4f7cff !important;
  border-radius: 11px !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-shadow: none !important;
}

.s22pf-front-filter-bar.s22pf-front-toolbar-filter .s22pf-front-filter-actions a::before {
  content: "Limpiar" !important;
}

.s22pf-front-filter-bar.s22pf-front-toolbar-filter .s22pf-front-filter-actions a {
  font-size: 0 !important;
}

.s22pf-front-filter-bar.s22pf-front-toolbar-filter .s22pf-front-filter-actions a::before {
  font-size: 14px !important;
}

.s22pf-front-filter-bar.s22pf-front-toolbar-filter .s22pf-front-filter-actions a:hover,
.s22pf-front-filter-bar.s22pf-front-toolbar-filter .s22pf-front-filter-actions a:focus {
  background: rgba(79, 124, 255, .18) !important;
  color: #ffffff !important;
  outline: 3px solid rgba(79,124,255,.28) !important;
}

@media (max-width: 1100px) {
  .s22pf-front-filter-bar.s22pf-front-toolbar-filter > .s22pf-front-filter-actions {
    grid-column: 1 / -1 !important;
    padding-top: 0 !important;
  }
}

@media (max-width: 520px) {
  .s22pf-front-filter-bar.s22pf-front-toolbar-filter > .s22pf-front-filter-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .s22pf-front-filter-bar.s22pf-front-toolbar-filter .s22pf-front-filter-actions .s22pf-btn-auto,
  .s22pf-front-filter-bar.s22pf-front-toolbar-filter .s22pf-front-filter-actions button[type="submit"],
  .s22pf-front-filter-bar.s22pf-front-toolbar-filter .s22pf-front-filter-actions a {
    width: 100% !important;
  }
}


/* ===== Alinear botones filtro front 2.3.3 ===== */
.s22pf-front-filter-bar.s22pf-front-toolbar-filter > .s22pf-front-filter-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  padding-top: 0 !important;
  align-self: end !important;
  height: 42px !important;
}

.s22pf-front-filter-bar.s22pf-front-toolbar-filter .s22pf-front-filter-actions .s22pf-btn-auto,
.s22pf-front-filter-bar.s22pf-front-toolbar-filter .s22pf-front-filter-actions button[type="submit"],
.s22pf-front-filter-bar.s22pf-front-toolbar-filter .s22pf-front-filter-actions a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  padding: 0 18px !important;
  margin: 0 !important;
  line-height: 42px !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
  transform: none !important;
}

.s22pf-front-filter-bar.s22pf-front-toolbar-filter .s22pf-front-filter-actions .s22pf-btn-auto,
.s22pf-front-filter-bar.s22pf-front-toolbar-filter .s22pf-front-filter-actions button[type="submit"] {
  border: 1px solid #287a5b !important;
}

.s22pf-front-filter-bar.s22pf-front-toolbar-filter .s22pf-front-filter-actions a {
  border: 1.5px solid #4f7cff !important;
  background: transparent !important;
}

.s22pf-front-filter-bar.s22pf-front-toolbar-filter .s22pf-front-filter-actions a::before {
  line-height: 1 !important;
}

@media (max-width: 1100px) {
  .s22pf-front-filter-bar.s22pf-front-toolbar-filter > .s22pf-front-filter-actions {
    height: auto !important;
    padding-top: 0 !important;
  }
}


/* ===== Caja acceso ancho 800px 2.3.4 ===== */
.s22pf-original-access-shell .caja-acceso {
  width: 100% !important;
  max-width: 800px !important;
}

.s22pf-original-access-shell .acceso-form {
  display: flex !important;
  justify-content: center !important;
}

@media (max-width: 860px) {
  .s22pf-original-access-shell .caja-acceso {
    max-width: 100% !important;
  }
}

/* ===== Acceso WordPress y vista previa 2.3.7 ===== */
.s22pf-wordpress-access {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid #dfe3e8;
  border-radius: 16px;
  background: #f7f8fa;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.s22pf-wordpress-access strong,
.s22pf-wordpress-access span {
  display: block;
}

.s22pf-wordpress-access span {
  margin-top: 4px;
  color: #667085;
  font-size: 12px;
}

.s22pf-wordpress-access-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 17px;
  border: 0;
  border-radius: 999px;
  background: #111;
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
}

.s22pf-preview-banner {
  position: sticky;
  top: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 12px 18px;
  background: #edf6f0;
  border-bottom: 2px solid #287a5b;
  color: #7c2d12;
}

.s22pf-preview-banner a {
  color: #fff !important;
  background: #111;
  border-radius: 999px;
  padding: 8px 14px;
  text-decoration: none !important;
  font-weight: 900;
}

.s22pf-preview-mode form {
  opacity: 1;
}

.s22pf-preview-mode form::after {
  content: 'Formulario desactivado en la vista previa';
  display: block;
  margin-top: 12px;
  color: #9a3412;
  font-weight: 800;
}

@media (max-width: 700px) {
  .s22pf-wordpress-access,
  .s22pf-preview-banner {
    align-items: stretch;
    flex-direction: column;
  }
}

/* ===== Acceso inspirado fielmente en project.s22digital.com · 2.3.9 ===== */
.s22pf-public-shell.s22pf-original-access-shell {
  --s22-gray: #111827;
  min-height: 100vh !important;
  background: #f8fafc !important;
  color: #1f2937 !important;
  font-family: Arial, Helvetica, sans-serif !important;
}

.s22pf-original-access-shell .s22pf-public-topbar,
.s22pf-original-access-shell .s22pf-access-hero,
.s22pf-original-access-shell .s22pf-public-footer {
  display: none !important;
}

.s22pf-original-access-shell .acceso-cuerpo {
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f8fafc !important;
}

.s22pf-original-access-shell .acceso-form {
  width: 100% !important;
  padding: 20px !important;
  background: #f8fafc !important;
  box-sizing: border-box !important;
}

.s22pf-original-access-shell .caja-acceso {
  width: 100% !important;
  max-width: 400px !important;
  margin: 0 auto !important;
  padding: 32px !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06) !important;
  box-sizing: border-box !important;
  transition: max-width .2s ease !important;
  max-height: calc(100vh - 40px) !important;
  overflow-y: auto !important;
  scrollbar-width: thin;
}

.s22pf-original-access-shell.s22pf-register-mode .caja-acceso {
  max-width: 760px !important;
}

.s22pf-original-access-shell .caja-acceso h3 {
  margin: 0 0 8px !important;
  color: #1f2937 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 25px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  text-align: center !important;
}

.s22pf-original-access-shell .caja-acceso .sub {
  margin: 0 0 28px !important;
  color: #111827 !important;
  font-size: 17px !important;
  line-height: 1.5 !important;
  text-align: center !important;
}

.s22pf-original-access-shell .tabs-acceso {
  margin-bottom: 22px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
}

.s22pf-original-access-shell .tabs-acceso button,
.s22pf-original-access-shell label,
.s22pf-original-access-shell .ayuda,
.s22pf-original-access-shell .demo-hint,
.s22pf-original-access-shell .s22pf-wordpress-access span,
.s22pf-original-access-shell .s22pf-lost-password {
  color: #111827 !important;
  font-family: Arial, Helvetica, sans-serif !important;
}

.s22pf-original-access-shell .btn-sso {
  min-height: 48px !important;
  padding: 12px 20px !important;
  gap: 12px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  color: #1f2937 !important;
  background: #fff !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}

.s22pf-original-access-shell .btn-sso:hover {
  border-color: #d1d5db !important;
  background: #f9fafb !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 12px -2px rgba(0,0,0,.1) !important;
}

.s22pf-original-access-shell input,
.s22pf-original-access-shell select,
.s22pf-original-access-shell textarea {
  min-height: 46px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  color: #111827 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 16px !important;
}

.s22pf-original-access-shell .s22pf-wordpress-access {
  align-items: stretch !important;
  flex-direction: column !important;
  border-color: #e5e7eb !important;
  border-radius: 8px !important;
  background: #f8fafc !important;
}

.s22pf-original-access-shell .s22pf-wordpress-access-btn {
  min-height: 48px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #1f2937 !important;
  font-size: 16px !important;
}

@media (max-width: 480px) {
  .s22pf-original-access-shell .acceso-form { padding: 16px !important; }
  .s22pf-original-access-shell .caja-acceso { padding: 24px !important; max-height: calc(100vh - 32px) !important; }
  .s22pf-original-access-shell .caja-acceso h3 { font-size: 23px !important; }
  .s22pf-original-access-shell .caja-acceso .sub { font-size: 16px !important; }
}

/* ===== Tipografía y contraste del portal de proveedor · 2.3.9 ===== */
.s22pf-html-portal,
.s22pf-html-portal button,
.s22pf-html-portal input,
.s22pf-html-portal select,
.s22pf-html-portal textarea {
  font-family: Arial, Helvetica, sans-serif !important;
}

.s22pf-html-portal {
  --s22-gray: #111827;
  color: #111827 !important;
  font-size: 15px !important;
}

.s22pf-html-portal .desc,
.s22pf-html-portal .s22pf-field-help,
.s22pf-html-portal .s22pf-help,
.s22pf-html-portal .s22pf-password-help,
.s22pf-html-portal .s22pf-profile-dl dt,
.s22pf-html-portal small {
  color: #111827 !important;
  font-size: calc(1em + 1px) !important;
}

.s22pf-html-portal .s22pf-port-header,
.s22pf-html-portal .s22pf-portal-nav,
.s22pf-html-portal .s22pf-portal-footer {
  color: #fff !important;
  font-weight: 700 !important;
}

.s22pf-html-portal .s22pf-port-header *,
.s22pf-html-portal .s22pf-portal-nav *,
.s22pf-html-portal .s22pf-portal-footer * {
  color: #fff !important;
  font-weight: 700 !important;
}

.s22pf-portal-main {
  max-width: 1340px !important;
}

/* ===== Formulario de factura estable, amplio y alineado · 2.3.9 ===== */
#s22-enviar .s22pf-invoice-submit-card {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  padding: 34px 38px 38px !important;
}

#s22-enviar .s22pf-invoice-submit-card .s22pf-form-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 20px !important;
}

#s22-enviar .s22pf-form-grid > p { grid-column: span 4 !important; }
#s22-enviar .s22pf-invoice-submit-card .s22pf-form-grid > p.s22pf-field-number { grid-column: 1 / span 4 !important; }
#s22-enviar .s22pf-invoice-submit-card .s22pf-form-grid > p.s22pf-field-date { grid-column: 5 / span 4 !important; }
#s22-enviar .s22pf-invoice-submit-card .s22pf-form-grid > p.s22pf-field-kind { grid-column: 9 / span 4 !important; }
#s22-enviar .s22pf-invoice-submit-card .s22pf-form-grid > p.s22pf-field-concept { grid-column: 1 / -1 !important; grid-row: 2 !important; }
#s22-enviar .s22pf-invoice-submit-card .s22pf-form-grid > p.s22pf-field-event { grid-column: 1 / span 4 !important; grid-row: 3 !important; }
#s22-enviar .s22pf-invoice-submit-card .s22pf-form-grid > p.s22pf-field-tax-region { grid-column: 5 / span 4 !important; grid-row: 3 !important; }
#s22-enviar .s22pf-invoice-submit-card .s22pf-form-grid > p.s22pf-field-base { grid-column: 9 / span 4 !important; grid-row: 3 !important; }
#s22-enviar .s22pf-invoice-submit-card .s22pf-form-grid > p.s22pf-field-tax { grid-column: 1 / span 4 !important; grid-row: 4 !important; }
#s22-enviar .s22pf-tax-heading { display: inline !important; }
#s22-enviar .s22pf-event-code-notice {
  position: fixed;
  z-index: 100000;
  top: 24px;
  right: 24px;
  width: min(420px, calc(100vw - 32px));
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 16px 16px 18px !important;
  border: 1px solid #ffb067;
  border-left: 5px solid #287a5b;
  border-radius: 14px;
  background: linear-gradient(100deg, #fff1df 0%, #fffaf2 55%, #ffffff 100%);
  box-shadow: 0 18px 50px rgba(15,23,42,.24), 0 0 30px rgba(40,122,91,.20);
  color: #111827 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.5 !important;
}
#s22-enviar .s22pf-event-code-notice.is-closed { display: none !important; }
#s22-enviar .s22pf-event-code-notice-close {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  margin: -5px -5px 0 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #111827;
  color: #fff;
  font: 900 22px/32px Arial, Helvetica, sans-serif;
  cursor: pointer;
}
#s22-enviar .s22pf-event-code-notice-close:hover,
#s22-enviar .s22pf-event-code-notice-close:focus-visible { background: #287a5b; outline: 3px solid rgba(40,122,91,.22); }
#s22-enviar .s22pf-invoice-submit-card .s22pf-form-grid > p.s22pf-field-irpf-apply { grid-column: 5 / span 4 !important; grid-row: 4 !important; }
#s22-enviar .s22pf-invoice-submit-card .s22pf-form-grid > p.s22pf-field-irpf { grid-column: 9 / span 4 !important; grid-row: 4 !important; }
#s22-enviar .s22pf-invoice-submit-card .s22pf-form-grid > p.s22pf-file-required-field { grid-column: 1 / -1 !important; grid-row: 5 !important; }

.s22pf-amex-note {
  display: grid;
  grid-template-columns: minmax(220px,.8fr) minmax(0,2fr);
  gap: 18px;
  align-items: center;
  margin: 16px 0 20px;
  padding: 17px 19px;
  border: 1px solid #111827;
  border-left: 6px solid #287a5b;
  border-radius: 14px;
  background: #fff7ed;
  color: #111827;
}

.s22pf-amex-note strong { font-size: 16px; }
.s22pf-amex-note span { font-size: 15px; line-height: 1.55; font-weight: 700; }
.s22pf-amex-note a { color: #111827 !important; font-weight: 900; }

/* ===== Mis datos: más ancho y visual · 2.3.9 ===== */
#s22-perfil .s22pf-tarjeta {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  padding: 32px !important;
  border-radius: 22px !important;
  box-shadow: 0 18px 55px rgba(15,23,42,.08) !important;
}

#s22-perfil .s22pf-profile-dl {
  grid-template-columns: minmax(145px,.7fr) minmax(190px,1.3fr) minmax(145px,.7fr) minmax(190px,1.3fr) !important;
  gap: 0 !important;
  margin: 24px 0 30px !important;
  overflow: hidden;
  border: 1px solid #d1d5db;
  border-radius: 16px;
  background: #fff;
}

#s22-perfil .s22pf-profile-dl dt,
#s22-perfil .s22pf-profile-dl dd {
  min-height: 52px;
  display: flex;
  align-items: center;
  padding: 12px 14px;
  box-sizing: border-box;
  border-bottom: 1px solid #e5e7eb;
  color: #111827 !important;
}

#s22-perfil .s22pf-profile-dl dt { background: #f8fafc; font-weight: 900; }
#s22-perfil .s22pf-profile-dl dd { font-weight: 700; }

#s22-perfil .s22pf-profile-edit-grid {
  grid-template-columns: 1fr !important;
  gap: 24px !important;
}

#s22-perfil .s22pf-profile-edit-form {
  padding: 26px !important;
  border-radius: 18px !important;
}

#s22-perfil .s22pf-profile-edit-form .s22pf-form-grid {
  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  gap: 16px 18px !important;
}

#s22-perfil .s22pf-profile-edit-form .s22pf-form-grid > p.full {
  grid-column: 1 / -1 !important;
}

#s22-perfil .s22pf-profile-edit-intro {
  margin: -5px 0 18px !important;
  color: #111827 !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
}

.s22pf-tax-badge {
  display: inline-flex;
  padding: 6px 11px;
  border-radius: 999px;
  background: #e8eefb;
  color: #111827;
  font-weight: 900;
}

.s22pf-tax-badge.is-igic { background: #edf6f0; }

/* ===== Selector administrador / proveedor · 2.3.9 ===== */
.s22pf-preview-banner > div:first-child strong,
.s22pf-preview-banner > div:first-child span { display: block; }
.s22pf-preview-banner > div:first-child span { margin-top: 3px; color: #111827 !important; font-weight: 700; }

.s22pf-mode-switch-front {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: #111827;
}

.s22pf-mode-switch-front a,
.s22pf-mode-switch-front span {
  padding: 8px 13px;
  border-radius: 999px;
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 900;
}

.s22pf-mode-switch-front .is-active { background: #287a5b; }

@media (max-width: 980px) {
  #s22-enviar .s22pf-invoice-submit-card .s22pf-form-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  #s22-enviar .s22pf-form-grid > p,
  #s22-enviar .s22pf-form-grid > p:nth-child(n) { grid-column: auto !important; grid-row: auto !important; }
  #s22-enviar .s22pf-field-concept,
  #s22-enviar .s22pf-file-required-field { grid-column: 1 / -1 !important; }
  #s22-perfil .s22pf-profile-dl { grid-template-columns: minmax(145px,.8fr) minmax(0,1.2fr) !important; }
  #s22-perfil .s22pf-profile-edit-grid { grid-template-columns: 1fr !important; }
  #s22-perfil .s22pf-profile-edit-form .s22pf-form-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}

@media (max-width: 640px) {
  #s22-enviar .s22pf-invoice-submit-card { padding: 22px 18px 26px !important; }
  #s22-enviar .s22pf-invoice-submit-card .s22pf-form-grid,
  #s22-perfil .s22pf-profile-edit-form .s22pf-form-grid { grid-template-columns: 1fr !important; }
  #s22-enviar .s22pf-form-grid > p,
  #s22-enviar .s22pf-form-grid > p:nth-child(n),
  #s22-enviar .s22pf-field-concept,
  #s22-enviar .s22pf-file-required-field { grid-column: 1 / -1 !important; grid-row: auto !important; }
  #s22-enviar .s22pf-event-code-notice { top: 16px; right: 16px; left: 16px; width: auto; }
  #s22-perfil .s22pf-tarjeta { padding: 20px !important; }
  #s22-perfil .s22pf-profile-dl { grid-template-columns: 1fr !important; }
  #s22-perfil .s22pf-profile-dl dt { min-height: auto; padding-bottom: 3px; border-bottom: 0; }
  #s22-perfil .s22pf-profile-dl dd { padding-top: 3px; }
  .s22pf-amex-note { grid-template-columns: 1fr; gap: 6px; }
}

/* ===== Edición directa desde Mis datos · 2.3.21 ===== */
#s22-perfil .s22pf-profile-dl dd {
  justify-content: space-between;
  gap: 12px;
}

#s22-perfil .s22pf-profile-value {
  min-width: 0;
  overflow-wrap: anywhere;
}

#s22-perfil .s22pf-profile-edit-button {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 5px 12px;
  border: 1.5px solid #287a5b;
  border-radius: 999px;
  background: #fff;
  color: #111827;
  font: 900 13px/1 Arial, Helvetica, sans-serif;
  cursor: pointer;
  box-shadow: none;
}

#s22-perfil .s22pf-profile-edit-button:hover,
#s22-perfil .s22pf-profile-edit-button:focus-visible {
  background: #287a5b;
  color: #fff;
  outline: none;
}

#s22-perfil .s22pf-profile-edit-form.is-edit-target {
  animation: s22pf-profile-focus 1.3s ease;
}

@keyframes s22pf-profile-focus {
  0%, 100% { box-shadow: 0 8px 24px rgba(0,0,0,.045); }
  35% { box-shadow: 0 0 0 5px rgba(40,122,91,.22), 0 15px 35px rgba(0,0,0,.10); }
}

@media (max-width: 640px) {
  #s22-perfil .s22pf-profile-edit-button { min-height: 36px; padding-inline: 14px; }
}

/* ===== Acceso público negro y sobrio · 2.3.22 ===== */
.s22pf-original-access-shell .s22pf-wordpress-access { display: none !important; }

.s22pf-public-shell.s22pf-original-access-shell {
  min-height: 100vh !important;
  background: #111 !important;
  color: #111827 !important;
}

.s22pf-original-access-shell .s22pf-public-topbar {
  display: flex !important;
  background: #111 !important;
  color: #fff !important;
  border-bottom: 1px solid #2f2f2f;
}

.s22pf-original-access-shell .s22pf-public-topbar b { color: #fff !important; }

.s22pf-original-access-shell .acceso-cuerpo {
  display: grid !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr) !important;
  min-height: calc(100vh - 88px) !important;
  align-items: stretch !important;
  background: #111 !important;
}

.s22pf-original-access-shell .s22pf-access-hero {
  display: flex !important;
  padding: clamp(42px, 6vw, 84px) !important;
  background: linear-gradient(135deg,#111 0%,#202020 58%,#302318 100%) !important;
  color: #fff !important;
}

.s22pf-original-access-shell .s22pf-access-hero h2 { color: #fff !important; font-size: clamp(32px,4vw,54px) !important; }
.s22pf-original-access-shell .s22pf-access-hero p { color: #d5d5d8 !important; font-size: 16px !important; }
.s22pf-original-access-shell .s22pf-access-hero li { color: #f4f4f5 !important; }

.s22pf-original-access-shell .acceso-form {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(24px, 4vw, 56px) !important;
  background: #f3f4f6 !important;
}

.s22pf-original-access-shell .caja-acceso {
  width: 100% !important;
  max-width: 520px !important;
  max-height: none !important;
  margin: 0 auto !important;
  padding: clamp(28px, 4vw, 46px) !important;
  overflow: visible !important;
  border: 1px solid #d1d5db !important;
  border-top: 5px solid #287a5b !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.22) !important;
}

.s22pf-original-access-shell.s22pf-register-mode .caja-acceso { max-width: 760px !important; }
.s22pf-original-access-shell .s22pf-public-footer {
  display: block !important;
  padding: 12px 24px !important;
  background: #0b0b0b !important;
  color: #fff !important;
}

@media (max-width: 900px) {
  .s22pf-original-access-shell .acceso-cuerpo { grid-template-columns: 1fr !important; }
  .s22pf-original-access-shell .s22pf-access-hero { min-height: 360px; }
}

@media (max-width: 600px) {
  .s22pf-original-access-shell .s22pf-public-topbar { display: none !important; }
  .s22pf-original-access-shell .s22pf-access-hero { min-height: 300px; padding: 36px 24px !important; }
  .s22pf-original-access-shell .acceso-form { padding: 20px 14px !important; }
  .s22pf-original-access-shell .caja-acceso { padding: 26px 20px !important; }
}

/* ===== Mis datos: edición dentro de cada fila · 2.3.24 ===== */
#s22-perfil .s22pf-profile-inline-form { margin: 0; }
#s22-perfil .s22pf-profile-inline-editor { display: none; min-width: 0; flex: 1 1 auto; }
#s22-perfil dd.is-editing .s22pf-profile-value { display: none; }
#s22-perfil dd.is-editing .s22pf-profile-inline-editor { display: block; }
#s22-perfil dd.is-editing { background: #f2f7f3; box-shadow: inset 4px 0 0 #287a5b; }

#s22-perfil .s22pf-profile-inline-editor input,
#s22-perfil .s22pf-profile-inline-editor select {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 8px 11px;
  border: 1.5px solid #287a5b;
  border-radius: 10px;
  background: #fff;
  color: #111827;
  font: 700 15px/1.25 Arial, Helvetica, sans-serif;
  box-sizing: border-box;
  outline: none;
}

#s22-perfil .s22pf-profile-save-bar {
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: -12px 0 22px;
  padding: 14px 16px;
  border: 1px solid #fed7aa;
  border-radius: 14px;
  background: #fff7ed;
  color: #111827;
  font-weight: 800;
}

#s22-perfil .s22pf-profile-save-bar:not([hidden]) { display: flex; }

#s22-perfil .s22pf-password-details {
  margin-top: 18px;
  border: 1px solid #d1d5db;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}

#s22-perfil .s22pf-password-details > summary {
  position: relative;
  padding: 17px 52px 17px 18px;
  color: #111827;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
  list-style: none;
}

#s22-perfil .s22pf-password-details > summary::-webkit-details-marker { display: none; }
#s22-perfil .s22pf-password-details > summary::after {
  content: '+';
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  color: #287a5b;
  font-size: 24px;
}
#s22-perfil .s22pf-password-details[open] > summary::after { content: '−'; }

#s22-perfil .s22pf-password-inline-form {
  padding: 4px 18px 20px;
  border-top: 1px solid #e5e7eb;
}

#s22-perfil .s22pf-password-fields {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 16px;
  padding-top: 17px;
}

#s22-perfil .s22pf-password-fields p { margin: 0 0 14px; }
#s22-perfil .s22pf-password-fields label { color: #111827; font-weight: 900; }
#s22-perfil .s22pf-password-fields input {
  width: 100%;
  min-height: 42px;
  margin-top: 6px;
  padding: 8px 11px;
  border: 1.5px solid #d1d5db;
  border-radius: 10px;
  box-sizing: border-box;
}

@media (max-width: 760px) {
  #s22-perfil .s22pf-profile-save-bar { align-items: stretch; flex-direction: column; }
  #s22-perfil .s22pf-password-fields { grid-template-columns: 1fr; gap: 4px; }
}


/* Contraste del título en la cabecera blanca del modo proveedor */
.s22pf-html-portal .s22pf-port-header .s22pf-logo-mini,
.s22pf-html-portal .s22pf-port-header .s22pf-logo-mini *{
  color:var(--s22-orange)!important;
}

/* ===== Formulario de factura accesible y responsive · 2.3.92 ===== */
#s22-enviar .s22pf-required-status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  padding: 12px 14px;
  border: 1px solid #f59e0b;
  border-radius: 12px;
  background: #fffbeb;
  color: #78350f;
  font-size: 14px;
  font-weight: 800;
}
#s22-enviar .s22pf-required-status-icon {
  display: grid;
  flex: 0 0 25px;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 50%;
  background: #f59e0b;
  color: #fff;
  font-weight: 950;
}
#s22-enviar .s22pf-required-status.is-complete {
  border-color: #16a34a;
  background: #f0fdf4;
  color: #166534;
}
#s22-enviar .s22pf-required-status.is-complete .s22pf-required-status-icon { background: #16a34a; }
#s22-enviar .s22pf-required-status.is-complete .s22pf-required-status-icon::before { content: "✓"; }
#s22-enviar .s22pf-required-status.is-complete .s22pf-required-status-icon { font-size: 0; }
#s22-enviar .s22pf-required-status.is-complete .s22pf-required-status-icon::before { font-size: 15px; }
#s22-enviar .s22pf-field-invalid input,
#s22-enviar .s22pf-field-invalid select,
#s22-enviar .s22pf-field-invalid textarea {
  border-color: #dc2626 !important;
  background: #fff7f7 !important;
  box-shadow: 0 0 0 3px rgba(220,38,38,.10) !important;
}
#s22-enviar .s22pf-field-error {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
  color: #b91c1c;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.35;
}
#s22-enviar .s22pf-field-error::before { content: "⚠"; }
#s22-enviar .s22pf-invoice-form.is-submitting { opacity: .82; }
#s22-enviar .s22pf-invoice-submit-card .s22pf-btn-auto:disabled {
  cursor: wait !important;
  background: #475569 !important;
  box-shadow: none !important;
  opacity: 1 !important;
}
.s22pf-submit-spinner {
  display: inline-block;
  width: 17px;
  height: 17px;
  margin-right: 8px;
  vertical-align: -3px;
  border: 2px solid rgba(255,255,255,.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: s22pf-spin .7s linear infinite;
}
@keyframes s22pf-spin { to { transform: rotate(360deg); } }

@media (max-width: 980px) {
  #s22-enviar .s22pf-invoice-submit-card { padding: 26px 22px 30px !important; }
  #s22-enviar .s22pf-invoice-submit-card .s22pf-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px 14px !important;
  }
  #s22-enviar .s22pf-invoice-submit-card .s22pf-form-grid > p:nth-child(n) {
    grid-column: auto !important;
    grid-row: auto !important;
    min-width: 0 !important;
  }
  #s22-enviar .s22pf-invoice-submit-card .s22pf-form-grid > p.s22pf-field-concept,
  #s22-enviar .s22pf-invoice-submit-card .s22pf-form-grid > p.s22pf-file-required-field {
    grid-column: 1 / -1 !important;
  }
}
@media (max-width: 640px) {
  #s22-enviar .s22pf-invoice-submit-card {
    padding: 20px 14px 24px !important;
    border-radius: 16px !important;
  }
  #s22-enviar .s22pf-invoice-submit-card h2 { font-size: 22px !important; }
  #s22-enviar .s22pf-invoice-submit-card .desc { font-size: 14px !important; }
  #s22-enviar .s22pf-invoice-submit-card .s22pf-form-grid { grid-template-columns: minmax(0,1fr) !important; }
  #s22-enviar .s22pf-invoice-submit-card .s22pf-form-grid > p:nth-child(n) { grid-column: 1 / -1 !important; }
  #s22-enviar .s22pf-invoice-submit-card input,
  #s22-enviar .s22pf-invoice-submit-card select,
  #s22-enviar .s22pf-invoice-submit-card textarea { font-size: 16px !important; }
  #s22-enviar .s22pf-invoice-submit-card input[type="file"] { padding: 10px !important; }
  #s22-enviar .s22pf-invoice-submit-card input[type="file"]::file-selector-button {
    display: block;
    width: 100%;
    margin: 0 0 10px !important;
  }
  #s22-enviar .s22pf-invoice-submit-card .s22pf-resumen-box { padding: 10px !important; }
  #s22-enviar .s22pf-invoice-submit-card .s22pf-resumen-box td,
  #s22-enviar .s22pf-invoice-submit-card .s22pf-resumen-box th { padding: 10px 8px !important; font-size: 13px !important; }
  #s22-enviar .s22pf-invoice-submit-card .s22pf-btn-auto { width: 100% !important; min-height: 54px !important; }
}

/* Cabecera de sesión del proveedor: contraste visible sobre fondo blanco. */
.s22pf-html-portal .s22pf-port-header .s22pf-quien,
.s22pf-html-portal .s22pf-port-header .s22pf-quien b,
.s22pf-html-portal .s22pf-port-header .s22pf-quien span {
  color: #111827 !important;
}
.s22pf-provider-session-actions {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.s22pf-html-portal .s22pf-port-header .s22pf-logout {
  background: #111 !important;
  color: #fff !important;
  border: 1px solid #111 !important;
}
.s22pf-html-portal .s22pf-port-header .s22pf-provider-admin-return {
  display: inline-flex;
  align-items: center;
  min-height: 31px;
  padding: 5px 12px;
  border: 1px solid #111;
  border-radius: 10px;
  background: #fff;
  color: #111 !important;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none !important;
}
@media (max-width: 640px) {
  .s22pf-provider-session-actions { width: 100%; justify-content: flex-end; }
}

/* Alineación uniforme de todos los controles del formulario de factura. */
@media (min-width: 981px) {
  #s22-enviar .s22pf-invoice-submit-card .s22pf-form-grid {
    align-items: start !important;
  }
  #s22-enviar .s22pf-invoice-submit-card .s22pf-form-grid > p:not(.s22pf-field-concept):not(.s22pf-file-required-field) > label {
    min-height: 94px !important;
    box-sizing: border-box !important;
    justify-content: flex-end !important;
  }
  #s22-enviar .s22pf-invoice-submit-card input:not([type="file"]),
  #s22-enviar .s22pf-invoice-submit-card select {
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    box-sizing: border-box !important;
  }
  #s22-enviar .s22pf-invoice-submit-card .s22pf-field-concept textarea {
    min-height: 96px !important;
    height: 96px !important;
    box-sizing: border-box !important;
  }
}

/* Concepto siempre ocupa todo el ancho útil del formulario. */
#s22-enviar .s22pf-invoice-submit-card .s22pf-form-grid > p.s22pf-field-concept {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  display: block !important;
  box-sizing: border-box !important;
}
#s22-enviar .s22pf-invoice-submit-card .s22pf-field-concept > label,
#s22-enviar .s22pf-invoice-submit-card .s22pf-field-concept textarea {
  display: flex !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
#s22-enviar .s22pf-invoice-submit-card .s22pf-field-concept textarea {
  display: block !important;
  resize: vertical !important;
}

/* Alta: campos de una misma fila perfectamente alineados. */
@media (min-width: 761px) {
  .s22pf-original-access-shell #s22pf-f-alta > .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
    align-items: start !important;
  }
  .s22pf-original-access-shell #s22pf-f-alta > .grid > .campo {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    margin-bottom: 14px !important;
  }
  .s22pf-original-access-shell #s22pf-f-alta > .grid > .campo > label {
    display: flex !important;
    align-items: flex-end !important;
    min-height: 44px !important;
    margin: 0 0 6px !important;
    line-height: 1.25 !important;
  }
}
.s22pf-original-access-shell #s22pf-f-alta input:not([type="checkbox"]):not([type="file"]),
.s22pf-original-access-shell #s22pf-f-alta select {
  display: block !important;
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
@media (max-width: 760px) {
  .s22pf-original-access-shell #s22pf-f-alta > .grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  .s22pf-original-access-shell #s22pf-f-alta > .grid > .campo > label {
    min-height: 0 !important;
  }
}

/* Alta social: composición ancha, compacta y sin media pantalla vacía. */
.s22pf-subscription-shell {
  min-height: 100vh !important;
  background: #f3f4f6 !important;
  font-family: Arial, Helvetica, sans-serif !important;
}
.s22pf-subscription-shell .s22pf-tabs-front {
  display: none !important;
}
.s22pf-subscription-shell .s22pf-subscription-access {
  display: grid !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(560px, .92fr) !important;
  min-height: calc(100vh - 88px) !important;
  align-items: stretch !important;
  background: #f3f4f6 !important;
}
.s22pf-subscription-shell .s22pf-access-hero {
  display: flex !important;
  min-width: 0 !important;
  min-height: 100% !important;
  padding: clamp(44px, 6vw, 86px) !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 0 !important;
  box-sizing: border-box !important;
  background: #111 !important;
  color: #fff !important;
}
.s22pf-subscription-shell .s22pf-front-brand {
  flex: 0 0 auto !important;
  margin: 0 0 8px !important;
  color: #fff !important;
  font-size: 25px !important;
  font-weight: 900 !important;
}
.s22pf-subscription-shell .s22pf-access-hero h2 {
  max-width: 620px !important;
  margin: 42px 0 18px !important;
  color: #fff !important;
  font-size: clamp(22px, 2.3vw, 34px) !important;
  line-height: 1.15 !important;
  text-align: left !important;
}
.s22pf-subscription-shell .s22pf-access-hero h2 em {
  color: #287a5b !important;
}
.s22pf-subscription-shell .s22pf-claim {
  display: block !important;
  color: #a8a8ad !important;
}
.s22pf-subscription-shell .s22pf-access-hero > p {
  display: block !important;
  max-width: 640px !important;
  margin: 0 0 20px !important;
  color: #d0d0d4 !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
}
.s22pf-subscription-shell .s22pf-access-hero > ul {
  display: block !important;
  margin: 8px 0 0 !important;
  padding-left: 20px !important;
  color: #ededf0 !important;
}
.s22pf-subscription-shell .s22pf-access-hero > ul li {
  margin: 10px 0 !important;
}
.s22pf-subscription-shell .s22pf-subscription-card-form {
  align-self: center !important;
  width: calc(100% - 54px) !important;
  max-width: 760px !important;
  max-height: calc(100vh - 132px) !important;
  margin: 26px auto !important;
  padding: clamp(26px, 3vw, 40px) !important;
  overflow-y: auto !important;
  border: 1px solid #dfe3e8 !important;
  border-top: 5px solid #287a5b !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: 0 16px 42px rgba(15, 23, 42, .10) !important;
  box-sizing: border-box !important;
}
.s22pf-subscription-shell .s22pf-subscription-card-form > h3 {
  margin: 0 0 5px !important;
  color: #111827 !important;
  font-size: 25px !important;
}
.s22pf-subscription-shell .s22pf-subscription-card-form > .s22pf-sub {
  margin: 0 0 22px !important;
  color: #111827 !important;
}
.s22pf-subscription-shell .s22pf-subscription-html-form .s22pf-form-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px 18px !important;
  align-items: start !important;
}
.s22pf-subscription-shell .s22pf-subscription-html-form .s22pf-form-grid > p {
  min-width: 0 !important;
  margin: 0 !important;
  grid-column: span 1 !important;
}
.s22pf-subscription-shell .s22pf-subscription-html-form .s22pf-form-grid > p:nth-child(2) {
  grid-column: span 1 !important;
}
.s22pf-subscription-shell .s22pf-subscription-html-form .s22pf-form-grid > p:nth-child(6) {
  grid-column: span 1 !important;
}
.s22pf-subscription-shell .s22pf-subscription-html-form .s22pf-form-grid > p:nth-child(9) {
  grid-column: span 1 !important;
}
.s22pf-subscription-shell .s22pf-subscription-html-form .s22pf-form-grid > p:nth-child(7) {
  grid-column: 1 / -1 !important;
}
.s22pf-subscription-shell .s22pf-subscription-html-form .s22pf-form-grid > p:nth-child(10),
.s22pf-subscription-shell .s22pf-subscription-html-form .s22pf-form-grid > p:nth-child(11) {
  grid-column: 1 / -1 !important;
}
.s22pf-subscription-shell .s22pf-subscription-html-form label:not(.s22pf-check) {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  min-height: 66px !important;
  margin: 0 !important;
  color: #111827 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
}
.s22pf-subscription-shell .s22pf-subscription-html-form input:not([type="checkbox"]),
.s22pf-subscription-shell .s22pf-subscription-html-form select {
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  margin-top: 7px !important;
  box-sizing: border-box !important;
}
.s22pf-subscription-shell .s22pf-subscription-html-form input[type="file"] {
  padding: 8px 10px !important;
}
.s22pf-subscription-shell .s22pf-subscription-html-form > .s22pf-btn {
  display: block !important;
  width: auto !important;
  min-width: 280px !important;
  margin: 22px 0 0 auto !important;
}
.s22pf-subscription-shell .s22pf-demo-hint {
  margin-top: 18px !important;
}
@media (max-width: 1050px) {
  .s22pf-subscription-shell .s22pf-subscription-access {
    grid-template-columns: 1fr !important;
  }
  .s22pf-subscription-shell .s22pf-access-hero {
    min-height: 360px !important;
  }
  .s22pf-subscription-shell .s22pf-subscription-card-form {
    width: calc(100% - 40px) !important;
    max-width: 820px !important;
    max-height: none !important;
  }
  .s22pf-subscription-shell .s22pf-subscription-html-form .s22pf-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .s22pf-subscription-shell .s22pf-subscription-html-form .s22pf-form-grid > p:nth-child(n) {
    grid-column: span 1 !important;
  }
  .s22pf-subscription-shell .s22pf-subscription-html-form .s22pf-form-grid > p:nth-child(2),
  .s22pf-subscription-shell .s22pf-subscription-html-form .s22pf-form-grid > p:nth-child(6),
  .s22pf-subscription-shell .s22pf-subscription-html-form .s22pf-form-grid > p:nth-child(7),
  .s22pf-subscription-shell .s22pf-subscription-html-form .s22pf-form-grid > p:nth-child(10),
  .s22pf-subscription-shell .s22pf-subscription-html-form .s22pf-form-grid > p:nth-child(11) {
    grid-column: 1 / -1 !important;
  }
}
@media (max-width: 640px) {
  .s22pf-subscription-shell .s22pf-access-hero {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 18px 20px !important;
  }
  .s22pf-subscription-shell .s22pf-access-hero h2 { text-align: left !important; }
  .s22pf-subscription-shell .s22pf-subscription-card-form {
    width: calc(100% - 24px) !important;
    margin: 12px auto 24px !important;
    padding: 22px 18px !important;
  }
  .s22pf-subscription-shell .s22pf-subscription-html-form .s22pf-form-grid {
    grid-template-columns: 1fr !important;
  }
  .s22pf-subscription-shell .s22pf-subscription-html-form .s22pf-form-grid > p:nth-child(n) {
    grid-column: 1 !important;
  }
  .s22pf-subscription-shell .s22pf-subscription-html-form label:not(.s22pf-check) {
    min-height: 280px !important;
  }
  .s22pf-subscription-shell .s22pf-subscription-html-form > .s22pf-btn {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* Registro inicial compacto y alineado. */
.s22pf-original-access-shell:not(.s22pf-register-mode) #s22pf-f-alta {
  display: none !important;
}
.s22pf-original-access-shell.s22pf-register-mode #s22pf-f-alta {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px 16px !important;
  align-items: start !important;
  max-height: 68vh !important;
  padding: 2px 8px 2px 0 !important;
}
.s22pf-original-access-shell.s22pf-register-mode .acceso-cuerpo {
  grid-template-columns: minmax(310px, .72fr) minmax(700px, 1.28fr) !important;
}
.s22pf-original-access-shell.s22pf-register-mode .caja-acceso {
  width: calc(100% - 36px) !important;
  max-width: 780px !important;
  padding: 28px 34px !important;
}
.s22pf-original-access-shell #s22pf-f-alta > .s22pf-register-sso,
.s22pf-original-access-shell #s22pf-f-alta > .s22pf-register-tax-row,
.s22pf-original-access-shell #s22pf-f-alta > .s22pf-register-certificate,
.s22pf-original-access-shell #s22pf-f-alta > .s22pf-register-declaration,
.s22pf-original-access-shell #s22pf-f-alta > .btn {
  grid-column: 1 / -1 !important;
}
.s22pf-original-access-shell #s22pf-f-alta > .campo,
.s22pf-original-access-shell #s22pf-f-alta > .grid .campo {
  min-width: 0 !important;
  margin: 0 !important;
}
.s22pf-original-access-shell #s22pf-f-alta > .s22pf-register-tax-row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: start !important;
}
.s22pf-original-access-shell #s22pf-f-alta > .campo:not(.s22pf-register-declaration) > label,
.s22pf-original-access-shell #s22pf-f-alta > .grid .campo > label {
  display: flex !important;
  min-height: 46px !important;
  margin: 0 0 5px !important;
  align-items: flex-end !important;
  line-height: 1.2 !important;
}
.s22pf-original-access-shell #s22pf-f-alta input:not([type="checkbox"]):not([type="file"]),
.s22pf-original-access-shell #s22pf-f-alta select {
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 8px 11px !important;
}
.s22pf-original-access-shell #s22pf-f-alta .s22pf-register-sso .btn-sso {
  min-height: 43px !important;
  margin-bottom: 7px !important;
}
.s22pf-original-access-shell #s22pf-f-alta .s22pf-register-sso .divisor {
  margin: 10px 0 2px !important;
}
.s22pf-original-access-shell #s22pf-f-alta .s22pf-register-declaration label {
  display: flex !important;
  min-height: 0 !important;
  margin: 0 !important;
  align-items: flex-start !important;
  gap: 7px !important;
  line-height: 1.35 !important;
}
.s22pf-original-access-shell #s22pf-f-alta > .btn {
  min-height: 44px !important;
  margin-top: 2px !important;
}
@media (max-width: 1050px) {
  .s22pf-original-access-shell.s22pf-register-mode .acceso-cuerpo {
    grid-template-columns: minmax(270px, .62fr) minmax(620px, 1.38fr) !important;
  }
}
@media (max-width: 900px) {
  .s22pf-original-access-shell.s22pf-register-mode .acceso-cuerpo {
    grid-template-columns: 1fr !important;
  }
  .s22pf-original-access-shell.s22pf-register-mode .caja-acceso {
    width: calc(100% - 28px) !important;
    max-width: 780px !important;
  }
}
@media (max-width: 700px) {
  .s22pf-original-access-shell.s22pf-register-mode #s22pf-f-alta,
  .s22pf-original-access-shell #s22pf-f-alta > .s22pf-register-tax-row {
    grid-template-columns: 1fr !important;
  }
  .s22pf-original-access-shell #s22pf-f-alta > .campo,
  .s22pf-original-access-shell #s22pf-f-alta > .s22pf-register-tax-row,
  .s22pf-original-access-shell #s22pf-f-alta > .s22pf-register-certificate,
  .s22pf-original-access-shell #s22pf-f-alta > .s22pf-register-declaration,
  .s22pf-original-access-shell #s22pf-f-alta > .btn {
    grid-column: 1 !important;
  }
  .s22pf-original-access-shell #s22pf-f-alta > .campo:not(.s22pf-register-declaration) > label,
  .s22pf-original-access-shell #s22pf-f-alta > .grid .campo > label {
    min-height: 0 !important;
  }
}

/* Navegador vertical lateral del portal. */
.s22pf-html-portal .s22pf-side-scroll-nav {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9990;
  display: grid;
  gap: 6px;
  padding: 6px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 16px;
  background: rgba(12,16,24,.94);
  box-shadow: 0 12px 34px rgba(0,0,0,.24);
  backdrop-filter: blur(8px);
}
.s22pf-html-portal .s22pf-side-scroll-nav button {
  width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: #fff;
  font: 900 23px/38px Arial,sans-serif;
  cursor: pointer;
}
.s22pf-html-portal .s22pf-side-scroll-nav button:hover,
.s22pf-html-portal .s22pf-side-scroll-nav button:focus-visible {
  background: #287a5b;
  outline: none;
}
@media (max-width: 760px) {
  .s22pf-html-portal .s22pf-side-scroll-nav { right: 8px; }
  .s22pf-html-portal .s22pf-side-scroll-nav button {
    width: 34px;
    height: 34px;
    min-height: 34px;
    line-height: 34px;
  }
}


/* Acceso visible en ventanas estrechas y con zoom · 2026-10-01 */
.s22pf-original-access-shell { overflow: visible !important; }
.s22pf-original-access-shell .acceso-cuerpo { align-items: start !important; }
.s22pf-original-access-shell .acceso-form { min-width: 0 !important; }
.s22pf-original-access-shell .caja-acceso { max-height: none !important; overflow: visible !important; }
@media (max-width: 900px) {
  .s22pf-original-access-shell .acceso-cuerpo { grid-template-columns: minmax(0, 1fr) !important; }
  .s22pf-original-access-shell .acceso-form { order: -1 !important; grid-column: 1 !important; grid-row: 1 !important; padding: 20px 14px !important; }
  .s22pf-original-access-shell .s22pf-access-hero { order: 1 !important; grid-column: 1 !important; grid-row: 2 !important; }
  .s22pf-original-access-shell .caja-acceso { width: 100% !important; max-width: 560px !important; box-sizing: border-box !important; margin: 0 auto !important; padding: 24px 20px !important; }
  .s22pf-original-access-shell.s22pf-register-mode #s22pf-f-alta { max-height: none !important; overflow: visible !important; }
}