/* =========================================================
   ALTOQUE MENSAJERÍA — style.css  COMPLETO
   Azul celeste · Bordes naranja · Fuente Bold cartel
   ========================================================= */

:root {
  --azul:        #ffffff;
  --azul-light:  #f3e8ff;
  --naranja:     #f97316;
  --naranja-dark:#ea6a05;
  --negro:       #0a0a0a;
  --morado:      #7c3aed;
  --morado-dark: #5b21b6;
  --morado-light:#ede9fe;
  --blanco:      #ffffff;
  --bw:          6px;
  --r:           18px;
  --r-lg:        24px;
  --sh:          5px 5px 0 var(--naranja);
  --sh-dark:     5px 5px 0 var(--negro);
  --f-title:     'Bangers', Impact, sans-serif;
  --f-body:      'Inter', Arial, sans-serif;
  /* Variables faltantes corregidas */
  --danger:      #ef4444;
  --success:     #22c55e;
  --warning:     #f59e0b;
  --info:        #3b82f6;
  --text-muted:  #6b7280;
  --border:      rgba(249,115,22,0.3);
  --dark2:       #13131f;
  --card:        #ffffff;
  --text:        #0a0a0a;
  --border:      rgba(249,115,22,0.25);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--f-body);background:#ffffff;color:#1a0a2e;min-height:100vh;line-height:1.4}

h1,h2,h3,h4,h5{font-family:var(--f-title);font-weight:400;letter-spacing:.04em;color:var(--negro);line-height:1;text-transform:uppercase}
h1{font-size:clamp(2.2rem,5vw,3.8rem)}
h2{font-size:clamp(1.7rem,3.5vw,3rem)}
h3{font-size:clamp(1.2rem,2.5vw,1.9rem)}
h4{font-size:1.25rem}
p{font-size:.9rem;color:var(--negro);line-height:1.5}
a{color:var(--negro);text-decoration:none;transition:.15s}

