*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:Inter,Arial,sans-serif;background:#06101a;color:#f4f8fb}
a{text-decoration:none;color:inherit}
.portal-shell{display:grid;grid-template-columns:280px 1fr;min-height:100vh;background:radial-gradient(circle at 15% 10%,rgba(0,200,255,.08),transparent 20%),radial-gradient(circle at 85% 12%,rgba(255,48,88,.08),transparent 18%),linear-gradient(180deg,#040b12 0%,#07121b 100%)}
.sidebar{padding:24px;border-right:1px solid rgba(255,255,255,.08);background:rgba(4,10,15,.9)}
.brand{display:flex;align-items:center;gap:12px;margin-bottom:28px}
.brand-icon{width:44px;height:44px;border-radius:16px;display:grid;place-items:center;background:rgba(0,200,255,.12);border:1px solid rgba(0,200,255,.22)}
.brand strong{display:block}
.brand small{color:#9bb0c2}
.sidebar-nav{display:grid;gap:8px}
.sidebar-nav a{padding:14px 16px;border-radius:18px;color:#d8e5ef;background:transparent}
.sidebar-nav a:hover,.sidebar-nav a.active{background:rgba(0,200,255,.10);color:#fff}
.sidebar-card{margin-top:28px;padding:18px;border:1px solid rgba(255,255,255,.08);border-radius:24px;background:rgba(255,255,255,.04)}
.sidebar-card p{color:#9bb0c2;margin:10px 0 14px}
.danger-link{color:#ff8aa1}
.content{padding:24px}
.topbar{display:flex;justify-content:space-between;gap:20px;align-items:flex-end;margin-bottom:24px}
.topbar h1{margin:0;font-size:34px}
.topbar p{margin:8px 0 0;color:#9bb0c2}
.topbar-user{padding:12px 16px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.grid{display:grid;gap:20px}
.grid.two{grid-template-columns:1.1fr .9fr}
.card{padding:24px;border-radius:28px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);box-shadow:0 18px 50px rgba(0,0,0,.22)}
.hero-card{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.03)),linear-gradient(145deg,rgba(0,200,255,.10),transparent 45%),rgba(8,18,28,.95)}
.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:12px;font-weight:800;color:#85dcff}
.mini-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}
.mini-box{padding:16px;border-radius:18px;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.08)}
.mini-box strong{display:block;color:#fff}
.mini-box span{display:block;margin-top:6px;color:#9bb0c2}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:14px 12px;border-bottom:1px solid rgba(255,255,255,.06)}
th{color:#9bb0c2;font-weight:600}
.list{padding-left:18px}
.list li{margin-bottom:10px;color:#d8e5ef}
form{display:grid;gap:12px}
label{font-size:14px;color:#d8e5ef;font-weight:600}
input,select,textarea,button{font:inherit}
input,select,textarea{width:100%;padding:14px 16px;border-radius:18px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.22);color:#fff}
button{padding:14px 18px;border:none;border-radius:18px;background:linear-gradient(135deg,#00c8ff,#2c82ff);color:#031019;font-weight:800;cursor:pointer}
button:hover{filter:brightness(1.06)}
.alert{padding:14px 16px;border-radius:16px;font-weight:700;margin-bottom:8px}
.alert.success{background:rgba(0,200,120,.14);border:1px solid rgba(0,200,120,.24);color:#d9ffef}
.alert.error{background:rgba(255,48,88,.12);border:1px solid rgba(255,48,88,.24);color:#ffe2e8}
@media (max-width:1100px){.portal-shell{grid-template-columns:1fr}.sidebar{border-right:none;border-bottom:1px solid rgba(255,255,255,.08)}.grid.two,.mini-grid{grid-template-columns:1fr}.topbar{flex-direction:column;align-items:flex-start}}
.login-body{background:linear-gradient(180deg,#030712 0%,#07131f 100%);color:#fff}
.login-layout{min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr}
.login-info{padding:56px;background:radial-gradient(circle at 20% 20%,rgba(0,200,255,.14),transparent 24%),radial-gradient(circle at 80% 18%,rgba(255,48,88,.12),transparent 20%),linear-gradient(180deg,#020712 0%,#08131d 100%);display:flex;flex-direction:column;justify-content:space-between}
.login-info h1{font-size:54px;line-height:1;margin:0 0 16px}
.login-info p{max-width:680px;color:#c6d7e4;font-size:18px}
.login-card{display:flex;flex-direction:column;justify-content:center;padding:48px;max-width:520px;width:100%;margin:auto}
.login-card h2{font-size:34px;margin:0 0 8px}
.login-card p{color:#9bb0c2;margin:0 0 24px}
.login-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.metric-box{padding:18px;border-radius:22px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.metric-box strong{display:block}
.metric-box span{display:block;margin-top:8px;color:#9bb0c2}
@media (max-width:900px){.login-layout{grid-template-columns:1fr}.login-info{padding:28px}.login-card{padding:28px}}
/* Portal Cliente PRO */
.section-heading{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:16px;
margin-bottom:16px;
}
.section-heading h3{
margin:6px 0 0;
}
.finance-summary-card{
margin-bottom:20px;
background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025)),linear-gradient(145deg,rgba(0,200,255,.10),transparent 45%),rgba(8,18,28,.95);
}
.finance-grid{
grid-template-columns:repeat(4,1fr);
}
.status-pill{
display:inline-flex;
align-items:center;
justify-content:center;
padding:7px 11px;
border-radius:999px;
font-size:12px;
font-weight:800;
border:1px solid transparent;
white-space:nowrap;
}
.status-paid{
background:rgba(0,200,120,.14);
color:#d9ffef;
border-color:rgba(0,200,120,.25);
}
.status-pending{
background:rgba(255,193,7,.14);
color:#fff2c2;
border-color:rgba(255,193,7,.25);
}
.status-overdue{
background:rgba(255,48,88,.14);
color:#ffe2e8;
border-color:rgba(255,48,88,.25);
}
.status-neutral{
background:rgba(0,200,255,.14);
color:#d9f7ff;
border-color:rgba(0,200,255,.25);
}
.card h2,.card h3{
letter-spacing:-.02em;
}
td a{
color:#85dcff;
font-weight:700;
}
@media (max-width:1100px){
.finance-grid{
grid-template-columns:1fr;
}
}
/* Portal Cliente PRO - Notificaciones */
.notification-panel{
margin-bottom:20px;
}
.notification-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:14px;
}
.notification-item{
padding:16px;
border-radius:20px;
border:1px solid rgba(255,255,255,.08);
background:rgba(0,0,0,.18);
}
.notification-item strong{
display:block;
margin-bottom:8px;
color:#fff;
}
.notification-item span{
display:block;
color:#c6d7e4;
line-height:1.45;
}
.notification-item.danger{
background:rgba(255,48,88,.12);
border-color:rgba(255,48,88,.28);
}
.notification-item.warning{
background:rgba(255,193,7,.12);
border-color:rgba(255,193,7,.28);
}
.notification-item.info{
background:rgba(0,200,255,.12);
border-color:rgba(0,200,255,.28);
}
.notification-item.ok{
background:rgba(0,200,120,.12);
border-color:rgba(0,200,120,.28);
}
@media (max-width:1100px){
.notification-grid{
grid-template-columns:1fr;
}
}
/* Portal Cliente PRO - Logo por cliente */
.client-brand-area{
display:flex;
align-items:center;
gap:14px;
margin-bottom:18px;
padding:14px;
border-radius:22px;
background:rgba(0,0,0,.18);
border:1px solid rgba(255,255,255,.08);
}
.client-brand-area strong{
display:block;
margin-top:4px;
font-size:18px;
color:#fff;
}
.client-logo{
width:72px;
height:72px;
object-fit:contain;
border-radius:18px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.10);
padding:8px;
}
.client-logo-placeholder{
width:72px;
height:72px;
display:grid;
place-items:center;
border-radius:18px;
background:rgba(0,200,255,.12);
border:1px solid rgba(0,200,255,.22);
font-size:34px;
}
/* Tickets Cliente */
.ticket-form-card p{
color:#9bb0c2;
margin-top:0;
}
.ticket-form-card textarea{
min-height:120px;
}
/* Respuestas de Tickets */
.ticket-client-box{
padding:16px;
border-radius:22px;
border:1px solid rgba(255,255,255,.08);
background:rgba(0,0,0,.16);
margin-bottom:16px;
}
.ticket-client-box .section-heading{
margin-bottom:10px;
}
.ticket-client-box p{
color:#c6d7e4;
}
.ticket-thread{
display:grid;
gap:10px;
margin:12px 0;
}
.ticket-reply{
padding:12px;
border-radius:16px;
border:1px solid rgba(255,255,255,.08);
background:rgba(255,255,255,.04);
}
.ticket-reply strong{
display:block;
margin-bottom:6px;
color:#fff;
}
.ticket-reply p{
margin:0 0 6px;
}
.ticket-reply small{
color:#9bb0c2;
}
.ticket-reply.from-admin{
border-color:rgba(0,200,255,.22);
}
.ticket-reply.from-client{
border-color:rgba(255,193,7,.22);
}
.ticket-reply-form{
margin-top:10px;
}
/* Tickets compactos */
.ticket-compact-list{
display:grid;
gap:12px;
}
.ticket-compact-item{
border:1px solid rgba(255,255,255,.08);
border-radius:20px;
background:rgba(0,0,0,.16);
overflow:hidden;
}
.ticket-compact-item summary{
cursor:pointer;
list-style:none;
display:flex;
justify-content:space-between;
align-items:center;
gap:14px;
padding:16px;
}
.ticket-compact-item summary::-webkit-details-marker{
display:none;
}
.ticket-compact-item summary strong{
display:block;
color:#fff;
}
.ticket-compact-item summary small{
display:block;
margin-top:5px;
color:#9bb0c2;
}
.ticket-compact-body{
padding:0 16px 16px;
border-top:1px solid rgba(255,255,255,.06);
}
.ticket-compact-body > p{
color:#c6d7e4;
}
@media (max-width:900px){
.ticket-compact-item summary{
align-items:flex-start;
flex-direction:column;
}
}
/* Sidebar cliente sticky */
.sidebar{
position: sticky;
top: 0;
height: 100vh;
overflow-y: auto;
}
@media (max-width:1100px){
.sidebar{
position: static;
height: auto;
overflow: visible;
}
}
/* NEW DASHBOARD UI */
.dashboard-hero{
padding:30px;
border-radius:28px;
background:linear-gradient(145deg,rgba(0,200,255,.15),rgba(0,0,0,.2));
}
.hero-stats{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:12px;
margin-top:20px;
}
.hero-stats div{
background:rgba(0,0,0,.3);
padding:14px;
border-radius:14px;
text-align:center;
}
.hero-stats strong{
display:block;
font-size:18px;
}
.dashboard-cards{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:18px;
margin-top:20px;
}
.dash-card{
padding:20px;
border-radius:22px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
transition:.2s;
}
.dash-card:hover{
transform:translateY(-4px);
}
.dash-card h3{margin:0 0 6px}
.dash-card a{
display:inline-block;
margin-top:10px;
color:#85dcff;
}
.dashboard-alerts{
margin-top:20px;
}
.alerts-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:12px;
margin-top:10px;
}
.alert-box{
padding:14px;
border-radius:14px;
}
.alert-box.danger{background:rgba(255,48,88,.15)}
.alert-box.warning{background:rgba(255,193,7,.15)}
.alert-box.info{background:rgba(0,200,255,.15)}
@media(max-width:1100px){
.dashboard-cards,.alerts-grid,.hero-stats{
grid-template-columns:1fr;
}
}
/* =========================================================
RESPONSIVE RHINO - MOBILE FIX + MENU TIPO HAMBURGUESA
No modifica HTML/PHP. Solo mejora visual en celular.
========================================================= */
html, body{
width:100%;
max-width:100%;
overflow-x:hidden;
}
img, video, canvas, svg{
max-width:100%;
height:auto;
}
table{
min-width:720px;
}
.card,
.topbar,
.sidebar,
.content{
max-width:100%;
}
@media (max-width:1100px){
body{
overflow-x:hidden;
}
.portal-shell{
display:block;
width:100%;
min-width:0;
}
.sidebar{
position:sticky !important;
top:0;
z-index:999;
height:auto !important;
max-height:none;
overflow:visible !important;
padding:12px 14px;
border-right:none;
border-bottom:1px solid rgba(255,255,255,.08);
background:rgba(4,10,15,.98);
backdrop-filter:blur(14px);
}
.brand{
margin-bottom:0;
min-height:48px;
cursor:pointer;
position:relative;
padding-right:52px;
}
.brand::after{
content:"☰";
position:absolute;
right:4px;
top:50%;
transform:translateY(-50%);
width:42px;
height:42px;
display:grid;
place-items:center;
border-radius:14px;
background:rgba(0,200,255,.12);
border:1px solid rgba(0,200,255,.22);
color:#fff;
font-size:22px;
line-height:1;
}
.sidebar-nav{
display:none;
margin-top:12px;
gap:8px;
max-height:60vh;
overflow-y:auto;
padding-bottom:6px;
}
.sidebar:hover .sidebar-nav,
.sidebar:focus-within .sidebar-nav{
display:grid;
}
.sidebar-nav a{
padding:13px 14px;
border-radius:16px;
font-size:15px;
}
.sidebar-card{
display:none;
margin-top:12px;
}
.sidebar:hover .sidebar-card,
.sidebar:focus-within .sidebar-card{
display:block;
}
.content{
padding:14px;
width:100%;
min-width:0;
}
.topbar{
align-items:flex-start;
gap:12px;
margin-bottom:16px;
}
.topbar h1{
font-size:26px;
line-height:1.1;
word-break:break-word;
}
.topbar p{
font-size:14px;
line-height:1.35;
}
.topbar-user{
width:100%;
padding:10px 12px;
}
.card{
padding:18px;
border-radius:22px;
overflow:hidden;
}
.grid,
.grid.two,
.stats-grid,
.mini-grid,
.finance-grid,
.notification-grid,
.dashboard-cards,
.alerts-grid,
.hero-stats,
.login-metrics{
grid-template-columns:1fr !important;
}
form{
width:100%;
}
input,
select,
textarea,
button{
max-width:100%;
font-size:16px;
}
button,
.search-btn{
max-width:100%;
}
table{
display:block;
width:100%;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
border-collapse:collapse;
}
thead,
tbody,
tr{
width:100%;
}
th,td{
white-space:nowrap;
font-size:14px;
padding:12px 10px;
}
}
@media (max-width:430px){
.content{
padding:12px;
}
.card{
padding:16px;
border-radius:20px;
}
.brand strong{
font-size:15px;
}
.brand small{
font-size:12px;
}
.brand-icon{
width:40px;
height:40px;
border-radius:14px;
}
.topbar h1{
font-size:23px;
}
.topbar p{
font-size:13px;
}
.mini-box,
.stat-card,
.metric-box{
padding:14px;
}
}
/* RHINO Cliente v1 - auditoría visual */
:root{
--rhino-red:#d71920;
--rhino-red-soft:#ff6870;
--rhino-panel-width:1500px;
--rhino-modal-width:1180px;
}
.content{
width:min(100%, var(--rhino-panel-width));
max-width:var(--rhino-panel-width);
margin:0 auto;
}
.brand-icon{
width:36px;
height:36px;
border-radius:12px;
overflow:hidden;
}
.brand-icon img{
width:100%;
height:100%;
object-fit:contain;
display:block;
padding:4px;
}
.client-topbar-card{
display:flex;
align-items:center;
gap:12px;
}
.client-topbar-card small{
display:block;
color:#9bb0c2;
margin-top:3px;
}
.topbar-client-logo{
width:36px;
height:36px;
object-fit:contain;
border-radius:12px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.10);
padding:5px;
}
button,
.rhino-text-btn{
min-height:auto;
padding:9px 13px;
border-radius:999px;
font-size:13px;
line-height:1.1;
white-space:nowrap;
}
.rhino-text-btn{
display:inline-flex;
align-items:center;
justify-content:center;
width:auto;
background:transparent !important;
box-shadow:none !important;
color:var(--rhino-red-soft) !important;
border:1px solid rgba(255,104,112,.28) !important;
font-weight:900 !important;
text-decoration:none !important;
cursor:pointer;
}
.rhino-text-btn:hover{
background:rgba(215,25,32,.10) !important;
}
.client-compact-list{
display:grid;
gap:10px;
}
.client-compact-row{
display:grid;
grid-template-columns:1.2fr .7fr auto;
gap:12px;
align-items:center;
padding:14px 16px;
border-radius:18px;
background:rgba(255,255,255,.035);
border:1px solid rgba(255,255,255,.08);
}
.client-compact-row strong,
.client-compact-row span,
.client-row-status{
display:block;
}
.client-compact-row span{
color:#9bb0c2;
margin-top:4px;
}
.client-modal{
display:none;
position:fixed;
inset:0;
z-index:9999;
}
.client-modal.is-open{
display:block;
}
.client-modal-backdrop{
position:absolute;
inset:0;
background:rgba(0,0,0,.72);
backdrop-filter:blur(8px);
}
.client-modal-panel{
position:relative;
width:min(100% - 32px, var(--rhino-modal-width));
max-width:var(--rhino-modal-width);
max-height:calc(100vh - 42px);
overflow:auto;
margin:22px auto;
padding:24px;
border-radius:28px;
background:linear-gradient(180deg,rgba(13,18,25,.98),rgba(5,7,10,.98));
border:1px solid rgba(255,255,255,.10);
box-shadow:0 30px 90px rgba(0,0,0,.55);
}
.client-modal-head{
display:flex;
justify-content:space-between;
gap:16px;
align-items:flex-start;
flex-wrap:wrap;
margin-bottom:18px;
}
.client-modal-head h2{
margin:6px 0 8px;
}
.client-modal-head p{
color:#9bb0c2;
margin:0;
}
.client-modal-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
}
.client-detail-card{
padding:16px;
border-radius:18px;
background:rgba(255,255,255,.035);
border:1px solid rgba(255,255,255,.08);
}
.client-detail-card h3{
margin-top:0;
}
.client-detail-card p{
color:#d8e5ef;
}
.client-detail-card strong{
color:#fff;
}
.client-empty{
padding:16px;
border-radius:18px;
background:rgba(255,255,255,.025);
border:1px dashed rgba(255,255,255,.12);
color:#9bb0c2;
}
@media(max-width:1000px){
.client-compact-row,
.client-modal-grid{
grid-template-columns:1fr;
}
.rhino-text-btn,
button{
white-space:normal;
}
}
/* ===== RHINO CLIENTE V2 - LOOK & FEEL PREMIUM ===== */
:root{
--bg-0:#050608;
--bg-1:#0b1015;
--bg-2:#10171d;
--panel:#121920;
--panel-2:#161f28;
--line:rgba(255,255,255,.08);
--line-strong:rgba(255,255,255,.14);
--text:#f4f7fa;
--muted:#a9b5c1;
--accent:#d81920;
--accent-2:#ff4b55;
--accent-soft:rgba(216,25,32,.12);
--ok:#18b56c;
--warn:#c89321;
--danger:#d94b58;
--neutral:#8aa0b5;
--shadow:0 24px 70px rgba(0,0,0,.34);
}
body{
background:
radial-gradient(circle at 12% 12%, rgba(216,25,32,.12), transparent 24%),
radial-gradient(circle at 88% 10%, rgba(255,255,255,.04), transparent 22%),
linear-gradient(180deg, #06080b 0%, #0b0f14 52%, #090c10 100%);
color:var(--text);
}
.portal-shell{
background:transparent;
grid-template-columns:300px minmax(0,1fr);
}
.sidebar{
background:linear-gradient(180deg, rgba(12,15,19,.98), rgba(9,12,16,.98));
border-right:1px solid var(--line);
box-shadow:inset -1px 0 0 rgba(255,255,255,.02);
position:sticky;
top:0;
height:100vh;
}
.brand{
padding:14px 14px 16px;
margin-bottom:18px;
border-radius:22px;
background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
border:1px solid rgba(255,255,255,.06);
}
.brand-icon{
background:linear-gradient(180deg, rgba(216,25,32,.18), rgba(216,25,32,.08));
border:1px solid rgba(255,90,98,.26);
box-shadow:0 10px 24px rgba(216,25,32,.18);
}
.brand strong{
font-size:16px;
letter-spacing:.02em;
}
.brand small,
.sidebar-card p,
.topbar p,
.mini-box span,
.metric-box span,
.notification-item span,
.client-compact-row span,
.client-empty,
.ticket-reply small,
.client-topbar-card small{
color:var(--muted);
}
.sidebar-nav{
gap:10px;
}
.sidebar-nav a{
position:relative;
padding:14px 16px;
border-radius:18px;
color:#e9edf2;
border:1px solid transparent;
transition:.22s ease;
}
.sidebar-nav a:hover,
.sidebar-nav a.active{
background:linear-gradient(180deg, rgba(216,25,32,.16), rgba(216,25,32,.10));
border-color:rgba(255,90,98,.18);
color:#fff;
box-shadow:0 10px 22px rgba(216,25,32,.12);
}
.sidebar-card,
.topbar-user,
.card,
.metric-box,
.notification-item,
.ticket-client-box,
.ticket-reply,
.client-brand-area,
.client-compact-row,
.mini-box,
.client-detail-card,
.client-modal-panel{
background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.022));
border:1px solid var(--line);
box-shadow:var(--shadow);
}
.content{
padding:28px;
}
.topbar{
margin-bottom:26px;
align-items:center;
}
.topbar h1{
font-size:34px;
letter-spacing:-.03em;
}
.topbar-user{
min-width:220px;
}
.topbar-client-logo{
border:1px solid rgba(255,90,98,.18);
background:rgba(255,255,255,.04);
}
.grid,
.grid.two{
gap:22px;
}
.card{
border-radius:30px;
}
.hero-card,
.finance-summary-card{
background:
radial-gradient(circle at top right, rgba(216,25,32,.18), transparent 28%),
linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
linear-gradient(180deg, #11171e 0%, #0b1117 100%);
}
.eyebrow{
color:#ff8990;
}
.status-neutral{
background:rgba(138,160,181,.12);
border-color:rgba(138,160,181,.25);
color:#dde7ef;
}
.status-paid{
background:rgba(24,181,108,.14);
border-color:rgba(24,181,108,.28);
}
.status-pending{
background:rgba(200,147,33,.14);
border-color:rgba(200,147,33,.26);
}
.status-overdue{
background:rgba(217,75,88,.16);
border-color:rgba(217,75,88,.30);
}
input,select,textarea{
background:rgba(6,8,11,.72);
border:1px solid rgba(255,255,255,.10);
color:#fff;
}
input:focus,select:focus,textarea:focus{
outline:none;
border-color:rgba(255,90,98,.40);
box-shadow:0 0 0 4px rgba(216,25,32,.10);
}
button{
background:linear-gradient(135deg, #d81920, #ff4b55);
color:#fff;
box-shadow:0 14px 26px rgba(216,25,32,.18);
}
button:hover{
filter:none;
transform:translateY(-1px);
box-shadow:0 16px 30px rgba(216,25,32,.24);
}
.rhino-text-btn{
color:#ff8f95 !important;
border-color:rgba(255,90,98,.22) !important;
}
.rhino-text-btn:hover{
background:rgba(216,25,32,.10) !important;
}
td a{
color:#ff8f95;
}
.badge-rojo{
background:linear-gradient(135deg,#d81920,#ff4b55) !important;
}
.client-modal-backdrop{
background:rgba(2,4,6,.76);
}
.section-heading{
gap:14px;
}
.list li{
color:#e3e9ef;
}
.login-body{
background:linear-gradient(180deg,#07090c 0%, #0d1117 100%);
}
.login-info{
background:
radial-gradient(circle at 14% 18%, rgba(216,25,32,.16), transparent 26%),
radial-gradient(circle at 86% 18%, rgba(255,255,255,.05), transparent 20%),
linear-gradient(180deg,#090c10 0%,#10151b 100%);
}
.login-card,
.login-metrics .metric-box{
box-shadow:var(--shadow);
}
/* menú hamburguesa coherente */
@media (max-width:1100px){
.portal-shell{grid-template-columns:1fr;}
.sidebar{
position:sticky;
height:auto;
z-index:50;
padding:12px 14px;
background:rgba(10,13,17,.98);
backdrop-filter:blur(14px);
}
.brand::after{
background:rgba(216,25,32,.14);
border:1px solid rgba(255,90,98,.22);
}
.sidebar.menu-open .sidebar-nav,
.sidebar.menu-open .sidebar-card,
.sidebar:hover .sidebar-nav,
.sidebar:hover .sidebar-card,
.sidebar:focus-within .sidebar-nav,
.sidebar:focus-within .sidebar-card{
display:grid;
}
.content{padding:14px;}
.topbar{align-items:flex-start;}
}
/* RHINO Cliente v3 - Soporte/Tickets modal */
.support-layout{
align-items:start;
}
.support-ticket-list{
display:grid;
gap:10px;
}
.support-ticket-row{
display:grid;
grid-template-columns:1.2fr .45fr auto;
gap:12px;
align-items:center;
padding:14px 16px;
border-radius:18px;
background:linear-gradient(180deg, rgba(255,255,255,.040), rgba(255,255,255,.020));
border:1px solid rgba(255,255,255,.08);
}
.support-ticket-main strong,
.support-ticket-main span{
display:block;
}
.support-ticket-main span{
color:var(--muted);
margin-top:4px;
font-size:13px;
}
.support-ticket-state{
display:flex;
justify-content:flex-start;
}
.support-modal{
display:none;
position:fixed;
inset:0;
z-index:9999;
}
.support-modal.is-open{
display:block;
}
.support-modal-backdrop{
position:absolute;
inset:0;
background:rgba(2,4,6,.76);
backdrop-filter:blur(8px);
}
.support-modal-panel{
position:relative;
width:min(100% - 32px, var(--rhino-modal-width, 1180px));
max-width:var(--rhino-modal-width, 1180px);
max-height:calc(100vh - 42px);
overflow:auto;
margin:22px auto;
padding:24px;
border-radius:28px;
background:linear-gradient(180deg,rgba(13,18,25,.98),rgba(5,7,10,.98));
border:1px solid rgba(255,255,255,.10);
box-shadow:0 30px 90px rgba(0,0,0,.55);
}
.support-modal-head{
display:flex;
justify-content:space-between;
gap:16px;
align-items:flex-start;
flex-wrap:wrap;
margin-bottom:18px;
}
.support-modal-head h2{
margin:6px 0 8px;
}
.support-modal-head p{
color:var(--muted);
margin:0;
}
.support-modal-grid{
display:grid;
grid-template-columns:1.25fr .75fr;
gap:12px;
margin-bottom:12px;
}
.support-wide{
margin-top:12px;
}
.support-thread{
display:grid;
gap:10px;
max-height:300px;
overflow:auto;
padding-right:4px;
margin-bottom:12px;
}
.support-reply-form{
display:grid;
gap:10px;
}
@media(max-width:1000px){
.support-ticket-row,
.support-modal-grid{
grid-template-columns:1fr;
}
.support-ticket-state{
justify-content:flex-start;
}
}
/* RHINO Cliente v4 - paginación tickets y listas simples */
.client-pagination{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
flex-wrap:wrap;
margin-top:16px;
}
.client-pagination span{
color:var(--muted);
font-weight:800;
font-size:13px;
}
.client-compact-row{
grid-template-columns:1.2fr .55fr auto;
}
.client-compact-row > a.rhino-text-btn{
justify-self:end;
}
@media(max-width:1000px){
.client-compact-row{
grid-template-columns:1fr;
}
.client-compact-row > a.rhino-text-btn{
justify-self:start;
}
.client-pagination{
justify-content:flex-start;
}
}
/* RHINO Cliente v5 - Ver y Descargar separados */
.file-actions{
display:flex;
align-items:center;
justify-content:flex-end;
gap:8px;
flex-wrap:wrap;
}
.file-actions .rhino-text-btn{
padding:8px 12px;
}
@media(max-width:1000px){
.file-actions{
justify-content:flex-start;
}
}
/* RHINO Cliente v6 - inicio/contacto/cuenta cierre */
.client-home-v6{
display:grid;
gap:22px;
}
.home-hero-v6{
display:grid;
grid-template-columns:1.35fr .65fr;
gap:22px;
align-items:stretch;
}
.home-welcome-v6,
.home-account-v6{
padding:30px;
border-radius:30px;
border:1px solid rgba(255,255,255,.09);
box-shadow:var(--shadow);
}
.home-welcome-v6{
background:
radial-gradient(circle at 12% 12%, rgba(216,25,32,.18), transparent 28%),
linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
}
.home-welcome-v6 h2{
margin:8px 0 10px;
font-size:38px;
letter-spacing:-.04em;
}
.home-welcome-v6 p{
color:var(--muted);
font-size:16px;
margin:0;
}
.home-quick-actions{
display:flex;
gap:10px;
flex-wrap:wrap;
margin-top:22px;
}
.home-quick-actions a,
.home-shortcuts-v6 a{
display:inline-flex;
align-items:center;
justify-content:center;
padding:10px 14px;
border-radius:999px;
color:#ff8f95;
border:1px solid rgba(255,90,98,.26);
background:rgba(216,25,32,.08);
font-weight:900;
}
.home-account-v6{
display:flex;
flex-direction:column;
justify-content:center;
background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.020));
}
.home-account-v6 small,
.home-kpi-v6 small{
color:var(--muted);
font-weight:800;
text-transform:uppercase;
letter-spacing:.12em;
font-size:12px;
}
.home-account-v6 strong{
font-size:34px;
margin:8px 0;
}
.home-account-v6 span{
color:var(--muted);
}
.home-account-v6.is-pending{
border-color:rgba(200,147,33,.25);
}
.home-account-v6.is-ok{
border-color:rgba(24,181,108,.25);
}
.home-security-hero-v28{
position:relative;
overflow:hidden;
border-color:rgba(24,181,108,.48);
background:
radial-gradient(circle at 16% 18%, rgba(24,181,108,.30), transparent 34%),
radial-gradient(circle at 82% 12%, rgba(216,25,32,.20), transparent 34%),
linear-gradient(135deg, rgba(24,181,108,.12), rgba(255,255,255,.050) 42%, rgba(216,25,32,.10));
box-shadow:0 22px 55px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.055);
}
.home-security-hero-v28::after{
content:"";
position:absolute;
inset:auto -45px -55px auto;
width:150px;
height:150px;
border-radius:999px;
border:1px solid rgba(255,255,255,.10);
background:rgba(255,255,255,.035);
pointer-events:none;
}
.security-hero-top-v28{
display:flex;
align-items:center;
gap:10px;
margin-bottom:6px;
}
.security-hero-icon-v28{
display:inline-flex;
align-items:center;
justify-content:center;
width:42px;
height:42px;
border-radius:16px;
background:rgba(24,181,108,.18);
border:1px solid rgba(24,181,108,.32);
box-shadow:0 12px 28px rgba(24,181,108,.10);
font-size:21px;
}
.home-security-hero-v28 strong{
font-size:34px;
line-height:1.05;
}
.home-security-hero-v28 span{
color:#eef5f6;
font-weight:800;
max-width:420px;
}
.security-hero-badges-v28{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:16px;
position:relative;
z-index:1;
}
.security-hero-badges-v28 em{
display:inline-flex;
align-items:center;
gap:6px;
padding:7px 10px;
border-radius:999px;
background:rgba(0,0,0,.18);
border:1px solid rgba(255,255,255,.11);
color:#ffffff;
font-size:12px;
font-style:normal;
font-weight:1000;
}
.security-hero-badges-v28 em::before{
content:"✓";
color:#18b56c;
}
.home-kpi-v6{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:14px;
}
.home-kpi-v6 article{
padding:20px;
border-radius:24px;
background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.020));
border:1px solid rgba(255,255,255,.08);
}
.home-kpi-v6 strong{
display:block;
margin-top:8px;
font-size:28px;
}
.home-panel-grid-v6{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:16px;
}
.home-info-v6 strong{
display:block;
font-size:22px;
margin-bottom:8px;
}
.home-info-v6 p{
color:var(--muted);
}
.weather-card-v6{
background:
radial-gradient(circle at 20% 15%, rgba(80,145,255,.16), transparent 38%),
linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.020));
}
.weather-card-v6 strong{
font-size:30px;
}
.weather-note-v6{
display:inline-flex;
margin-top:10px;
padding:7px 10px;
border-radius:999px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.10);
color:#dfe7ef;
font-size:12px;
font-weight:900;
}
.security-card-v27{
background:
radial-gradient(circle at 20% 15%, rgba(216,25,32,.14), transparent 38%),
linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.020));
}
.home-security-list-v27{
display:grid;
gap:8px;
margin:14px 0 0;
padding:0;
list-style:none;
}
.home-security-list-v27 li{
position:relative;
padding-left:22px;
color:#dfe7ef;
font-size:13px;
font-weight:800;
}
.home-security-list-v27 li::before{
content:"✓";
position:absolute;
left:0;
top:0;
color:#18b56c;
font-weight:1000;
}
.home-bottom-v6{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
}
.home-alert-list-v6{
display:grid;
gap:10px;
}
.home-alert{
padding:14px;
border-radius:18px;
border:1px solid rgba(255,255,255,.08);
color:#e9edf2;
}
.home-alert.danger{background:rgba(217,75,88,.14);border-color:rgba(217,75,88,.28);}
.home-alert.warning{background:rgba(200,147,33,.14);border-color:rgba(200,147,33,.28);}
.home-alert.info{background:rgba(138,160,181,.12);border-color:rgba(138,160,181,.24);}
.home-alert.ok{background:rgba(24,181,108,.12);border-color:rgba(24,181,108,.24);}
.home-shortcuts-v6{
display:flex;
flex-wrap:wrap;
gap:10px;
}
.home-shortcuts-v31{
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:12px;
}
.shortcut-card-v31{
display:grid;
gap:7px;
align-content:start;
padding:15px;
min-height:132px;
border-radius:22px;
border:1px solid rgba(255,255,255,.09);
background:linear-gradient(180deg, rgba(255,255,255,.052), rgba(255,255,255,.024));
color:#edf2f7;
text-decoration:none;
box-shadow:0 14px 30px rgba(0,0,0,.16);
transition:transform .16s ease, border-color .16s ease, background .16s ease;
}
.shortcut-card-v31:hover{
transform:translateY(-2px);
border-color:rgba(255,90,98,.34);
background:linear-gradient(180deg, rgba(216,25,32,.105), rgba(255,255,255,.025));
}
.shortcut-primary-v31{
border-color:rgba(216,25,32,.36);
background:
radial-gradient(circle at 14% 14%, rgba(216,25,32,.22), transparent 36%),
linear-gradient(180deg, rgba(216,25,32,.13), rgba(255,255,255,.024));
}
.shortcut-icon-v31{
width:36px;
height:36px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:14px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.08);
}
.shortcut-card-v31 strong{
font-size:16px;
}
.shortcut-card-v31 small{
color:var(--muted);
font-weight:800;
}
.shortcut-card-v31 em{
width:max-content;
max-width:100%;
padding:6px 9px;
border-radius:999px;
color:#ffb0b4;
border:1px solid rgba(255,90,98,.22);
background:rgba(216,25,32,.08);
font-size:11px;
font-style:normal;
font-weight:950;
}
.contact-v6,
.account-v6{
display:grid;
grid-template-columns:1fr 1fr;
gap:22px;
align-items:start;
}
.contact-main-v6 h2,
.account-profile-v6 h2{
font-size:32px;
margin:8px 0 10px;
}
.contact-main-v6 p,
.account-profile-v6 p,
.account-security-v6 p{
color:var(--muted);
}
.contact-channel-grid,
.account-grid-v6{
display:grid;
gap:12px;
margin:22px 0;
}
.contact-channel-grid div,
.account-grid-v6 div,
.account-note-v6{
padding:15px;
border-radius:18px;
background:rgba(255,255,255,.032);
border:1px solid rgba(255,255,255,.08);
}
.contact-channel-grid span,
.account-grid-v6 span{
display:block;
color:var(--muted);
font-size:13px;
margin-bottom:6px;
}
.contact-channel-grid strong,
.account-grid-v6 strong{
color:#fff;
}
.whatsapp-contact-btn{
margin-top:4px;
}
.contact-form-v6 form{
gap:14px;
}
.account-note-v6{
color:var(--muted);
margin:18px 0;
line-height:1.45;
}
@media(max-width:1150px){
.home-hero-v6,
.home-panel-grid-v6,
.home-bottom-v6,
.home-shortcuts-v31,
.contact-v6,
.account-v6{
grid-template-columns:1fr;
}
.home-kpi-v6{
grid-template-columns:1fr 1fr;
}
}
@media(max-width:650px){
.home-kpi-v6{
grid-template-columns:1fr;
}
.home-welcome-v6,
.home-account-v6{
padding:22px;
}
.home-welcome-v6 h2{
font-size:30px;
}
}
/* RHINO Cliente v7 - auditoría final */
:root{
--rhino-admin-width:1500px;
--rhino-modal-width:1180px;
}
.content{
width:min(100%, var(--rhino-admin-width)) !important;
max-width:var(--rhino-admin-width) !important;
margin:0 auto !important;
}
.sidebar-nav a.active,
.sidebar-nav a:hover{
background:linear-gradient(180deg, rgba(216,25,32,.16), rgba(216,25,32,.10)) !important;
border-color:rgba(255,90,98,.18) !important;
}
.brand-icon{
width:36px !important;
height:36px !important;
border-radius:12px !important;
}
.brand-icon img{
width:100% !important;
height:100% !important;
object-fit:contain !important;
padding:4px !important;
}
button,
.rhino-text-btn{
min-height:auto !important;
padding:9px 13px !important;
border-radius:999px !important;
font-size:13px !important;
line-height:1.1 !important;
}
.rhino-text-btn{
background:transparent !important;
color:#ff8f95 !important;
border:1px solid rgba(255,90,98,.28) !important;
box-shadow:none !important;
font-weight:900 !important;
}
.client-modal-panel,
.support-modal-panel{
width:min(100% - 32px, var(--rhino-modal-width)) !important;
max-width:var(--rhino-modal-width) !important;
max-height:calc(100vh - 42px) !important;
overflow:auto !important;
}
.client-compact-row,
.support-ticket-row{
width:100% !important;
}
input,
select,
textarea{
min-width:0 !important;
}
.file-actions{
display:flex;
gap:8px;
flex-wrap:wrap;
justify-content:flex-end;
}
@media(max-width:1100px){
.sidebar.menu-open .sidebar-nav,
.sidebar.menu-open .sidebar-card{
display:grid !important;
}
}
@media(max-width:1000px){
.file-actions{
justify-content:flex-start;
}
.client-compact-row,
.support-ticket-row{
grid-template-columns:1fr !important;
}
}
/* RHINO Cliente v8 - login rediseñado */
.login-body-v8{
min-height:100vh;
background:
radial-gradient(circle at 12% 14%, rgba(216,25,32,.16), transparent 28%),
radial-gradient(circle at 86% 12%, rgba(255,255,255,.05), transparent 22%),
linear-gradient(180deg,#050608 0%,#0b0f14 100%);
}
.login-shell-v8{
min-height:100vh;
display:grid;
grid-template-columns:1.15fr .85fr;
}
.login-hero-v8{
padding:54px;
display:flex;
flex-direction:column;
justify-content:space-between;
gap:34px;
background:
radial-gradient(circle at 18% 18%, rgba(216,25,32,.18), transparent 25%),
linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
border-right:1px solid rgba(255,255,255,.08);
}
.login-brand-v8{
display:flex;
align-items:center;
gap:14px;
}
.login-brand-v8 img{
width:46px;
height:46px;
object-fit:contain;
padding:5px;
border-radius:14px;
background:rgba(216,25,32,.12);
border:1px solid rgba(255,90,98,.24);
box-shadow:0 14px 30px rgba(216,25,32,.18);
}
.login-brand-v8 strong,
.login-brand-v8 span{
display:block;
}
.login-brand-v8 strong{
font-size:18px;
letter-spacing:.06em;
}
.login-brand-v8 span{
color:var(--muted, #a9b5c1);
margin-top:2px;
}
.login-copy-v8{
max-width:760px;
}
.login-copy-v8 h1{
font-size:58px;
line-height:.98;
letter-spacing:-.055em;
margin:12px 0 18px;
}
.login-copy-v8 p{
font-size:18px;
line-height:1.55;
color:var(--muted, #a9b5c1);
max-width:640px;
}
.login-benefits-v8{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:14px;
}
.login-benefits-v8 article{
padding:18px;
border-radius:22px;
background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.022));
border:1px solid rgba(255,255,255,.08);
box-shadow:0 18px 50px rgba(0,0,0,.20);
}
.login-benefits-v8 strong,
.login-benefits-v8 span{
display:block;
}
.login-benefits-v8 span{
color:var(--muted, #a9b5c1);
margin-top:8px;
line-height:1.4;
}
.login-card-v8{
width:min(100% - 44px, 500px);
margin:auto;
padding:34px;
border-radius:30px;
background:linear-gradient(180deg, rgba(255,255,255,.060), rgba(255,255,255,.025));
border:1px solid rgba(255,255,255,.10);
box-shadow:0 30px 90px rgba(0,0,0,.45);
}
.login-card-head-v8 h2{
margin:8px 0 8px;
font-size:34px;
letter-spacing:-.035em;
}
.login-card-head-v8 p{
color:var(--muted, #a9b5c1);
margin:0 0 22px;
}
.login-form-v8{
display:grid;
gap:12px;
}
.login-form-v8 input{
background:rgba(6,8,11,.78);
}
.login-form-v8 button{
margin-top:4px;
width:100%;
background:linear-gradient(135deg, #d81920, #ff4b55);
color:#fff;
box-shadow:0 16px 30px rgba(216,25,32,.22);
}
.login-help-v8{
display:flex;
justify-content:space-between;
gap:12px;
flex-wrap:wrap;
margin-top:18px;
}
.login-help-v8 a{
color:#ff8f95;
font-weight:900;
font-size:13px;
}
.login-security-note-v8{
margin:22px 0 0;
padding:14px;
border-radius:18px;
background:rgba(255,255,255,.032);
border:1px solid rgba(255,255,255,.08);
color:var(--muted, #a9b5c1);
line-height:1.45;
font-size:13px;
}
@media(max-width:1000px){
.login-shell-v8{
grid-template-columns:1fr;
}
.login-hero-v8{
padding:30px;
border-right:none;
border-bottom:1px solid rgba(255,255,255,.08);
}
.login-copy-v8 h1{
font-size:42px;
}
.login-benefits-v8{
grid-template-columns:1fr;
}
.login-card-v8{
margin:26px auto;
}
}
@media(max-width:520px){
.login-hero-v8{
padding:22px;
}
.login-copy-v8 h1{
font-size:34px;
}
.login-copy-v8 p{
font-size:15px;
}
.login-card-v8{
width:calc(100% - 28px);
padding:24px;
border-radius:24px;
}
.login-help-v8{
flex-direction:column;
}
}
/* RHINO Cliente v9 - cierre final + WhatsApp flotante */
.whatsapp-float-client{
position:fixed;
right:22px;
bottom:22px;
z-index:9998;
display:flex;
align-items:center;
gap:10px;
padding:11px 13px 11px 16px;
border-radius:999px;
color:#fff;
background:linear-gradient(135deg,#1fbf75,#128c57);
border:1px solid rgba(255,255,255,.16);
box-shadow:0 18px 40px rgba(0,0,0,.35);
font-weight:900;
transition:.2s ease;
}
.whatsapp-float-client:hover{
transform:translateY(-2px);
box-shadow:0 22px 46px rgba(0,0,0,.42);
}
.whatsapp-float-client span{
font-size:13px;
}
.whatsapp-float-client strong{
width:32px;
height:32px;
display:grid;
place-items:center;
border-radius:999px;
background:rgba(255,255,255,.16);
}
.account-v9 .account-profile-v6 p,
.account-v9 .account-security-v6 p{
line-height:1.55;
}
.account-help-v9{
display:grid;
gap:6px;
}
.account-help-v9 strong{
color:#fff;
}
.account-help-v9 span{
color:var(--muted,#a9b5c1);
line-height:1.45;
}
.account-actions-v9{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:10px;
}
@media(max-width:700px){
.whatsapp-float-client{
right:14px;
bottom:14px;
padding:10px 12px;
}
.whatsapp-float-client span{
display:none;
}
}
/* Clientes V25 - mensajes claros de formularios */
.alert{
display:flex;
align-items:flex-start;
gap:12px;
padding:14px 16px;
border-radius:16px;
font-weight:600;
margin-bottom:12px;
line-height:1.4;
}
.alert-icon{
flex:0 0 26px;
width:26px;
height:26px;
border-radius:999px;
display:inline-flex;
align-items:center;
justify-content:center;
font-weight:900;
background:rgba(255,255,255,.16);
}
.alert-content{
display:flex;
flex-direction:column;
gap:2px;
}
.alert-title{
display:block;
font-size:14px;
color:inherit;
}
.alert-text{
display:block;
font-size:13px;
font-weight:600;
opacity:.9;
}
.alert.success{background:rgba(0,200,120,.14);border:1px solid rgba(0,200,120,.24);color:#d9ffef}
.alert.error{background:rgba(255,48,88,.12);border:1px solid rgba(255,48,88,.24);color:#ffe2e8}
.alert.warning{background:rgba(255,193,7,.13);border:1px solid rgba(255,193,7,.25);color:#fff3cd}
.alert.info{background:rgba(90,170,255,.12);border:1px solid rgba(90,170,255,.24);color:#dcebff}
.form-trap {
position: absolute !important;
left: -9999px !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* Clientes V28 - Resumen de documentos en inicio */
.document-summary-card-v28{
position:relative;
overflow:hidden;
background:
radial-gradient(circle at 18% 10%, rgba(215,25,32,.14), transparent 35%),
linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}
.document-summary-card-v28::after{
content:"";
position:absolute;
inset:auto -35px -45px auto;
width:110px;
height:110px;
border-radius:999px;
background:rgba(215,25,32,.10);
pointer-events:none;
}
.document-summary-main-v28{
position:relative;
z-index:1;
margin-bottom:14px;
}
.document-summary-main-v28 strong{
margin-bottom:5px;
}
.document-summary-main-v28 span{
display:block;
color:#cbd7e3;
font-size:13px;
line-height:1.4;
}
.document-category-chips-v28{
position:relative;
z-index:1;
display:flex;
flex-wrap:wrap;
gap:7px;
margin-bottom:14px;
}
.document-category-chips-v28 em{
display:inline-flex;
padding:6px 9px;
border-radius:999px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.10);
color:#eef4fa;
font-size:12px;
font-style:normal;
font-weight:900;
}
.document-mini-list-v28{
position:relative;
z-index:1;
display:grid;
gap:9px;
margin-bottom:14px;
}
.document-mini-list-v28 div{
padding:10px 11px;
border-radius:14px;
background:rgba(0,0,0,.15);
border:1px solid rgba(255,255,255,.08);
}
.document-mini-list-v28 span,
.document-mini-list-v28 small,
.document-mini-list-v28 b{
display:block;
}
.document-mini-list-v28 span{
max-width:100%;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
color:#fff;
font-weight:900;
}
.document-mini-list-v28 small{
margin-top:3px;
color:#9fb1c4;
font-size:12px;
}
.document-mini-list-v28 b{
margin-top:6px;
font-size:11px;
letter-spacing:.02em;
text-transform:uppercase;
}
.doc-ok-v28{ color:#53dd9a; }
.doc-warn-v28{ color:#ffc36b; }
/* Clientes V29 - Resumen de facturación en inicio */
.invoice-summary-card-v29{
position:relative;
overflow:hidden;
background:
radial-gradient(circle at 85% 8%, rgba(255,193,7,.13), transparent 34%),
linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
}
.invoice-summary-card-v29::after{
content:"$";
position:absolute;
right:-12px;
bottom:-34px;
font-size:118px;
line-height:1;
font-weight:1000;
color:rgba(255,255,255,.035);
pointer-events:none;
}
.invoice-summary-main-v29{
position:relative;
z-index:1;
margin-bottom:13px;
}
.invoice-summary-main-v29 strong{
display:block;
margin-bottom:5px;
font-size:24px;
letter-spacing:-.03em;
}
.invoice-summary-main-v29 span{
display:block;
color:#cbd7e3;
font-size:13px;
line-height:1.4;
}
.invoice-status-grid-v29{
position:relative;
z-index:1;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:8px;
margin-bottom:13px;
}
.invoice-status-grid-v29 div{
padding:9px 8px;
border-radius:14px;
background:rgba(0,0,0,.16);
border:1px solid rgba(255,255,255,.08);
text-align:center;
}
.invoice-status-grid-v29 b,
.invoice-status-grid-v29 span{
display:block;
}
.invoice-status-grid-v29 b{
color:#fff;
font-size:18px;
line-height:1;
}
.invoice-status-grid-v29 span{
margin-top:4px;
color:#9fb1c4;
font-size:11px;
font-weight:800;
}
.invoice-next-v29{
position:relative;
z-index:1;
padding:10px 11px;
border-radius:14px;
margin-bottom:12px;
background:rgba(255,193,7,.09);
border:1px solid rgba(255,193,7,.18);
}
.invoice-next-v29 small,
.invoice-next-v29 strong,
.invoice-next-v29 span{
display:block;
}
.invoice-next-v29 small{
color:#ffd27a;
font-size:11px;
font-weight:900;
text-transform:uppercase;
letter-spacing:.04em;
}
.invoice-next-v29 strong{
margin-top:4px;
color:#fff;
}
.invoice-next-v29 span{
margin-top:3px;
color:#cbd7e3;
font-size:12px;
}
.invoice-mini-list-v29{
position:relative;
z-index:1;
display:grid;
gap:8px;
margin-bottom:13px;
}
.invoice-mini-list-v29 div{
padding:9px 10px;
border-radius:13px;
background:rgba(0,0,0,.13);
border:1px solid rgba(255,255,255,.075);
}
.invoice-mini-list-v29 span,
.invoice-mini-list-v29 small,
.invoice-mini-list-v29 b{
display:block;
}
.invoice-mini-list-v29 span{
color:#fff;
font-weight:900;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.invoice-mini-list-v29 small{
margin-top:3px;
color:#9fb1c4;
font-size:12px;
}
.invoice-mini-list-v29 b{
margin-top:5px;
font-size:11px;
letter-spacing:.02em;
text-transform:uppercase;
}
.invoice-ok-v29{ color:#53dd9a; }
.invoice-warn-v29{ color:#ffc36b; }
@media(max-width:520px){
.invoice-status-grid-v29{
grid-template-columns:1fr;
}
}
/* Clientes V30 - Resumen de tickets en inicio */
.ticket-summary-card-v30{
position:relative;
overflow:hidden;
background:
radial-gradient(circle at 88% 10%, rgba(0,200,255,.14), transparent 34%),
linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
}
.ticket-summary-card-v30::after{
content:"💬";
position:absolute;
right:-4px;
bottom:-22px;
font-size:88px;
line-height:1;
opacity:.08;
pointer-events:none;
}
.ticket-summary-main-v30{
position:relative;
z-index:1;
margin-bottom:13px;
}
.ticket-summary-main-v30 strong{
display:block;
margin-bottom:5px;
font-size:24px;
letter-spacing:-.03em;
}
.ticket-summary-main-v30 span{
display:block;
color:#cbd7e3;
font-size:13px;
line-height:1.4;
}
.ticket-status-grid-v30{
position:relative;
z-index:1;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:8px;
margin-bottom:13px;
}
.ticket-status-grid-v30 div{
padding:9px 8px;
border-radius:14px;
background:rgba(0,0,0,.16);
border:1px solid rgba(255,255,255,.08);
text-align:center;
}
.ticket-status-grid-v30 b,
.ticket-status-grid-v30 span{
display:block;
}
.ticket-status-grid-v30 b{
color:#fff;
font-size:18px;
line-height:1;
}
.ticket-status-grid-v30 span{
margin-top:4px;
color:#9fb1c4;
font-size:11px;
font-weight:800;
}
.ticket-last-reply-v30{
position:relative;
z-index:1;
padding:10px 11px;
border-radius:14px;
margin-bottom:12px;
background:rgba(0,200,255,.09);
border:1px solid rgba(0,200,255,.18);
}
.ticket-last-reply-v30 small,
.ticket-last-reply-v30 strong,
.ticket-last-reply-v30 span{
display:block;
}
.ticket-last-reply-v30 small{
color:#8fe8ff;
font-size:11px;
font-weight:900;
text-transform:uppercase;
letter-spacing:.04em;
}
.ticket-last-reply-v30 strong{
margin-top:4px;
color:#fff;
}
.ticket-last-reply-v30 span{
margin-top:3px;
color:#cbd7e3;
font-size:12px;
}
.ticket-mini-list-v30{
position:relative;
z-index:1;
display:grid;
gap:8px;
margin-bottom:13px;
}
.ticket-mini-list-v30 div{
padding:9px 10px;
border-radius:13px;
background:rgba(0,0,0,.13);
border:1px solid rgba(255,255,255,.075);
}
.ticket-mini-list-v30 span,
.ticket-mini-list-v30 small,
.ticket-mini-list-v30 b{
display:block;
}
.ticket-mini-list-v30 span{
color:#fff;
font-weight:900;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.ticket-mini-list-v30 small{
margin-top:3px;
color:#9fb1c4;
font-size:12px;
}
.ticket-mini-list-v30 b{
width:max-content;
margin-top:6px;
font-size:11px;
letter-spacing:.02em;
text-transform:uppercase;
}
@media(max-width:520px){
.ticket-status-grid-v30{
grid-template-columns:1fr;
}
}
/* Clientes V32 - Datos principales del cliente en dashboard */
.client-data-strip-v32{
position:relative;
overflow:hidden;
margin:0 0 20px;
border-color:rgba(255,255,255,.105);
background:
radial-gradient(circle at 94% 18%, rgba(216,25,32,.12), transparent 34%),
linear-gradient(180deg, rgba(255,255,255,.052), rgba(255,255,255,.022));
}
.client-data-strip-v32::after{
content:"ID";
position:absolute;
right:22px;
bottom:-18px;
color:rgba(255,255,255,.045);
font-size:82px;
font-weight:1000;
letter-spacing:-.08em;
pointer-events:none;
}
.client-data-head-v32{
position:relative;
z-index:1;
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
margin-bottom:16px;
}
.client-data-head-v32 h3{
margin:4px 0 0;
color:#fff;
font-size:24px;
letter-spacing:-.03em;
}
.client-data-grid-v32{
position:relative;
z-index:1;
display:grid;
grid-template-columns:repeat(4, minmax(0, 1fr));
gap:10px;
}
.client-data-grid-v32 div{
min-width:0;
padding:13px 14px;
border-radius:17px;
background:rgba(0,0,0,.14);
border:1px solid rgba(255,255,255,.08);
}
.client-data-grid-v32 span,
.client-data-grid-v32 strong{
display:block;
}
.client-data-grid-v32 span{
color:#9fb1c4;
font-size:12px;
font-weight:850;
margin-bottom:5px;
}
.client-data-grid-v32 strong{
color:#fff;
font-size:14px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
@media(max-width:980px){
.client-data-grid-v32{
grid-template-columns:1fr 1fr;
}
}
@media(max-width:560px){
.client-data-head-v32{
align-items:flex-start;
flex-direction:column;
}
.client-data-grid-v32{
grid-template-columns:1fr;
}
}
/* Clientes V34 - Documentos más claros */
.documents-page-v34{
display:grid;
gap:18px;
}
.documents-hero-v34{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:18px;
overflow:hidden;
position:relative;
}
.documents-hero-v34::after{
content:"";
position:absolute;
width:180px;
height:180px;
right:-70px;
top:-80px;
border-radius:999px;
background:rgba(225, 29, 46, .16);
pointer-events:none;
}
.documents-hero-v34 h2,
.documents-categories-v34 h3,
.documents-list-card-v34 h3{
margin:0;
}
.documents-hero-v34 p{
margin:8px 0 0;
color:#9bb0c2;
max-width:680px;
}
.documents-stats-v34{
display:grid;
grid-template-columns:repeat(4, minmax(0, 1fr));
gap:14px;
}
.documents-stats-v34 .mini-box{
min-height:98px;
}
.document-category-chips-v34{
display:flex;
flex-wrap:wrap;
gap:10px;
}
.document-category-chips-v34 span{
display:inline-flex;
align-items:center;
gap:8px;
padding:9px 12px;
border:1px solid rgba(255,255,255,.1);
border-radius:999px;
background:rgba(255,255,255,.04);
color:#eaf0f7;
font-size:.88rem;
}
.document-category-chips-v34 b{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:24px;
min-height:24px;
padding:0 7px;
border-radius:999px;
background:rgba(225, 29, 46, .16);
color:#fff;
}
.documents-list-v34{
display:grid;
gap:12px;
}
.document-row-v34{
display:grid;
grid-template-columns:auto minmax(0, 1fr) auto auto;
align-items:center;
gap:14px;
padding:16px;
border:1px solid rgba(255,255,255,.08);
border-radius:18px;
background:rgba(5, 10, 18, .38);
}
.document-row-v34.is-available{
border-color:rgba(83, 221, 154, .18);
}
.document-row-v34.is-unavailable{
opacity:.78;
}
.document-icon-v34{
width:44px;
height:44px;
display:flex;
align-items:center;
justify-content:center;
border-radius:16px;
background:rgba(225, 29, 46, .14);
border:1px solid rgba(225, 29, 46, .2);
font-size:1.2rem;
}
.document-main-v34{
display:grid;
gap:4px;
min-width:0;
}
.document-main-v34 strong,
.document-main-v34 span,
.document-main-v34 em{
overflow:hidden;
text-overflow:ellipsis;
}
.document-main-v34 strong{
color:#fff;
white-space:nowrap;
}
.document-main-v34 span{
color:#9bb0c2;
font-size:.88rem;
white-space:nowrap;
}
.document-main-v34 em{
color:#cbd6e2;
font-size:.82rem;
font-style:normal;
}
.document-actions-v34{
justify-content:flex-end;
}
.documents-empty-v34{
display:grid;
justify-items:start;
gap:8px;
text-align:left;
}
.documents-empty-v34 p{
margin:0;
color:#9bb0c2;
}
@media (max-width: 900px){
.documents-stats-v34{
grid-template-columns:repeat(2, minmax(0, 1fr));
}
.document-row-v34{
grid-template-columns:auto minmax(0, 1fr);
}
.document-status-v34,
.document-actions-v34{
grid-column:2;
justify-content:flex-start;
}
}
@media (max-width: 620px){
.documents-hero-v34{
flex-direction:column;
}
.documents-stats-v34{
grid-template-columns:1fr;
}
.document-row-v34{
grid-template-columns:1fr;
}
.document-icon-v34,
.document-status-v34,
.document-actions-v34{
grid-column:auto;
}
.document-main-v34 strong,
.document-main-v34 span{
white-space:normal;
}
}
/* Clientes V35 - Filtros y categorías de documentos */
.documents-page-v35 .documents-categories-v34{
overflow:hidden;
}
.document-category-chips-v35 a{
display:inline-flex;
align-items:center;
gap:8px;
padding:9px 12px;
border:1px solid rgba(255,255,255,.1);
border-radius:999px;
background:rgba(255,255,255,.04);
color:#eaf0f7;
font-size:.88rem;
text-decoration:none;
transition:transform .18s ease, border-color .18s ease, background .18s ease;
}
.document-category-chips-v35 a:hover,
.document-category-chips-v35 a.is-active{
transform:translateY(-1px);
border-color:rgba(225, 29, 46, .36);
background:rgba(225, 29, 46, .14);
}
.document-category-chips-v35 a b{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:24px;
min-height:24px;
padding:0 7px;
border-radius:999px;
background:rgba(225, 29, 46, .2);
color:#fff;
}
.documents-filters-v35{
border-color:rgba(225, 29, 46, .14);
}
.documents-filters-v35 h3{
margin:0;
}
.documents-filter-form-v35{
display:grid;
grid-template-columns:minmax(220px, 1fr) minmax(180px, .6fr) minmax(170px, .5fr) auto;
gap:12px;
align-items:end;
}
.documents-filter-form-v35 label{
display:grid;
gap:7px;
color:#9bb0c2;
font-size:.84rem;
}
.documents-filter-form-v35 input,
.documents-filter-form-v35 select{
width:100%;
min-height:44px;
border:1px solid rgba(255,255,255,.11);
border-radius:14px;
background:rgba(5, 10, 18, .52);
color:#eaf0f7;
padding:0 12px;
outline:none;
}
.documents-filter-form-v35 input:focus,
.documents-filter-form-v35 select:focus{
border-color:rgba(225, 29, 46, .44);
box-shadow:0 0 0 3px rgba(225, 29, 46, .12);
}
.documents-filter-form-v35 button{
min-height:44px;
border:0;
border-radius:14px;
padding:0 16px;
background:#e11d2e;
color:#fff;
font-weight:800;
cursor:pointer;
box-shadow:0 12px 26px rgba(225, 29, 46, .22);
}
.documents-filter-summary-v35{
margin:-4px 0 14px;
padding:11px 13px;
border:1px solid rgba(255,255,255,.08);
border-radius:14px;
background:rgba(255,255,255,.035);
color:#cbd6e2;
font-size:.9rem;
}
@media (max-width: 980px){
.documents-filter-form-v35{
grid-template-columns:1fr 1fr;
}
.documents-filter-form-v35 button{
grid-column:1 / -1;
}
}
@media (max-width: 620px){
.documents-filter-form-v35{
grid-template-columns:1fr;
}
.documents-filter-form-v35 button{
width:100%;
}
}
/* Clientes V36 - Facturación más clara */
.finance-page-v36{
display:grid;
gap:18px;
}
.finance-hero-v36{
display:flex;
justify-content:space-between;
align-items:stretch;
gap:18px;
overflow:hidden;
border-color:rgba(225, 29, 46, .18);
background:
radial-gradient(circle at top right, rgba(225, 29, 46, .16), transparent 34%),
rgba(8, 14, 24, .92);
}
.finance-hero-main-v36{
display:grid;
gap:8px;
max-width:680px;
}
.finance-hero-main-v36 h2,
.finance-hero-main-v36 p{
margin:0;
}
.finance-hero-main-v36 p{
color:#9bb0c2;
line-height:1.55;
}
.finance-hero-balance-v36{
min-width:245px;
display:grid;
gap:8px;
align-content:center;
padding:18px;
border:1px solid rgba(255,255,255,.1);
border-radius:20px;
background:rgba(5, 10, 18, .45);
}
.finance-hero-balance-v36 span{
color:#9bb0c2;
font-size:.88rem;
}
.finance-hero-balance-v36 strong{
color:#fff;
font-size:1.75rem;
}
.finance-hero-balance-v36 em{
width:max-content;
font-style:normal;
}
.finance-stats-v36{
display:grid;
grid-template-columns:repeat(4, minmax(0, 1fr));
gap:14px;
}
.finance-stats-v36 article{
display:grid;
gap:6px;
min-height:116px;
border-color:rgba(255,255,255,.08);
}
.finance-stats-v36 span{
color:#9bb0c2;
font-size:.88rem;
}
.finance-stats-v36 strong{
color:#fff;
font-size:1.25rem;
}
.finance-stats-v36 small{
color:#cbd6e2;
}
.finance-alerts-v36,
.finance-ok-v36{
border-color:rgba(225, 29, 46, .13);
}
.finance-alert-grid-v36{
display:grid;
grid-template-columns:repeat(3, minmax(0, 1fr));
gap:12px;
}
.finance-alert-item-v36{
display:grid;
gap:5px;
padding:14px;
border-radius:16px;
border:1px solid rgba(255,255,255,.08);
background:rgba(255,255,255,.035);
}
.finance-alert-item-v36 strong{
color:#fff;
}
.finance-alert-item-v36 span{
color:#9bb0c2;
line-height:1.45;
font-size:.9rem;
}
.finance-alert-item-v36.is-danger{
border-color:rgba(225, 29, 46, .28);
background:rgba(225, 29, 46, .09);
}
.finance-alert-item-v36.is-warning{
border-color:rgba(245, 158, 11, .28);
background:rgba(245, 158, 11, .08);
}
.finance-alert-item-v36.is-info{
border-color:rgba(96, 165, 250, .24);
background:rgba(96, 165, 250, .08);
}
.finance-ok-v36{
display:grid;
gap:5px;
}
.finance-ok-v36 strong{
color:#fff;
}
.finance-ok-v36 span{
color:#9bb0c2;
}
.finance-list-v36{
display:grid;
gap:12px;
}
.finance-row-v36{
display:grid;
grid-template-columns:auto minmax(0, 1fr) auto auto;
align-items:center;
gap:14px;
padding:16px;
border:1px solid rgba(255,255,255,.08);
border-radius:18px;
background:rgba(5, 10, 18, .38);
}
.finance-row-v36.has-file{
border-color:rgba(83, 221, 154, .18);
}
.finance-row-v36.no-file{
opacity:.84;
}
.finance-icon-v36{
width:44px;
height:44px;
display:flex;
align-items:center;
justify-content:center;
border-radius:16px;
background:rgba(225, 29, 46, .14);
border:1px solid rgba(225, 29, 46, .2);
font-size:1.2rem;
}
.finance-main-v36{
display:grid;
gap:4px;
min-width:0;
}
.finance-main-v36 strong,
.finance-main-v36 span,
.finance-main-v36 em{
overflow:hidden;
text-overflow:ellipsis;
}
.finance-main-v36 strong{
color:#fff;
white-space:nowrap;
}
.finance-main-v36 span{
color:#9bb0c2;
font-size:.88rem;
white-space:nowrap;
}
.finance-main-v36 em{
color:#cbd6e2;
font-size:.82rem;
font-style:normal;
}
.finance-status-v36{
display:grid;
justify-items:end;
gap:5px;
}
.finance-status-v36 small{
color:#9bb0c2;
font-size:.78rem;
}
.finance-actions-v36{
justify-content:flex-end;
}
.finance-empty-v36{
display:grid;
justify-items:start;
gap:8px;
text-align:left;
}
.finance-empty-v36 p{
margin:0;
color:#9bb0c2;
}
@media (max-width: 980px){
.finance-hero-v36{
flex-direction:column;
}
.finance-hero-balance-v36{
min-width:0;
}
.finance-stats-v36,
.finance-alert-grid-v36{
grid-template-columns:repeat(2, minmax(0, 1fr));
}
.finance-row-v36{
grid-template-columns:auto minmax(0, 1fr);
}
.finance-status-v36,
.finance-actions-v36{
grid-column:2;
justify-items:start;
justify-content:flex-start;
}
}
@media (max-width: 620px){
.finance-stats-v36,
.finance-alert-grid-v36{
grid-template-columns:1fr;
}
.finance-row-v36{
grid-template-columns:1fr;
}
.finance-icon-v36,
.finance-status-v36,
.finance-actions-v36{
grid-column:auto;
}
.finance-main-v36 strong,
.finance-main-v36 span{
white-space:normal;
}
}
/* Clientes V37 - estados y vencimientos de facturación */
.finance-alert-grid-v37 .finance-alert-item-v36.is-ok,
.finance-alert-grid-v37 .finance-alert-item-v36.is-paid{
border-color:rgba(83, 221, 154, .24);
background:rgba(83, 221, 154, .08);
}
.finance-alert-grid-v37 .finance-alert-item-v36.is-neutral{
border-color:rgba(148, 163, 184, .22);
background:rgba(148, 163, 184, .08);
}
.finance-row-v37.is-danger{
border-color:rgba(248, 113, 113, .32);
background:linear-gradient(135deg, rgba(127, 29, 29, .22), rgba(5, 10, 18, .42));
}
.finance-row-v37.is-warning{
border-color:rgba(251, 191, 36, .34);
background:linear-gradient(135deg, rgba(120, 53, 15, .2), rgba(5, 10, 18, .42));
}
.finance-row-v37.is-ok{
border-color:rgba(83, 221, 154, .2);
}
.finance-status-v37{
min-width:150px;
}
.invoice-due-pill-v37{
display:inline-flex;
align-items:center;
justify-content:center;
padding:5px 9px;
border-radius:999px;
font-size:.74rem;
font-weight:800;
line-height:1;
border:1px solid rgba(255,255,255,.12);
white-space:nowrap;
}
.invoice-due-pill-v37.is-danger{
color:#fecaca;
border-color:rgba(248, 113, 113, .38);
background:rgba(127, 29, 29, .28);
}
.invoice-due-pill-v37.is-warning{
color:#fde68a;
border-color:rgba(251, 191, 36, .38);
background:rgba(120, 53, 15, .28);
}
.invoice-due-pill-v37.is-ok,
.invoice-due-pill-v37.is-paid{
color:#bbf7d0;
border-color:rgba(83, 221, 154, .34);
background:rgba(22, 101, 52, .22);
}
.invoice-due-pill-v37.is-neutral{
color:#cbd5e1;
border-color:rgba(148, 163, 184, .26);
background:rgba(51, 65, 85, .24);
}
@media (max-width: 980px){
.finance-status-v37{
min-width:0;
}
}
/* Clientes V38 - Tickets más ordenados */
.support-hero-v38{
display:grid;
grid-template-columns:1.2fr .8fr;
gap:18px;
align-items:center;
margin-bottom:18px;
background:
radial-gradient(circle at 12% 18%, rgba(216,25,32,.18), transparent 28%),
linear-gradient(135deg, rgba(255,255,255,.060), rgba(255,255,255,.025));
border:1px solid rgba(255,90,98,.16);
}
.support-hero-v38 h2{margin:6px 0 8px;}
.support-hero-v38 p{margin:0;color:var(--muted);max-width:720px;}
.support-stats-v38{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:10px;
}
.support-stats-v38 div{
padding:12px;
border-radius:16px;
background:rgba(0,0,0,.22);
border:1px solid rgba(255,255,255,.08);
text-align:center;
}
.support-stats-v38 strong,
.support-stats-v38 span{display:block;}
.support-stats-v38 strong{font-size:22px;color:#fff;}
.support-stats-v38 span{font-size:12px;color:#9bb0c2;margin-top:2px;}
.support-layout-v38{grid-template-columns:minmax(320px,.8fr) minmax(0,1.2fr);}
.support-create-v38{position:sticky;top:18px;}
.support-help-v38{
display:flex;
gap:8px;
flex-wrap:wrap;
margin:14px 0;
}
.support-help-v38 span,
.support-status-strip-v38 span{
display:inline-flex;
align-items:center;
gap:6px;
padding:7px 10px;
border-radius:999px;
background:rgba(255,255,255,.055);
border:1px solid rgba(255,255,255,.08);
color:#c9d6e2;
font-size:12px;
font-weight:800;
}
.support-list-head-v38{margin-bottom:12px;}
.support-status-strip-v38{
display:flex;
gap:8px;
flex-wrap:wrap;
margin-bottom:14px;
}
.support-ticket-list-v38{gap:12px;}
.support-ticket-row-v38{
grid-template-columns:44px minmax(0,1fr) auto auto;
border-color:rgba(255,255,255,.10);
background:
linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
}
.support-ticket-row-v38:hover{
border-color:rgba(255,90,98,.24);
transform:translateY(-1px);
}
.support-ticket-icon-v38{
width:42px;
height:42px;
border-radius:14px;
display:grid;
place-items:center;
background:rgba(216,25,32,.16);
border:1px solid rgba(255,90,98,.20);
box-shadow:0 12px 26px rgba(216,25,32,.10);
}
.support-ticket-main-v38 small{
display:block;
color:#ff8f95;
font-weight:900;
text-transform:uppercase;
letter-spacing:.04em;
margin-bottom:3px;
}
.support-ticket-main-v38 strong{font-size:15px;}
.support-ticket-state-v38{justify-content:center;}
.support-thread-v38{max-height:360px;}
.support-empty-v38{
text-align:left;
padding:18px;
}
.support-empty-v38 strong{display:block;color:#fff;margin-bottom:6px;}
.support-empty-v38 p{margin:0;color:var(--muted);}
@media(max-width:1100px){
.support-hero-v38,
.support-layout-v38{grid-template-columns:1fr;}
.support-create-v38{position:static;}
}
@media(max-width:720px){
.support-stats-v38{grid-template-columns:repeat(2,1fr);}
.support-ticket-row-v38{grid-template-columns:1fr !important;}
.support-ticket-icon-v38{display:none;}
.support-ticket-state-v38{justify-content:flex-start;}
}
/* Clientes V39 - Historial de tickets */
.support-modal-grid-v39{
grid-template-columns:repeat(3,minmax(0,1fr));
}
.ticket-status-card-v39 p{
margin:10px 0 0;
color:#9bb0c2;
}
.ticket-history-summary-v39 small{
display:block;
margin-top:12px;
color:#9bb0c2;
}
.ticket-history-metrics-v39{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:8px;
margin-top:12px;
}
.ticket-history-metrics-v39 span{
display:block;
padding:10px;
border-radius:14px;
background:rgba(255,255,255,.045);
border:1px solid rgba(255,255,255,.08);
color:#9bb0c2;
font-size:12px;
text-align:center;
}
.ticket-history-metrics-v39 strong{
display:block;
color:#fff;
font-size:18px;
margin-bottom:2px;
}
.ticket-history-card-v39{
margin-top:14px;
}
.ticket-history-timeline-v39{
position:relative;
display:grid;
gap:12px;
margin-top:12px;
}
.ticket-history-timeline-v39::before{
content:"";
position:absolute;
left:13px;
top:10px;
bottom:10px;
width:2px;
background:linear-gradient(180deg, rgba(255,90,98,.45), rgba(255,255,255,.08));
}
.ticket-history-event-v39{
position:relative;
display:grid;
grid-template-columns:28px minmax(0,1fr);
gap:12px;
align-items:flex-start;
}
.ticket-history-dot-v39{
width:28px;
height:28px;
border-radius:999px;
background:rgba(216,25,32,.18);
border:1px solid rgba(255,90,98,.35);
box-shadow:0 0 0 5px rgba(216,25,32,.08);
z-index:1;
}
.ticket-history-event-v39 > div{
padding:12px;
border-radius:16px;
background:rgba(255,255,255,.045);
border:1px solid rgba(255,255,255,.08);
}
.ticket-history-event-v39 strong{
display:block;
color:#fff;
margin-bottom:5px;
}
.ticket-history-event-v39 p{
margin:0 0 6px;
color:#cbd8e3;
}
.ticket-history-event-v39 small{
color:#9bb0c2;
}
.ticket-history-event-v39.is-admin .ticket-history-dot-v39{
background:rgba(30,144,255,.18);
border-color:rgba(30,144,255,.35);
box-shadow:0 0 0 5px rgba(30,144,255,.08);
}
.ticket-history-event-v39.is-status .ticket-history-dot-v39{
background:rgba(46,204,113,.18);
border-color:rgba(46,204,113,.35);
box-shadow:0 0 0 5px rgba(46,204,113,.08);
}
@media(max-width:980px){
.support-modal-grid-v39{
grid-template-columns:1fr;
}
}
@media(max-width:620px){
.ticket-history-metrics-v39{
grid-template-columns:1fr;
}
}
/* Clientes V40 - Perfil / datos del cliente */
.account-page-v40{
display:grid;
gap:18px;
}
.account-hero-v40{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:18px;
align-items:center;
background:
radial-gradient(circle at 10% 15%, rgba(216,25,32,.16), transparent 30%),
linear-gradient(135deg, rgba(255,255,255,.060), rgba(255,255,255,.025));
border:1px solid rgba(255,90,98,.16);
}
.account-hero-v40 h2{margin:6px 0 8px;}
.account-hero-v40 p{margin:0;color:var(--muted);max-width:760px;}
.account-hero-status-v40{
display:grid;
gap:8px;
justify-items:end;
}
.account-hero-status-v40 small{color:#9bb0c2;font-weight:800;}
.account-summary-v40{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:14px;
}
.account-grid-v40{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:18px;
}
.account-block-v40{
display:grid;
gap:14px;
}
.account-data-list-v40{
display:grid;
gap:10px;
}
.account-data-list-v40 div{
display:grid;
grid-template-columns:190px minmax(0,1fr);
gap:12px;
align-items:center;
padding:12px;
border-radius:16px;
background:rgba(255,255,255,.045);
border:1px solid rgba(255,255,255,.08);
}
.account-data-list-v40 span{
color:#9bb0c2;
font-size:12px;
font-weight:900;
text-transform:uppercase;
letter-spacing:.04em;
}
.account-data-list-v40 strong{
color:#fff;
overflow-wrap:anywhere;
}
.account-info-note-v40{
padding:12px;
border-radius:16px;
background:rgba(251,191,36,.08);
border:1px solid rgba(251,191,36,.18);
color:#fde68a;
font-size:13px;
font-weight:800;
}
.account-help-card-v40 p{
margin:0;
color:#cbd8e3;
line-height:1.6;
}
.account-actions-v40{
display:flex;
flex-wrap:wrap;
gap:10px;
}
@media(max-width:980px){
.account-hero-v40,
.account-grid-v40{
grid-template-columns:1fr;
}
.account-hero-status-v40{
justify-items:start;
}
.account-summary-v40{
grid-template-columns:repeat(2,1fr);
}
}
@media(max-width:620px){
.account-summary-v40{
grid-template-columns:1fr;
}
.account-data-list-v40 div{
grid-template-columns:1fr;
gap:4px;
}
}
/* Clientes V41 - Contacto / soporte */
.contact-page-v41{
display:grid;
gap:18px;
}
.contact-hero-v41{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:18px;
align-items:center;
background:
radial-gradient(circle at 10% 15%, rgba(216,25,32,.16), transparent 30%),
linear-gradient(135deg, rgba(255,255,255,.065), rgba(255,255,255,.025));
border:1px solid rgba(255,90,98,.16);
}
.contact-hero-v41 h2{margin:6px 0 8px;}
.contact-hero-v41 p{margin:0;color:var(--muted);max-width:760px;line-height:1.6;}
.contact-hero-status-v41{
display:grid;
gap:8px;
justify-items:end;
}
.contact-hero-status-v41 small{color:#9bb0c2;font-weight:800;}
.contact-channel-cards-v41{
display:grid;
grid-template-columns:1.15fr 1fr 1fr;
gap:14px;
}
.contact-channel-card-v41{
display:grid;
grid-template-columns:auto minmax(0,1fr);
gap:14px;
align-items:flex-start;
}
.contact-channel-card-v41.is-primary{
border-color:rgba(255,90,98,.22);
box-shadow:0 18px 34px rgba(216,25,32,.10);
}
.contact-channel-icon-v41{
width:44px;
height:44px;
border-radius:15px;
display:grid;
place-items:center;
background:rgba(216,25,32,.15);
border:1px solid rgba(255,90,98,.22);
}
.contact-channel-card-v41 span{
display:block;
color:#9bb0c2;
font-size:12px;
font-weight:900;
text-transform:uppercase;
letter-spacing:.04em;
margin-bottom:4px;
}
.contact-channel-card-v41 strong{
display:block;
color:#fff;
overflow-wrap:anywhere;
}
.contact-channel-card-v41 small{
display:block;
color:var(--muted);
line-height:1.45;
margin-top:6px;
}
.contact-channel-card-v41 .rhino-text-btn{
grid-column:2;
justify-self:start;
margin-top:4px;
}
.contact-layout-v41{
display:grid;
grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);
gap:18px;
align-items:start;
}
.contact-form-v41 form{
display:grid;
gap:10px;
}
.contact-form-note-v41{
display:grid;
gap:4px;
padding:12px;
border-radius:16px;
background:rgba(46,204,113,.08);
border:1px solid rgba(46,204,113,.16);
color:#cbd8e3;
font-size:13px;
}
.contact-form-note-v41 strong{color:#dfffe9;}
.contact-side-v41{
display:grid;
gap:18px;
}
.contact-guide-v41,
.contact-trust-v41{
display:grid;
gap:12px;
}
.contact-guide-v41 h3,
.contact-trust-v41 h3{margin:0;}
.contact-guide-list-v41{
display:grid;
gap:10px;
}
.contact-guide-list-v41 div{
padding:12px;
border-radius:16px;
background:rgba(255,255,255,.045);
border:1px solid rgba(255,255,255,.08);
}
.contact-guide-list-v41 strong{
display:block;
color:#fff;
margin-bottom:4px;
}
.contact-guide-list-v41 span{
color:var(--muted);
line-height:1.45;
}
.contact-trust-v41 ul{
margin:0;
padding-left:18px;
color:#cbd8e3;
line-height:1.7;
}
@media(max-width:1100px){
.contact-channel-cards-v41,
.contact-layout-v41{
grid-template-columns:1fr;
}
}
@media(max-width:680px){
.contact-hero-v41{
grid-template-columns:1fr;
}
.contact-hero-status-v41{
justify-items:start;
}
.contact-channel-card-v41{
grid-template-columns:1fr;
}
.contact-channel-card-v41 .rhino-text-btn{
grid-column:1;
}
}
/* Clientes V42 - Estable funcional de módulos */
.portal-functional-v42{
display:grid;
gap:16px;
background:
radial-gradient(circle at 8% 12%, rgba(46,204,113,.12), transparent 28%),
linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
border:1px solid rgba(46,204,113,.16);
}
.portal-functional-head-v42{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:14px;
}
.portal-functional-head-v42 h3{
margin:4px 0 0;
}
.portal-functional-grid-v42{
display:grid;
grid-template-columns:repeat(4, minmax(0,1fr));
gap:12px;
}
.portal-functional-grid-v42 article{
display:grid;
gap:7px;
padding:14px;
border-radius:18px;
background:rgba(255,255,255,.045);
border:1px solid rgba(255,255,255,.08);
min-width:0;
}
.portal-functional-icon-v42{
width:40px;
height:40px;
display:grid;
place-items:center;
border-radius:14px;
background:rgba(216,25,32,.12);
border:1px solid rgba(216,25,32,.18);
}
.portal-functional-grid-v42 strong{
color:#fff;
font-size:15px;
}
.portal-functional-grid-v42 small{
color:#cbd8e3;
line-height:1.4;
}
.portal-functional-grid-v42 em{
color:#86efac;
font-size:12px;
font-style:normal;
font-weight:900;
text-transform:uppercase;
letter-spacing:.04em;
}
@media(max-width:980px){
.portal-functional-grid-v42{
grid-template-columns:repeat(2, minmax(0,1fr));
}
}
@media(max-width:620px){
.portal-functional-head-v42{
flex-direction:column;
}
.portal-functional-grid-v42{
grid-template-columns:1fr;
}
}
/* RHINO Cliente V43 - login responsive celular */
.login-body-v8{
overflow-x:hidden;
}
.login-shell-v8{
width:100%;
}
.login-form-v8 input,
.login-form-v8 button{
min-height:48px;
font-size:16px;
}
.login-card-v8{
position:relative;
overflow:hidden;
}
.login-card-v8::before{
content:"";
position:absolute;
inset:0 0 auto 0;
height:4px;
background:linear-gradient(90deg,#d81920,#ff6b72,rgba(255,255,255,.15));
}
.login-mobile-trust-v43{
display:none;
grid-template-columns:1fr 1fr;
gap:10px;
margin:18px 0 0;
}
.login-mobile-trust-v43 span{
display:flex;
align-items:center;
justify-content:center;
gap:7px;
min-height:38px;
padding:9px 10px;
border-radius:999px;
background:rgba(216,25,32,.10);
border:1px solid rgba(255,90,98,.20);
color:#ffd8dc;
font-size:12px;
font-weight:900;
text-align:center;
}
@media(max-width:760px){
.login-body-v8{
background:
radial-gradient(circle at 20% 0%, rgba(216,25,32,.20), transparent 34%),
linear-gradient(180deg,#050608 0%,#0b0f14 100%);
}
.login-shell-v8{
min-height:100dvh;
display:flex;
flex-direction:column;
}
.login-hero-v8{
padding:18px 18px 14px;
gap:14px;
}
.login-brand-v8 img{
width:42px;
height:42px;
border-radius:13px;
}
.login-copy-v8 h1{
font-size:30px;
line-height:1.04;
letter-spacing:-.04em;
margin:10px 0 10px;
}
.login-copy-v8 p{
font-size:14px;
line-height:1.45;
margin:0;
}
.login-benefits-v8{
display:none;
}
.login-card-v8{
width:calc(100% - 24px);
margin:12px auto 18px;
padding:24px 18px 20px;
border-radius:24px;
box-shadow:0 18px 55px rgba(0,0,0,.44);
}
.login-card-head-v8 h2{
font-size:28px;
}
.login-card-head-v8 p{
margin-bottom:18px;
font-size:14px;
line-height:1.45;
}
.login-form-v8{
gap:10px;
}
.login-form-v8 label{
font-size:13px;
}
.login-form-v8 input{
width:100%;
min-height:50px;
border-radius:15px;
}
.login-form-v8 button{
min-height:52px;
border-radius:16px;
font-size:15px;
}
.login-mobile-trust-v43{
display:grid;
}
.login-help-v8{
flex-direction:column;
margin-top:16px;
}
.login-help-v8 a{
display:flex;
align-items:center;
justify-content:center;
min-height:42px;
border-radius:14px;
background:rgba(255,255,255,.045);
border:1px solid rgba(255,255,255,.08);
text-align:center;
}
.login-security-note-v8{
margin-top:16px;
font-size:12.5px;
}
}
@media(max-width:380px){
.login-copy-v8 h1{
font-size:27px;
}
.login-card-v8{
width:calc(100% - 16px);
padding:22px 14px 18px;
}
.login-mobile-trust-v43{
grid-template-columns:1fr;
}
}
/* RHINO Cliente V44 - dashboard responsive celular */
@media(max-width:900px){
.client-home-v6{
gap:16px;
}
.home-hero-v6{
grid-template-columns:1fr;
gap:14px;
}
.home-welcome-v6,
.home-account-v6{
min-width:0;
}
.home-quick-actions{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
}
.home-security-hero-v28{
order:-1;
}
.client-data-strip-v32,
.portal-functional-v42,
.home-info-v6,
.home-bottom-v6 .card{
border-radius:22px;
}
.client-data-grid-v32,
.portal-functional-grid-v42,
.home-panel-grid-v6,
.home-bottom-v6{
grid-template-columns:1fr;
}
.invoice-summary-main-v29,
.document-summary-main-v28,
.ticket-summary-main-v30{
grid-template-columns:1fr;
}
.invoice-status-grid-v29,
.ticket-status-grid-v30{
grid-template-columns:1fr 1fr;
}
.home-shortcuts-v31{
grid-template-columns:1fr 1fr;
}
}
@media(max-width:620px){
.client-home-v6{
gap:14px;
}
.home-hero-v6{
margin-top:2px;
}
.home-welcome-v6,
.home-account-v6,
.client-data-strip-v32,
.portal-functional-v42,
.home-info-v6,
.home-bottom-v6 .card{
padding:18px;
border-radius:20px;
}
.home-welcome-v6 h1{
font-size:26px;
line-height:1.08;
margin-bottom:10px;
}
.home-welcome-v6 p,
.section-heading p{
font-size:14px;
line-height:1.45;
}
.home-quick-actions,
.home-shortcuts-v31,
.invoice-status-grid-v29,
.ticket-status-grid-v30,
.client-data-grid-v32,
.portal-functional-grid-v42{
grid-template-columns:1fr;
}
.home-quick-actions a,
.rhino-text-btn,
.shortcut-card-v31{
width:100%;
min-height:46px;
justify-content:center;
text-align:center;
}
.security-hero-top-v28{
align-items:flex-start;
gap:12px;
}
.security-hero-icon-v28{
width:46px;
height:46px;
flex:0 0 46px;
}
.security-hero-badges-v28,
.document-category-chips-v28{
gap:8px;
}
.security-hero-badges-v28 span,
.document-category-chips-v28 span,
.status-pill{
white-space:normal;
text-align:center;
}
.invoice-mini-list-v29,
.document-mini-list-v28,
.ticket-mini-list-v30,
.home-alert-list-v6{
gap:10px;
}
.invoice-mini-list-v29 li,
.document-mini-list-v28 li,
.ticket-mini-list-v30 li,
.home-alert,
.portal-functional-grid-v42 > div,
.client-data-grid-v32 > div{
align-items:flex-start;
gap:10px;
padding:12px;
border-radius:16px;
}
.weather-card-v6 .section-heading,
.document-summary-card-v28 .section-heading,
.invoice-summary-card-v29 .section-heading,
.ticket-summary-card-v30 .section-heading{
gap:8px;
}
.weather-note-v6{
font-size:13px;
line-height:1.45;
}
}
@media(max-width:420px){
.home-welcome-v6 h1{
font-size:23px;
}
.home-welcome-v6,
.home-account-v6,
.client-data-strip-v32,
.portal-functional-v42,
.home-info-v6,
.home-bottom-v6 .card{
padding:15px;
border-radius:18px;
}
.security-hero-top-v28{
flex-direction:column;
}
.section-heading h2,
.section-heading h3{
font-size:20px;
line-height:1.15;
}
.home-quick-actions a,
.rhino-text-btn,
.shortcut-card-v31{
font-size:13px;
}
}
/* Clientes V45 - Tablas responsive para celular */
.responsive-table-card{
width:100%;
}
@media (max-width:760px){
.responsive-table-card{
min-width:0;
display:block;
border-collapse:separate;
border-spacing:0;
overflow:visible;
}
.responsive-table-card thead{
display:none;
}
.responsive-table-card tbody,
.responsive-table-card tr,
.responsive-table-card td{
display:block;
width:100%;
}
.responsive-table-card tr{
margin:0 0 12px;
padding:12px;
border:1px solid rgba(255,255,255,.10);
border-radius:18px;
background:rgba(255,255,255,.045);
box-shadow:0 12px 30px rgba(0,0,0,.16);
}
.responsive-table-card td{
padding:10px 0;
border-bottom:1px solid rgba(255,255,255,.08);
white-space:normal;
word-break:break-word;
display:flex;
justify-content:space-between;
gap:14px;
align-items:flex-start;
text-align:right;
}
.responsive-table-card td:last-child{
border-bottom:0;
padding-bottom:0;
}
.responsive-table-card td::before{
content:attr(data-label);
flex:0 0 42%;
color:rgba(226,232,240,.68);
font-size:12px;
font-weight:800;
letter-spacing:.04em;
text-transform:uppercase;
text-align:left;
}
.responsive-table-card .status-pill{
white-space:normal;
justify-content:center;
}
}
/* RHINO Cliente V50 - clima ampliado y ayudas de seguridad */
.weather-main-v50{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:12px;
margin-bottom:8px;
}
.weather-main-v50 strong{
margin:0;
line-height:1;
}
.weather-main-v50 span{
color:#dfe7ef;
font-weight:900;
text-align:right;
}
.weather-detail-grid-v50{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px;
margin-top:14px;
}
.weather-detail-grid-v50 span{
display:flex;
flex-direction:column;
gap:3px;
padding:10px;
border-radius:14px;
background:rgba(255,255,255,.055);
border:1px solid rgba(255,255,255,.10);
color:#f8fafc;
font-weight:900;
}
.weather-detail-grid-v50 b{
color:var(--muted);
font-size:11px;
text-transform:uppercase;
letter-spacing:.04em;
}
.csrf-help-v46{
position:relative;
cursor:help;
text-decoration:underline dotted rgba(255,255,255,.42);
text-underline-offset:3px;
}
.csrf-help-v46::after{
content:attr(data-help);
position:absolute;
left:50%;
bottom:calc(100% + 10px);
transform:translateX(-50%) translateY(4px);
width:min(280px, calc(100vw - 32px));
padding:10px 12px;
border-radius:12px;
background:#111827;
color:#fff;
border:1px solid rgba(255,255,255,.16);
box-shadow:0 16px 35px rgba(0,0,0,.26);
font-size:12px;
line-height:1.35;
text-transform:none;
letter-spacing:0;
font-weight:800;
opacity:0;
visibility:hidden;
pointer-events:none;
z-index:50;
}
.csrf-help-v46:hover::after,
.csrf-help-v46:focus::after{
opacity:1;
visibility:visible;
transform:translateX(-50%) translateY(0);
}
@media(max-width:620px){
.weather-main-v50{
align-items:flex-start;
flex-direction:column;
}
.weather-main-v50 span{
text-align:left;
}
.weather-detail-grid-v50{
grid-template-columns:1fr;
}
}
/* Clientes V105 - verificación por código de email */
.login-code-box-v105{
border:1px solid rgba(148,163,184,.28);
background:rgba(15,23,42,.48);
border-radius:16px;
padding:14px 16px;
margin:0 0 16px;
display:flex;
flex-direction:column;
gap:4px;
}
.login-code-box-v105 strong{color:#fff;font-size:14px}
.login-code-box-v105 span{color:#f8fafc;font-weight:800;word-break:break-word}
.login-code-box-v105 small{color:#a8b7c7;line-height:1.45}
.login-code-input-v105{text-align:center;letter-spacing:.35em;font-weight:900;font-size:20px}
.login-resend-form-v105{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:12px}
.login-resend-form-v105 button{border:1px solid rgba(148,163,184,.28);background:rgba(255,255,255,.08);color:#f8fafc;border-radius:12px;padding:10px 14px;font-weight:800;cursor:pointer}
.login-resend-form-v105 a{color:#cbd5e1;text-decoration:none;font-weight:700}
.login-resend-form-v105 a:hover{text-decoration:underline}
/* Clientes V106 - pulido visual del login con código */
.login-card-v8:has(.login-code-box-v105){
padding-bottom:30px;
}
.login-card-v8:has(.login-code-box-v105) .login-form-v8{
gap:14px;
}
.login-card-v8:has(.login-code-box-v105) .login-form-v8 button{
margin-top:8px;
min-height:54px;
border-radius:16px;
}
.login-resend-form-v105{
margin-top:18px;
padding-top:16px;
border-top:1px solid rgba(148,163,184,.18);
}
.login-resend-form-v105 button{
min-height:46px;
padding:12px 18px;
border-radius:14px;
}
.login-resend-form-v105 a{
min-height:46px;
padding:12px 14px;
border-radius:14px;
display:inline-flex;
align-items:center;
justify-content:center;
background:rgba(255,255,255,.045);
border:1px solid rgba(255,255,255,.08);
}
@media(max-width:620px){
.login-card-v8:has(.login-code-box-v105){
padding:24px 18px 22px;
}
.login-card-v8:has(.login-code-box-v105) .login-form-v8{
gap:12px;
}
.login-code-box-v105{
margin-bottom:18px;
padding:15px;
}
.login-code-input-v105{
min-height:56px;
font-size:22px;
letter-spacing:.28em;
}
.login-resend-form-v105{
display:grid;
grid-template-columns:1fr;
gap:10px;
margin-top:20px;
padding-top:18px;
}
.login-resend-form-v105 button,
.login-resend-form-v105 a{
width:100%;
min-height:50px;
text-align:center;
}
}
/* Clientes V107 - separación clara entre validar y reenviar código */
.login-card-v8 .login-form-v8 + .login-resend-form-v105{
margin-top:24px !important;
padding-top:20px !important;
border-top:1px solid rgba(148,163,184,.18) !important;
}
.login-card-v8 .login-resend-form-v105{
display:grid !important;
grid-template-columns:1fr !important;
gap:14px !important;
}
.login-card-v8 .login-resend-form-v105 button{
margin-top:0 !important;
width:100% !important;
min-height:52px !important;
border-radius:16px !important;
background:rgba(255,255,255,.075) !important;
border:1px solid rgba(255,255,255,.14) !important;
box-shadow:none !important;
}
.login-card-v8 .login-resend-form-v105 a{
width:100% !important;
min-height:46px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
margin-top:2px !important;
}
@media(max-width:620px){
.login-card-v8 .login-form-v8 + .login-resend-form-v105{
margin-top:26px !important;
padding-top:22px !important;
}
.login-card-v8 .login-resend-form-v105{
gap:16px !important;
}
}