*{
box-sizing:border-box;
}
html,
body{
margin:0;
padding:0;
min-height:100%;
font-family:Arial, Helvetica, sans-serif;
}
body.cliente-login-body{
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
padding:20px;
background:#f2f5f8;
}
.cliente-login-container{
width:100%;
max-width:420px;
}
.cliente-login-card{
background:#ffffff;
border-radius:18px;
padding:32px 26px;
box-shadow:
0 10px 30px rgba(0,0,0,0.10);
}
.cliente-login-logo{
text-align:center;
margin-bottom:30px;
}
.cliente-logo-icon{
width:64px;
height:64px;
margin:0 auto 15px auto;
border-radius:18px;
display:flex;
align-items:center;
justify-content:center;
font-size:30px;
font-weight:bold;
color:#ffffff;
background:#1f6feb;
}
.cliente-login-logo h1{
margin:0 0 8px 0;
font-size:26px;
color:#222;
}
.cliente-login-logo p{
margin:0;
color:#777;
font-size:14px;
}
.cliente-form-group{
margin-bottom:18px;
}
.cliente-form-group label{
display:block;
margin-bottom:7px;
font-size:14px;
font-weight:bold;
color:#444;
}
.cliente-form-group input{
width:100%;
height:48px;
border:1px solid #d7dce1;
border-radius:10px;
padding:0 14px;
font-size:16px;
outline:none;
}
.cliente-form-group input:focus{
border-color:#1f6feb;
box-shadow:
0 0 0 3px rgba(31,111,235,0.10);
}
.cliente-login-button{
width:100%;
height:50px;
border:0;
border-radius:10px;
font-size:16px;
font-weight:bold;
color:#ffffff;
cursor:pointer;
background:#1f6feb;
}
.cliente-login-button:hover{
opacity:0.92;
}
.cliente-alert-error{
margin-bottom:20px;
padding:12px;
border-radius:10px;
font-size:14px;
color:#a11;
background:#fff0f0;
border:1px solid #f2caca;
}
.cliente-login-footer{
margin-top:22px;
text-align:center;
}
.cliente-login-footer a{
font-size:14px;
color:#1f6feb;
text-decoration:none;
}
@media(max-width:480px){
body.cliente-login-body{
padding:15px;
}
.cliente-login-card{
padding:28px 20px;
border-radius:15px;
}
}
/* =========================================================
AREA CLIENTE - DASHBOARD
========================================================= */
body.cliente-app-body{
background:#f4f6f8;
color:#222;
padding-bottom:80px;
}
.cliente-header{
background:#ffffff;
border-bottom:1px solid #e5e7eb;
position:sticky;
top:0;
z-index:100;
}
.cliente-header-inner{
max-width:1100px;
margin:auto;
padding:14px 20px;
display:flex;
align-items:center;
justify-content:space-between;
}
.cliente-brand{
display:flex;
align-items:center;
gap:10px;
}
.cliente-brand-icon{
width:42px;
height:42px;
border-radius:12px;
background:#1f6feb;
color:#ffffff;
display:flex;
align-items:center;
justify-content:center;
font-size:22px;
font-weight:bold;
}
.cliente-brand strong{
display:block;
font-size:16px;
}
.cliente-brand span{
display:block;
font-size:12px;
color:#777;
}
.cliente-logout{
text-decoration:none;
color:#666;
font-size:14px;
}
.cliente-main{
max-width:1100px;
margin:auto;
padding:25px 20px;
}
.cliente-welcome{
margin-bottom:25px;
}
.cliente-welcome p{
margin:0;
color:#777;
}
.cliente-welcome h1{
margin:5px 0;
font-size:28px;
}
.cliente-welcome span{
color:#777;
font-size:14px;
}
/* RESUMEN */
.cliente-summary-grid{
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:15px;
margin-bottom:30px;
}
.cliente-summary-card{
background:#ffffff;
border-radius:15px;
padding:18px;
display:flex;
align-items:center;
gap:15px;
box-shadow:0 2px 8px rgba(0,0,0,0.04);
}
.cliente-summary-icon{
width:48px;
height:48px;
border-radius:12px;
background:#eef4ff;
color:#1f6feb;
display:flex;
align-items:center;
justify-content:center;
font-size:22px;
}
.cliente-summary-card span{
display:block;
font-size:12px;
color:#777;
}
.cliente-summary-card strong{
display:block;
margin-top:4px;
font-size:22px;
}
/* SECCIONES */
.cliente-section{
margin-bottom:30px;
}
.cliente-section-title{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:15px;
}
.cliente-section-title h2{
margin:0;
font-size:20px;
}
.cliente-section-title a{
color:#1f6feb;
text-decoration:none;
font-size:14px;
}
/* ACCIONES */
.cliente-actions-grid{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:15px;
}
.cliente-action-card{
background:#ffffff;
border-radius:15px;
padding:20px;
text-decoration:none;
color:#222;
box-shadow:0 2px 8px rgba(0,0,0,0.04);
transition:0.2s;
}
.cliente-action-card:hover{
transform:translateY(-3px);
}
.cliente-action-icon{
font-size:28px;
margin-bottom:12px;
}
.cliente-action-card strong{
display:block;
margin-bottom:5px;
}
.cliente-action-card span{
font-size:13px;
color:#777;
}
/* SERVICIOS */
.cliente-services-list{
display:flex;
flex-direction:column;
gap:10px;
}
.cliente-service-card{
background:#ffffff;
border-radius:14px;
padding:16px;
display:flex;
align-items:center;
gap:14px;
box-shadow:0 2px 8px rgba(0,0,0,0.04);
}
.cliente-service-icon{
width:44px;
height:44px;
background:#f2f5f8;
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
font-size:20px;
}
.cliente-service-info{
flex:1;
}
.cliente-service-info strong{
display:block;
}
.cliente-service-info span{
display:block;
margin-top:4px;
color:#777;
font-size:13px;
}
.cliente-service-price{
font-weight:bold;
white-space:nowrap;
}
/* PERFIL */
.cliente-profile-card{
background:#ffffff;
border-radius:15px;
padding:20px;
box-shadow:0 2px 8px rgba(0,0,0,0.04);
}
.cliente-profile-card h2{
margin-top:0;
}
.cliente-profile-row{
display:flex;
justify-content:space-between;
padding:12px 0;
border-bottom:1px solid #eee;
}
.cliente-profile-row:last-child{
border-bottom:0;
}
.cliente-profile-row span{
color:#777;
}
.cliente-empty{
background:#ffffff;
padding:25px;
border-radius:14px;
color:#777;
}
/* MENU INFERIOR */
.cliente-bottom-nav{
display:none;
}
/* =========================================================
MOVIL
========================================================= */
@media(max-width:700px){
.cliente-main{
padding:20px 15px;
}
.cliente-welcome h1{
font-size:25px;
}
.cliente-summary-card{
padding:15px;
}
.cliente-summary-card strong{
font-size:18px;
}
.cliente-summary-icon{
width:42px;
height:42px;
}
.cliente-actions-grid{
grid-template-columns:repeat(2, 1fr);
gap:10px;
}
.cliente-action-card{
padding:16px;
}
.cliente-action-card span{
display:none;
}
.cliente-bottom-nav{
position:fixed;
display:flex;
justify-content:space-around;
align-items:center;
bottom:0;
left:0;
right:0;
height:65px;
background:#ffffff;
border-top:1px solid #ddd;
z-index:500;
}
.cliente-bottom-nav a{
text-decoration:none;
color:#777;
text-align:center;
flex:1;
}
.cliente-bottom-nav a.active{
color:#1f6feb;
}
.cliente-bottom-nav span{
display:block;
font-size:22px;
margin-bottom:3px;
}
.cliente-bottom-nav small{
font-size:10px;
}
.cliente-profile-row{
flex-direction:column;
gap:4px;
}
.cliente-service-card{
padding:14px;
}
}
/* =========================================================
PAGINA MIS SERVICIOS
========================================================= */
.cliente-page-header{
margin-bottom:25px;
}
.cliente-page-header h1{
margin:10px 0 5px 0;
font-size:28px;
}
.cliente-page-header p{
margin:0;
color:#777;
}
.cliente-back-link{
color:#1f6feb;
text-decoration:none;
font-size:14px;
}
.cliente-services-summary{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:15px;
margin-bottom:25px;
}
.cliente-services-summary > div{
background:#ffffff;
padding:18px;
border-radius:14px;
box-shadow:0 2px 8px rgba(0,0,0,0.04);
}
.cliente-services-summary span{
display:block;
color:#777;
font-size:13px;
margin-bottom:5px;
}
.cliente-services-summary strong{
font-size:22px;
}
/* LISTADO COMPLETO */
.cliente-full-services-list{
display:flex;
flex-direction:column;
gap:12px;
}
.cliente-full-service-card{
background:#ffffff;
border-radius:16px;
padding:18px;
display:flex;
align-items:center;
gap:16px;
text-decoration:none;
color:#222;
box-shadow:0 2px 8px rgba(0,0,0,0.04);
transition:all 0.2s ease;
}
.cliente-full-service-card:hover{
transform:translateY(-2px);
box-shadow:0 6px 16px rgba(0,0,0,0.08);
}
.cliente-full-service-icon{
width:52px;
height:52px;
border-radius:15px;
background:#f2f5f8;
display:flex;
align-items:center;
justify-content:center;
font-size:24px;
flex-shrink:0;
}
.cliente-full-service-info{
flex:1;
min-width:0;
}
.cliente-service-type{
color:#1f6feb;
font-size:11px;
font-weight:bold;
letter-spacing:0.5px;
margin-bottom:4px;
}
.cliente-full-service-info strong{
display:block;
font-size:16px;
}
.cliente-full-service-info span{
display:block;
color:#777;
font-size:13px;
margin-top:4px;
}
.cliente-full-service-info small{
display:block;
color:#999;
margin-top:4px;
font-size:12px;
}
.cliente-full-service-right{
text-align:right;
min-width:100px;
}
.cliente-service-active{
color:#1d9b50;
font-size:12px;
margin-bottom:6px;
}
.cliente-full-service-price{
font-weight:bold;
font-size:16px;
}
.cliente-service-arrow{
display:none;
font-size:26px;
color:#999;
}
/* MOVIL */
@media(max-width:700px){
.cliente-page-header h1{
font-size:25px;
}
.cliente-full-service-card{
padding:15px;
gap:12px;
}
.cliente-full-service-icon{
width:46px;
height:46px;
font-size:21px;
border-radius:13px;
}
.cliente-full-service-right{
min-width:auto;
display:flex;
flex-direction:column;
align-items:flex-end;
}
.cliente-service-active{
font-size:10px;
}
.cliente-full-service-price{
font-size:14px;
}
.cliente-service-arrow{
display:block;
line-height:15px;
}
.cliente-full-service-info strong{
font-size:15px;
}
}
/* =========================================================
DETALLE SERVICIO
========================================================= */
.cliente-service-detail-header{
margin-top:20px;
margin-bottom:25px;
background:#ffffff;
border-radius:18px;
padding:22px;
display:flex;
align-items:center;
gap:18px;
box-shadow:0 2px 10px rgba(0,0,0,0.05);
}
.cliente-service-detail-icon{
width:70px;
height:70px;
border-radius:20px;
background:#f2f5f8;
display:flex;
align-items:center;
justify-content:center;
font-size:34px;
flex-shrink:0;
}
.cliente-service-detail-title{
flex:1;
}
.cliente-service-detail-title h1{
margin:3px 0;
font-size:24px;
}
.cliente-service-detail-title p{
margin:5px 0 0 0;
color:#777;
}
.cliente-service-status{
padding:8px 12px;
border-radius:20px;
font-size:13px;
font-weight:bold;
white-space:nowrap;
}
.cliente-service-status.activo{
background:#edf9f0;
color:#1d9b50;
}
.cliente-service-status.inactivo{
background:#fff1f1;
color:#d33;
}
/* TARJETAS */
.cliente-detail-card{
background:#ffffff;
border-radius:16px;
padding:22px;
margin-bottom:20px;
box-shadow:0 2px 8px rgba(0,0,0,0.04);
}
.cliente-detail-card h2{
margin-top:0;
font-size:19px;
}
.cliente-detail-row{
display:flex;
justify-content:space-between;
align-items:center;
padding:14px 0;
border-bottom:1px solid #eee;
}
.cliente-detail-row:last-child{
border-bottom:0;
}
.cliente-detail-row span{
color:#777;
}
.cliente-detail-row strong{
text-align:right;
}
/* CONEXION */
.cliente-connection-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:15px;
margin-bottom:20px;
}
.cliente-connection-grid > div{
background:#f6f8fa;
padding:18px;
border-radius:12px;
}
.cliente-connection-label{
display:block;
color:#777;
font-size:12px;
margin-bottom:6px;
}
.cliente-connection-ok{
color:#1d9b50;
}
/* BOTON */
.cliente-primary-button{
display:inline-block;
background:#1f6feb;
color:#ffffff;
padding:12px 18px;
border-radius:10px;
text-decoration:none;
font-weight:bold;
}
/* AYUDA */
.cliente-help-card{
background:#1f2937;
color:#ffffff;
border-radius:16px;
padding:22px;
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
}
.cliente-help-card strong{
display:block;
margin-bottom:5px;
}
.cliente-help-card span{
color:#d1d5db;
font-size:13px;
}
.cliente-help-card a{
background:#ffffff;
color:#1f2937;
padding:10px 15px;
border-radius:8px;
text-decoration:none;
font-weight:bold;
white-space:nowrap;
}
/* MOVIL */
@media(max-width:700px){
.cliente-service-detail-header{
padding:16px;
gap:12px;
align-items:flex-start;
flex-wrap:wrap;
}
.cliente-service-detail-icon{
width:55px;
height:55px;
font-size:27px;
border-radius:16px;
}
.cliente-service-detail-title{
min-width:0;
}
.cliente-service-detail-title h1{
font-size:20px;
}
.cliente-service-status{
width:100%;
text-align:center;
}
.cliente-detail-card{
padding:18px;
}
.cliente-detail-row{
flex-direction:column;
align-items:flex-start;
gap:5px;
}
.cliente-detail-row strong{
text-align:left;
}
.cliente-connection-grid{
grid-template-columns:1fr;
}
.cliente-help-card{
flex-direction:column;
align-items:flex-start;
}
.cliente-help-card a{
width:100%;
text-align:center;
box-sizing:border-box;
}
}