/* ══ PAGE WRAP ══════════════════════════════════════════════ */
.main{min-height:100vh;background:#ffffff}
.page-wrap{max-width:1100px;margin:0 auto;padding:14px 18px 40px;display:flex;flex-direction:column;gap:14px}

/* ══ NAVBAR ════════════════════════════════════════════════ */
.navbar{
  background:var(--azul-light);
  border:var(--bw) solid var(--naranja);
  border-radius:var(--r-lg);
  box-shadow:var(--sh);
  padding:12px 20px;
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;
}
.navbar .logo{display:flex;align-items:center;gap:10px}
.navbar .logo img{width:52px;height:52px;object-fit:contain;border:3px solid var(--naranja);border-radius:10px;background:var(--blanco)}
.navbar .logo-wrap{font-family:var(--f-title);line-height:1;letter-spacing:.05em}
.navbar .logo-top{font-size:1.4rem;color:var(--negro);display:block}
.navbar .logo-bot{font-size:1.4rem;color:var(--naranja);display:block}

.navbar nav{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.navbar nav .nav-btn{
  font-family:var(--f-title);
  font-size:.88rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  background:#ffffff;
  color:#0a0a0a;
  border:3px solid var(--naranja);
  border-radius:12px;
  width:88px;
  min-height:56px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:6px 4px;
  line-height:1.2;
  box-shadow:3px 3px 0 var(--naranja);
  transition:all .15s;
  text-decoration:none;
  cursor:pointer;
}
.navbar nav .nav-btn:hover{background:var(--naranja);transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--negro);color:#fff}
.navbar nav .nav-btn.nav-dark{background:var(--negro);color:var(--naranja);border-color:var(--naranja);box-shadow:3px 3px 0 var(--naranja)}
.navbar nav .nav-btn.nav-dark:hover{background:#1a1a1a;box-shadow:5px 5px 0 var(--naranja)}
.navbar nav .nav-btn.nav-star{background:#f59e0b;color:var(--negro);border-color:var(--negro);box-shadow:3px 3px 0 var(--negro)}
.navbar nav .nav-btn.nav-star:hover{background:#d97706;transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--negro)}
.navbar nav .nav-btn.nav-exit{background:#e31e1e;color:#fff;border-color:#c01010;box-shadow:3px 3px 0 var(--negro)}
.navbar nav .nav-btn.nav-exit:hover{background:#b91c1c;color:#fff;box-shadow:5px 5px 0 var(--negro);transform:translate(-1px,-1px)}

/* ══ HERO BANNER ════════════════════════════════════════════
   Compacto: texto izquierda, moto derecha, mismo alto que moto
   ══════════════════════════════════════════════════════════ */
.hero-banner{
  background:var(--azul-light);
  border:var(--bw) solid var(--naranja);
  border-radius:var(--r-lg);
  box-shadow:var(--sh);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 0 8px 32px;   /* solo padding izq; moto llega al borde */
  gap:0;
  overflow:hidden;
}
.hero-text{
  flex:1;
  min-width:0;
  padding-right:16px;
}
.hero-text h1{
  font-family:var(--f-title);
  font-size:clamp(2rem,4.5vw,3.4rem);
  color:var(--negro);
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-bottom:4px;
}
.hero-text h3{
  font-family:var(--f-title);
  color:var(--naranja);
  font-size:clamp(.9rem,1.8vw,1.3rem);
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom:6px;
}
.hero-text p{
  font-size:.85rem;
  color:#222;
  margin-bottom:14px;
  max-width:380px;
}
.hero-btns{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.hero-btns .btn-primary,
.hero-btns .btn-secondary{
  padding:9px 16px;
  font-size:.88rem;
  border-radius:50px;
  border:3px solid var(--negro);
  box-shadow:3px 3px 0 var(--negro);
  white-space:nowrap;
  font-family:var(--f-title);
  letter-spacing:.05em;
  text-transform:uppercase;
  display:inline-flex;align-items:center;gap:5px;
  cursor:pointer;transition:all .15s;text-decoration:none;
}
.hero-btns .btn-primary{background:var(--naranja);color:var(--blanco)}
.hero-btns .btn-primary:hover{background:var(--naranja-dark);transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--negro);color:var(--blanco)}
.hero-btns .btn-secondary{background:var(--azul-light);color:var(--negro)}
.hero-btns .btn-secondary:hover{background:var(--blanco);transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--negro);color:var(--negro)}

.hero-moto{
  flex-shrink:0;
  display:flex;
  align-items:flex-end;  /* moto pegada al fondo */
  align-self:stretch;
}
.hero-moto img{
  width:clamp(180px,26vw,300px);
  display:block;
  filter:drop-shadow(3px 0 8px rgba(0,0,0,.18));
}

@media(max-width:680px){
  .hero-banner{flex-direction:column;padding:20px 16px;gap:12px}
  .hero-text{padding-right:0;text-align:center}
  .hero-btns{justify-content:center}
  .hero-moto img{width:180px}
}

/* ══ GRID 3 cols ════════════════════════════════════════════ */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:780px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.grid-3{grid-template-columns:repeat(2,1fr)}}

/* ══ TILE ═══════════════════════════════════════════════════ */
.tile{
  background:var(--azul-light);border:var(--bw) solid var(--naranja);
  border-radius:var(--r);box-shadow:var(--sh);
  padding:22px 16px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;gap:8px;min-height:130px;
  cursor:pointer;transition:all .15s;text-decoration:none;
}
.tile:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--naranja)}
.tile h3{font-size:clamp(1.2rem,2.5vw,1.8rem);letter-spacing:.06em;color:var(--negro);margin:0}
.tile p{font-size:.82rem;color:#333;margin:0}
.tile-icon{font-size:1.9rem}
.tile-sub{font-size:.75rem;opacity:.65}
.tile.tile-accent{background:var(--azul-light);border-color:var(--naranja);box-shadow:6px 6px 0 var(--naranja)}
.tile.tile-accent h3{color:var(--negro)}
.tile.tile-accent p{color:#333}
.tile.tile-accent:hover{background:#fff;box-shadow:9px 9px 0 var(--naranja)}

/* ══ FORM WRAPPER ═══════════════════════════════════════════ */
.section-form-reviews{display:grid;grid-template-columns:1fr 300px;gap:14px;align-items:start}
@media(max-width:860px){.section-form-reviews{grid-template-columns:1fr}}
.form-wrapper{display:flex;flex-direction:column;gap:0}

.tile-form-btn{
  background:var(--azul-light);border:var(--bw) solid var(--naranja);
  border-radius:var(--r);box-shadow:var(--sh);
  padding:22px 16px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;gap:8px;min-height:130px;
  cursor:pointer;transition:all .15s;width:100%;font-family:inherit;
}
.tile-form-btn:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--naranja)}
.tile-form-btn h3{font-family:var(--f-title);font-size:clamp(1.2rem,2.5vw,1.8rem);letter-spacing:.06em;color:var(--negro);text-transform:uppercase;margin:0}
.tile-form-btn .tile-icon{font-size:1.9rem}
.tile-form-btn .tile-sub{font-size:.75rem;opacity:.65;color:#333}

/* ══ FORM CARD ══════════════════════════════════════════════ */
.form-card{
  background:var(--azul-light);border:var(--bw) solid var(--naranja);
  border-radius:var(--r);box-shadow:var(--sh);padding:24px 22px;
}
.form-card-header{
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:3px solid var(--naranja);padding-bottom:10px;margin-bottom:16px;
}
.form-card-header h3{margin:0;font-size:1.5rem}
.btn-close-form{
  background:var(--naranja);border:3px solid var(--negro);border-radius:8px;
  color:var(--blanco);font-weight:900;font-size:1rem;
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:2px 2px 0 var(--negro);transition:all .15s;flex-shrink:0;
}
.btn-close-form:hover{background:var(--naranja-dark);transform:translate(-1px,-1px)}

.form-group{margin-bottom:13px}
.form-group label{display:block;font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
input[type="text"],input[type="email"],input[type="password"],
input[type="tel"],input[type="number"],select,textarea{
  width:100%;padding:10px 13px;
  background:var(--blanco);border:3px solid var(--naranja);border-radius:10px;
  color:var(--negro);font-family:var(--f-body);font-weight:600;font-size:.9rem;
  outline:none;transition:border-color .2s,box-shadow .2s;
  box-shadow:2px 2px 0 var(--naranja);
}
input:focus,select:focus,textarea:focus{border-color:var(--negro);box-shadow:3px 3px 0 var(--negro)}
select{cursor:pointer}
textarea{resize:vertical;min-height:80px}
.precio-box{
  margin:13px 0;padding:13px 16px;
  background:var(--naranja);border:3px solid var(--negro);border-radius:10px;
  color:var(--blanco);font-family:var(--f-title);font-size:1rem;letter-spacing:.04em;
  box-shadow:3px 3px 0 var(--negro);
}

/* ══ REVIEWS CARD ═══════════════════════════════════════════ */
.reviews-card{
  background:var(--azul-light);border:var(--bw) solid var(--naranja);
  border-radius:var(--r);box-shadow:var(--sh);padding:20px 18px;
}
.reviews-card h4{font-family:var(--f-title);font-size:1.4rem;text-transform:uppercase;margin-bottom:12px;border-bottom:3px solid var(--naranja);padding-bottom:7px}
.review-item{background:var(--blanco);border:3px solid var(--naranja);border-radius:12px;padding:12px 14px;margin-bottom:10px;box-shadow:3px 3px 0 var(--naranja)}
.review-item .stars{color:#f59e0b;font-size:.95rem;margin-bottom:5px}
.review-item p{font-size:.82rem;font-style:italic;margin-bottom:8px}
.review-item .user{display:flex;align-items:center;gap:8px}
.review-item .user img{width:30px;height:30px;border-radius:50%;border:2px solid var(--naranja)}
.review-item .user span{font-weight:700;font-size:.82rem}
.wa-box{margin-top:12px;background:var(--blanco);border:3px solid var(--naranja);border-radius:12px;padding:12px;text-align:center;box-shadow:3px 3px 0 var(--naranja)}
.wa-box p{font-size:.82rem;margin-bottom:8px;font-weight:600}

/* ══ COTIZADOR BANNER ════════════════════════════════════════ */
.cot-banner{
  background:var(--azul-light);border:var(--bw) solid var(--naranja);
  border-radius:var(--r-lg);box-shadow:var(--sh);
  display:flex;align-items:center;justify-content:space-between;padding:36px 40px;gap:24px;
}
.cot-banner h3{font-size:1.6rem;margin-bottom:6px}
.cot-banner p{font-size:.9rem;margin-bottom:16px}
.cot-banner img{width:160px;filter:drop-shadow(4px 4px 0 rgba(0,0,0,.2))}

/* ══ BUTTONS ════════════════════════════════════════════════ */
.btn-primary,.btn-secondary,.btn-success,.btn-danger,.btn-warning,.btn-info{
  display:inline-flex;align-items:center;gap:6px;
  padding:11px 22px;border-radius:12px;border:3px solid var(--negro);cursor:pointer;
  font-family:var(--f-title);font-size:1rem;letter-spacing:.05em;text-transform:uppercase;
  text-decoration:none;transition:all .15s;white-space:nowrap;box-shadow:4px 4px 0 var(--negro);
}
.btn-primary{background:var(--naranja);color:var(--blanco)}
.btn-primary:hover{background:var(--naranja-dark);transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--negro);color:var(--blanco)}
.btn-secondary{background:var(--azul-light);color:var(--negro)}
.btn-secondary:hover{background:var(--blanco);transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--negro);color:var(--negro)}
.btn-success{background:#22c55e;color:var(--blanco)}
.btn-success:hover{background:#16a34a;color:var(--blanco);transform:translate(-2px,-2px)}
.btn-danger{background:#ef4444;color:var(--blanco)}
.btn-danger:hover{background:#dc2626;color:var(--blanco);transform:translate(-2px,-2px)}
.btn-warning{background:#f59e0b;color:var(--negro)}
.btn-warning:hover{background:#d97706;transform:translate(-2px,-2px)}
.btn-info{background:#0ea5e9;color:var(--blanco)}
.btn-info:hover{background:#0284c7;color:var(--blanco);transform:translate(-2px,-2px)}
.btn-sm{padding:7px 14px;font-size:.85rem;border-radius:8px}
.btn-full{width:100%;justify-content:center}

/* ══ FOOTER ════════════════════════════════════════════════ */
.footer-pro{
  background:var(--negro);border:var(--bw) solid var(--naranja);
  border-radius:var(--r-lg);box-shadow:var(--sh);
  display:flex;justify-content:center;gap:32px;padding:22px 28px;flex-wrap:wrap;
}
.footer-pro .fi{font-family:var(--f-title);font-size:.95rem;letter-spacing:.05em;color:var(--naranja);display:flex;align-items:center;gap:7px;text-transform:uppercase}
.footer-copy{background:var(--negro);text-align:center;padding:0 20px 18px;color:#aaa;font-size:.77rem;border-radius:0 0 var(--r-lg) var(--r-lg);margin-top:-14px}

/* ══ ALERTS / BADGES ════════════════════════════════════════ */
.alert{padding:12px 16px;border-radius:10px;margin-bottom:14px;font-size:.88rem;font-weight:700;border:3px solid}
.alert-error{background:#fee2e2;border-color:#dc2626;color:#7f1d1d}
.alert-success{background:#dcfce7;border-color:#16a34a;color:#14532d}
.alert-info{background:#dbeafe;border-color:#2563eb;color:#1e3a8a}
.alert-warning{background:#fef3c7;border-color:#d97706;color:#78350f}
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:50px;font-size:.73rem;font-weight:700;border:2px solid}
.badge-warning{background:#fef3c7;color:#92400e;border-color:#fde68a}
.badge-info{background:#dbeafe;color:#1e40af;border-color:#bfdbfe}
.badge-primary{background:#fff7ed;color:#9a3412;border-color:#fed7aa}
.badge-success{background:#dcfce7;color:#14532d;border-color:#bbf7d0}
.badge-danger{background:#fee2e2;color:#7f1d1d;border-color:#fecaca}

/* ══ TABLA ══════════════════════════════════════════════════ */
.table-wrap{overflow-x:auto;border-radius:var(--r);border:4px solid var(--naranja);background:var(--blanco);box-shadow:var(--sh)}
table{width:100%;border-collapse:collapse}
thead tr{background:var(--naranja)}
thead th{padding:12px 14px;text-align:left;font-family:var(--f-title);font-size:.88rem;letter-spacing:.06em;color:var(--blanco);text-transform:uppercase;white-space:nowrap}
tbody tr{border-top:2px solid var(--azul-light);transition:background .15s}
tbody tr:hover{background:var(--azul-light)}
tbody td{padding:11px 14px;font-size:.88rem;font-weight:500;vertical-align:middle}

/* ══ AUTH PAGES ═════════════════════════════════════════════ */
.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:30px;background:var(--azul)}
.auth-box{background:var(--azul-light);border:5px solid var(--naranja);border-radius:var(--r-lg);padding:36px 32px;width:100%;max-width:420px;box-shadow:var(--sh)}
.auth-box .auth-logo{text-align:center;margin-bottom:22px}
.auth-box .auth-logo img{width:60px;margin:0 auto 10px;display:block;border:3px solid var(--naranja);border-radius:12px}
.auth-box .auth-logo h2{font-family:var(--f-title);font-size:1.9rem;text-transform:uppercase}
.auth-box .auth-logo p{font-size:.82rem;color:#555}

/* ══ DASHBOARD / ADMIN ══════════════════════════════════════ */
.dash-layout{display:grid;grid-template-columns:220px 1fr;min-height:100vh;background:var(--azul);gap:0}
.sidebar{background:#5b21b6;border-right:5px solid var(--naranja);padding:20px 14px;display:flex;flex-direction:column;gap:5px;position:sticky;top:0;height:100vh;overflow-y:auto}
.sidebar .logo{display:flex;align-items:center;gap:8px;padding:0 8px 18px;border-bottom:3px solid var(--naranja);margin-bottom:14px;font-family:var(--f-title);font-size:.9rem;color:var(--naranja);text-transform:uppercase;letter-spacing:.05em}
.sidebar .logo img{width:32px;border:2px solid var(--naranja);border-radius:8px}
.sidebar a{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:10px;color:#fff;font-family:var(--f-title);font-size:.9rem;letter-spacing:.05em;text-transform:uppercase;transition:all .2s;border:2px solid transparent;text-decoration:none}
.sidebar a:hover,.sidebar a.active{background:var(--naranja);color:#fff;border-color:#3b0764;}
.sidebar .icon{font-size:1rem}
.dash-content{padding:28px;overflow-y:auto}
.dash-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:10px}
.dash-header h2{font-family:var(--f-title);font-size:1.9rem;text-transform:uppercase}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:24px}
.stat-card{background:var(--azul-light);border:4px solid var(--naranja);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:6px;box-shadow:var(--sh)}
.stat-card .stat-icon{font-size:1.8rem}
.stat-card .stat-value{font-family:var(--f-title);font-size:2rem;color:var(--negro)}
.stat-card .stat-label{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#555}

/* ══ PAGE HEADER / MODAL / TIMELINE ════════════════════════ */
.page-header{margin-bottom:22px}
.page-header h2{font-family:var(--f-title);font-size:1.9rem;text-transform:uppercase;margin-bottom:2px}
.page-header p{font-size:.88rem}
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:2000;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(4px)}
.modal-overlay.open{display:flex}
.modal{background:var(--azul-light);border:5px solid var(--naranja);border-radius:var(--r-lg);padding:28px;width:100%;max-width:480px;box-shadow:var(--sh)}
.modal h3{font-family:var(--f-title);font-size:1.5rem;text-transform:uppercase;margin-bottom:16px}
.modal-footer{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}
.timeline{list-style:none;padding:0;position:relative}
.timeline::before{content:'';position:absolute;left:20px;top:0;bottom:0;width:3px;background:var(--naranja)}
.timeline li{position:relative;padding:0 0 16px 46px}
.timeline li::before{content:attr(data-icon);position:absolute;left:8px;top:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--azul-light);border:2px solid var(--naranja);font-size:.75rem}
.timeline .tl-date{font-size:.75rem;color:#555;margin-bottom:3px;font-weight:600}
.timeline .tl-text{font-size:.88rem;font-weight:500}

/* ══ COTIZADOR PAGE ══════════════════════════════════════════ */
.cotizador-page{max-width:900px;margin:0 auto;padding:0 20px 48px}
.cotizador-controls{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:14px}
.resultado-tabla{width:100%;border-collapse:collapse;background:var(--blanco);border-radius:10px;overflow:hidden;border:4px solid var(--naranja);box-shadow:var(--sh)}
.resultado-tabla th{background:var(--naranja);padding:10px 14px;text-align:left;font-family:var(--f-title);font-size:.88rem;color:var(--blanco);text-transform:uppercase;letter-spacing:.05em}
.resultado-tabla td{padding:10px 14px;border-top:2px solid var(--azul-light);font-size:.9rem;font-weight:500}
.precio-col{font-weight:800;color:var(--naranja);font-family:var(--f-title);font-size:1rem}

/* ══ RESPONSIVE ═════════════════════════════════════════════ */
@media(max-width:768px){
  .navbar{padding:10px 14px}
  .navbar nav .nav-btn{width:72px;min-height:48px;font-size:.78rem}
  .cot-banner{flex-direction:column;text-align:center;padding:28px 20px}
  .cot-banner img{width:130px}
  .dash-layout{grid-template-columns:1fr}
  .sidebar{display:none}
  .dash-content{padding:16px 12px}
}

/* ══ UTILITIES ══════════════════════════════════════════════ */
.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}
.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}
.text-center{text-align:center}.text-right{text-align:right}
.flex{display:flex}
.flex-between{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.gap-2{gap:12px}.w-full{width:100%}.hidden{display:none}


/* ══ NAVBAR USER BADGE ══════════════════════════════════════ */
.nav-user-badge {
  font-family: var(--f-title);
  font-size: .85rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 12px;
  border: 3px solid var(--negro);
  box-shadow: 3px 3px 0 var(--negro);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}
.nav-user-badge span { opacity: .75; font-size: .75rem; }
.nav-badge-admin   { background: #ef4444; color: #fff; border-color: var(--negro); }
.nav-badge-msg     { background: #7c3aed; color: #fff; border-color: var(--negro); }
.nav-badge-cliente { background: var(--azul-light); color: var(--negro); border-color: var(--naranja); }

/* ══ FOOTER BANNER — igual estilo que navbar ════════════════ */
.footer-banner {
  background: var(--negro);
  border: 6px solid var(--naranja);
  border-radius: var(--r-lg);
  box-shadow: 5px 5px 0 var(--naranja);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-info {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}
.footer-banner .fi {
  font-family: var(--f-title);
  font-size: .9rem;
  letter-spacing: .05em;
  color: var(--naranja);
  display: flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
  white-space: nowrap;
}
.footer-banner .fi.footer-dev {
  color: #fff;
  border-left: 2px solid var(--naranja);
  padding-left: 20px;
  font-size: .82rem;
  text-transform: none;
  font-family: var(--f-body);
  letter-spacing: 0;
}
.footer-banner .fi.footer-dev strong { color: var(--naranja); }
/* ocultar el antiguo footer-copy si quedara */
.footer-copy { display: none; }
/* ══ SIDEBAR MÓVIL — FIX ════════════════════════════════════ */
.mob-menu-btn {
  display: none;
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 1100;
  background: var(--naranja);
  border: 3px solid var(--negro);
  border-radius: 12px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 1.2rem;
  box-shadow: 3px 3px 0 var(--negro);
}
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 1050;
}
@media(max-width:768px) {
  .mob-menu-btn { display: flex; align-items: center; }
  .sidebar {
    position: fixed !important;
    left: -240px;
    top: 0;
    width: 220px !important;
    height: 100vh;
    z-index: 1100;
    transition: left .3s ease;
    display: flex !important;
  }
  .sidebar.open { left: 0; }
  .sidebar-overlay.open { display: block; }
  .dash-content { padding: 16px 12px; padding-top: 60px; }
}

/* ══ FORMULARIOS — mejoras globales ════════════════════════ */
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: .82rem; font-weight: 700; margin-bottom: 5px; text-transform: uppercase; letter-spacing: .04em; color: #555; }
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px 14px;
  border: 3px solid var(--negro);
  border-radius: 10px;
  font-family: var(--f-body);
  font-size: .9rem;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
  box-shadow: 2px 2px 0 rgba(0,0,0,.08);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--naranja);
  box-shadow: 3px 3px 0 var(--naranja);
}

/* ══ CARDS NÍTIDAS ══════════════════════════════════════════ */
.card {
  background: var(--azul-light);
  border: 4px solid var(--naranja);
  border-radius: var(--r);
  padding: 20px;
  box-shadow: var(--sh);
}
.card-white {
  background: #fff;
  border: 4px solid var(--negro);
  border-radius: var(--r);
  padding: 20px;
  box-shadow: var(--sh-dark);
}

/* ══ ADMIN TABLE — estilos compartidos admin ════════════════ */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
}
.admin-table thead tr { background: var(--naranja); }
.admin-table thead th {
  padding: 11px 14px;
  text-align: left;
  font-family: var(--f-title);
  font-size: .85rem;
  letter-spacing: .05em;
  color: #fff;
  text-transform: uppercase;
  white-space: nowrap;
  border: none;
}
.admin-table tbody tr {
  border-bottom: 2px solid rgba(249,115,22,.1);
  transition: background .12s;
}
.admin-table tbody tr:hover { background: rgba(91,200,245,.12); }
.admin-table tbody td {
  padding: 10px 14px;
  font-size: .86rem;
  font-weight: 500;
  vertical-align: middle;
  border: none;
}

/* ══ FORM CONTROL — estilos admin ══════════════════════════ */
.form-control {
  width: 100%;
  padding: 9px 13px;
  border: 2px solid rgba(249,115,22,.3);
  border-radius: 9px;
  font-family: var(--f-body);
  font-size: .88rem;
  background: #fff;
  color: var(--negro);
  transition: border-color .15s, box-shadow .15s;
}
.form-control:focus {
  outline: none;
  border-color: var(--naranja);
  box-shadow: 0 0 0 3px rgba(249,115,22,.15);
}

/* ══ CARD dark admin ════════════════════════════════════════ */
.card {
  background: rgba(255,255,255,.95);
  border: 3px solid rgba(249,115,22,.25);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 3px 3px 0 rgba(249,115,22,.15);
  margin-bottom: 18px;
}
.card h3 {
  font-family: var(--f-title);
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 14px;
  color: var(--negro);
}