/* ============================================================
   VÖLIÁ SYSTEMS — Intranet CSS
   ============================================================ */

:root {
  --bg:       #07090f;
  --surface:  #0d1117;
  --surface2: #131720;
  --surface3: #181d27;
  --border:   #1e2535;
  --border2:  #252d40;
  --accent:   #6c63ff;
  --accent2:  #00d4ff;
  --text:     #e8edf5;
  --text2:    #a0aec0;
  --muted:    #566070;
  --ok:       #10b981;
  --warn:     #f59e0b;
  --err:      #ef4444;
  --nav-w:    170px;
  --nav-h:    60px;
  --radius:   10px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ─── LAYOUT ─── */
.layout { display: flex; min-height: 100vh; }
.sidenav {
  width: var(--nav-w); flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  position: fixed; top: 0; left: 0; bottom: 0;
  z-index: 50; overflow-y: auto;
}
.main-wrap {
  margin-left: var(--nav-w);
  flex: 1; display: flex; flex-direction: column;
  min-height: 100vh;
}
.topbar {
  height: var(--nav-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px; position: sticky; top: 0; z-index: 40;
}
.main-content { padding: 28px; flex: 1; }

/* ─── SIDENAV ─── */
.nav-brand {
  padding: 20px 18px 16px;
  border-bottom: 1px solid var(--border);
}
.nav-brand-name {
  font-size: 15px; font-weight: 800; letter-spacing: -.01em;
  color: var(--text); line-height: 1.2;
}
.nav-brand-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.nav-section { padding: 16px 12px 4px; }
.nav-section-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--muted); padding: 0 6px;
}
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 8px; margin-bottom: 2px;
  color: var(--text2); text-decoration: none; font-size: 13px;
  font-weight: 500; transition: all .12s;
}
.nav-item:hover { background: var(--surface2); color: var(--text); }
.nav-item.activo { background: var(--surface2); color: var(--text); font-weight: 600; }
.nav-item.activo .nav-dot { background: var(--accent); }
.nav-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border2); flex-shrink: 0; transition: background .12s; }
.nav-item svg { width: 16px; height: 16px; flex-shrink: 0; opacity: .7; }
.nav-item.activo svg { opacity: 1; }
.nav-bottom {
  margin-top: auto; padding: 12px;
  border-top: 1px solid var(--border);
}

/* ─── TOPBAR ─── */
.topbar-title { font-size: 16px; font-weight: 700; }
.topbar-right { display: flex; align-items: center; gap: 16px; }
.topbar-user { font-size: 13px; color: var(--muted); }
.topbar-logout {
  font-size: 13px; color: var(--muted); text-decoration: none;
  padding: 6px 14px; border: 1px solid var(--border);
  border-radius: 8px; transition: all .12s;
}
.topbar-logout:hover { color: var(--text); border-color: var(--border2); }

/* ─── FLASH ─── */
.flash {
  padding: 12px 16px; border-radius: var(--radius);
  font-size: 13px; margin-bottom: 20px;
  display: flex; align-items: center; gap: 10px;
}
.flash.ok   { background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.3); color: #34d399; }
.flash.err  { background: rgba(239,68,68,.1);  border: 1px solid rgba(239,68,68,.3);  color: #f87171; }
.flash.warn { background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.3); color: #fbbf24; }

/* ─── PAGE HEADER ─── */
.page-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px; flex-wrap: wrap; gap: 12px;
}
.page-header h1 { font-size: 20px; font-weight: 800; }
.page-header-sub { font-size: 13px; color: var(--muted); margin-top: 2px; }

/* ─── BUTTONS ─── */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px; border-radius: 8px; font-size: 13px;
  font-weight: 600; cursor: pointer; border: none;
  text-decoration: none; transition: all .12s; white-space: nowrap;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { opacity: .88; }
.btn-secondary { background: var(--surface2); color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { border-color: var(--border2); }
.btn-danger { background: rgba(239,68,68,.1); color: #f87171; border: 1px solid rgba(239,68,68,.3); }
.btn-danger:hover { background: rgba(239,68,68,.2); }
.btn-ok { background: rgba(16,185,129,.1); color: #34d399; border: 1px solid rgba(16,185,129,.3); }
.btn-ok:hover { background: rgba(16,185,129,.2); }
.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn svg { width: 14px; height: 14px; }

/* ─── CARDS / SURFACES ─── */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px;
}
.card-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted); margin-bottom: 16px;
}

/* ─── STAT CARDS ─── */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 16px; margin-bottom: 24px; }
.stat-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px;
}
.stat-label { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.stat-val { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.stat-sub { font-size: 12px; color: var(--muted); margin-top: 4px; }
.stat-card.accent  .stat-val { color: var(--accent2); }
.stat-card.ok      .stat-val { color: var(--ok); }
.stat-card.warn    .stat-val { color: var(--warn); }
.stat-card.err     .stat-val { color: var(--err); }

/* ─── TABLES ─── */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
thead th {
  text-align: left; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
tbody td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--surface2); }
.td-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* ─── BADGES ─── */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; padding: 3px 10px;
  border-radius: 99px; border: 1px solid; white-space: nowrap;
}
.badge-ok      { background: rgba(16,185,129,.1);  border-color: rgba(16,185,129,.3);  color: #34d399; }
.badge-warn    { background: rgba(245,158,11,.1);  border-color: rgba(245,158,11,.3);  color: #fbbf24; }
.badge-err     { background: rgba(239,68,68,.1);   border-color: rgba(239,68,68,.3);   color: #f87171; }
.badge-blue    { background: rgba(108,99,255,.1);  border-color: rgba(108,99,255,.3);  color: #a5b4fc; }
.badge-muted   { background: rgba(86,96,112,.1);   border-color: rgba(86,96,112,.3);   color: var(--muted); }
.badge-cyan    { background: rgba(0,212,255,.1);   border-color: rgba(0,212,255,.3);   color: var(--accent2); }

/* ─── FORMS ─── */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group.full { grid-column: 1 / -1; }
label { font-size: 12px; font-weight: 600; color: var(--muted); }
label span { color: var(--accent2); }
input[type=text], input[type=email], input[type=tel], input[type=number],
input[type=date], input[type=password], textarea, select {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text); font-size: 13px;
  padding: 9px 12px; outline: none; transition: border-color .12s;
  font-family: inherit; width: 100%;
}
input:focus, textarea:focus, select:focus { border-color: var(--accent); }
textarea { resize: vertical; min-height: 80px; }
select option { background: var(--surface2); }
.form-actions { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }

/* ─── LINEAS (presupuestos/facturas) ─── */
.lineas-table { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
.lineas-table th {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  color: var(--muted); padding: 8px 10px; text-align: left;
  border-bottom: 1px solid var(--border);
}
.lineas-table td { padding: 6px 4px; vertical-align: middle; }
.lineas-table input { padding: 7px 10px; }
.lineas-table .td-desc { width: 40%; }
.lineas-table .td-num  { width: 12%; }
.lineas-table .td-sub  { width: 14%; text-align: right; color: var(--text2); padding-right: 10px; }
.lineas-table .td-del  { width: 40px; text-align: center; }
.btn-del-linea {
  background: none; border: none; color: var(--err);
  cursor: pointer; font-size: 16px; padding: 4px 8px; line-height: 1;
}
.totales-box {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 20px;
  display: flex; flex-direction: column; gap: 8px;
  max-width: 320px; margin-left: auto;
}
.totales-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--text2); }
.totales-row.total { font-size: 16px; font-weight: 800; color: var(--text); border-top: 1px solid var(--border); padding-top: 8px; margin-top: 4px; }
.totales-row.total span:last-child { color: var(--accent2); }

/* ─── MISC ─── */
.divider { border: none; border-top: 1px solid var(--border); margin: 20px 0; }
.text-muted { color: var(--muted); }
.text-right { text-align: right; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mb-4 { margin-bottom: 16px; }
.gap-2 { gap: 8px; }
.flex { display: flex; }
.flex-center { display: flex; align-items: center; }
.fw-bold { font-weight: 700; }

/* ─── SEARCH BAR ─── */
.search-bar {
  display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap;
}
.search-bar input, .search-bar select {
  flex: 1; min-width: 160px; max-width: 280px;
}
.search-bar .btn { flex-shrink: 0; }

/* ─── FICHA CLIENTE ─── */
.ficha-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ficha-item { display: flex; flex-direction: column; gap: 3px; }
.ficha-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.ficha-val { font-size: 14px; color: var(--text); }

/* ─── RESPONSIVE ─── */
@media (max-width: 900px) {
  .sidenav { display: none; }
  .main-wrap { margin-left: 0; }
  .form-grid, .form-grid-3, .ficha-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr; }
  .main-content { padding: 16px; }
}

.login-logo img{
  width:220px;
  max-width:100%;
  height:auto;
  display:block;
  margin:0 auto 28px;
}

.nav-logo-img{
  width:165px;
  max-width:100%;
  height:auto;
  display:block;
  margin-bottom:8px;
}

.nav-brand{
    padding:18px 0 10px !important;
    min-height:120px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
}

/* ===== LOGO SIDEBAR VÖLIÁ ===== */
.nav-brand{
    padding:18px 0 10px !important;
    min-height:120px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
}

.nav-brand-logo{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  width:100% !important;
  height:48px !important;
  overflow:hidden !important;
}

.nav-brand-logo img{
    width:84px !important;
    height:84px !important;
    max-width:84px !important;
    max-height:84px !important;
    object-fit:contain !important;
    display:block;
}

.nav-brand-name{
  display:none !important;
}

.nav-brand-sub{
  margin-top:8px !important;
  font-size:11px !important;
}

/* ===== LOGO SIDEBAR AJUSTE FINAL ===== */
.nav-brand{
    padding:18px 0 10px !important;
    min-height:120px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
}

.nav-brand-logo{
  height:54px !important;
}

.nav-brand-logo img{
    width:84px !important;
    height:84px !important;
    max-width:84px !important;
    max-height:84px !important;
    object-fit:contain !important;
    display:block;
}

.nav-brand-sub{
  margin-top:8px !important;
}

/* ===== OVERRIDE FINAL LOGO SIDEBAR LIMPIO ===== */
.sidenav .nav-brand{
  padding:20px 0 16px !important;
  min-height:128px !important;
  height:auto !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  overflow:hidden !important;
}

.sidenav .nav-brand-logo{
  width:100% !important;
  height:auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:visible !important;
}

.sidenav .nav-brand-logo img{
  width:92px !important;
  height:92px !important;
  max-width:92px !important;
  max-height:92px !important;
  object-fit:contain !important;
  display:block !important;
}

.sidenav .nav-brand-sub{
  margin-top:8px !important;
  font-size:10px !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
}

/* ===== TEMA FINAL VÖLIÁ: NEGRO / BLANCO / DORADO ===== */

:root{
  --bg:#050505 !important;
  --surface:#0b0b0b !important;
  --surface2:#111111 !important;
  --surface3:#171717 !important;
  --border:#242424 !important;
  --border2:#343434 !important;

  --text:#ffffff !important;
  --text2:#d6d6d6 !important;
  --muted:#8a8a8a !important;

  --accent:#d4af37 !important;
  --accent2:#f5d76e !important;

  --ok:#22c55e !important;
  --warn:#d4af37 !important;
  --err:#ef4444 !important;
}

body,
.main-wrap,
.main-content{
  background:#050505 !important;
  color:#ffffff !important;
}

.sidenav,
.topbar,
.card,
.stat-card{
  background:#0b0b0b !important;
  border-color:#242424 !important;
}

input,
textarea,
select{
  background:#111111 !important;
  color:#ffffff !important;
  border-color:#2a2a2a !important;
}

input:focus,
textarea:focus,
select:focus{
  border-color:#d4af37 !important;
  box-shadow:0 0 0 3px rgba(212,175,55,.12) !important;
}

label,
.stat-label,
.card-title,
.nav-section-label,
.page-header-sub,
.topbar-user,
.text-muted,
td,
th{
  color:#8a8a8a !important;
}

h1,h2,h3,h4,
.page-header h1,
.topbar-title,
.nav-item,
.fw-bold,
.stat-val{
  color:#ffffff !important;
}

.nav-item{
  color:#d6d6d6 !important;
}

.nav-item:hover,
.nav-item.activo{
  background:#151515 !important;
  color:#ffffff !important;
}

.btn-primary,
button[type="submit"],
input[type="submit"]{
  background:linear-gradient(135deg,#d4af37,#f5d76e) !important;
  color:#111111 !important;
  border:none !important;
  font-weight:700 !important;
}

.btn-secondary{
  background:#111111 !important;
  color:#f5d76e !important;
  border:1px solid #d4af37 !important;
}

.btn-primary:hover,
button[type="submit"]:hover,
input[type="submit"]:hover{
  opacity:1 !important;
  filter:brightness(1.05) !important;
}

.badge-ok{
  background:rgba(34,197,94,.10) !important;
  border-color:rgba(34,197,94,.35) !important;
  color:#4ade80 !important;
}

.badge-warn{
  background:rgba(212,175,55,.10) !important;
  border-color:rgba(212,175,55,.35) !important;
  color:#f5d76e !important;
}

.badge-blue,
.badge-cyan{
  background:rgba(212,175,55,.10) !important;
  border-color:rgba(212,175,55,.35) !important;
  color:#f5d76e !important;
}

a{
  color:#f5d76e;
}

table thead th{
  color:#8a8a8a !important;
  border-bottom-color:#242424 !important;
}

table tbody td{
  color:#d6d6d6 !important;
  border-bottom-color:#242424 !important;
}

tbody tr:hover td{
  background:#111111 !important;
}


/* ===== AJUSTE FINAL CABECERA SIDEBAR ===== */
.sidenav .nav-brand{
  height:126px !important;
  min-height:126px !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-bottom:1px solid var(--border) !important;
}

.sidenav .nav-brand-logo{
  width:100% !important;
  height:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.sidenav .nav-brand-logo img{
  width:92px !important;
  height:92px !important;
  max-width:92px !important;
  max-height:92px !important;
  object-fit:contain !important;
}

/* ===== ACCIONES TABLAS ===== */
.td-actions{
  display:flex !important;
  gap:8px !important;
  align-items:center !important;
  flex-wrap:nowrap !important;
}

td:last-child{
  min-width:180px !important;
}

.btn-danger{
  background:#1a0b0b !important;
  color:#ff6b6b !important;
  border:1px solid rgba(239,68,68,.45) !important;
}

.btn-danger:hover{
  background:#2a0f0f !important;
}

/* ===== FIX FECHAS MODAL AGENDA ===== */
.modal input[type="datetime-local"],
input[type="datetime-local"]{
  min-width:220px !important;
  height:42px !important;
  padding:9px 12px !important;
  background:#111 !important;
  color:#fff !important;
  border:1px solid #2a2a2a !important;
  border-radius:8px !important;
  font-family:Inter,system-ui,sans-serif !important;
  font-size:13px !important;
}

.modal .form-grid,
.modal .form-grid-2{
  grid-template-columns:1fr 1fr !important;
  gap:16px !important;
}

@media (max-width: 700px){
  .modal .form-grid,
  .modal .form-grid-2{
    grid-template-columns:1fr !important;
  }

  input[type="datetime-local"]{
    min-width:100% !important;
  }
}

/* ===== FIX MODAL AGENDA MÁS ANCHO ===== */
.modal-content,
.modal .card,
.modal-box{
  width:560px !important;
  max-width:560px !important;
}

.modal input[type="datetime-local"],
input[type="datetime-local"]{
  width:100% !important;
  min-width:0 !important;
}

.modal .form-grid,
.modal .form-grid-2{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:16px !important;
}

@media (max-width:700px){
  .modal-content,
  .modal .card,
  .modal-box{
    width:calc(100vw - 32px) !important;
    max-width:calc(100vw - 32px) !important;
  }
}

/* ===== ESPACIADO TRAS QUITAR H1 DUPLICADOS ===== */
.main-content{
  padding-top:32px !important;
}

.main-content > .card:first-child,
.main-content > form:first-child,
.main-content > .form-card:first-child{
  margin-top:18px !important;
}

.main-content > .card{
  margin-bottom:20px !important;
}

/* ===== FIX ANCHO CONTENIDO FORMULARIOS ===== */
.main-content{
  padding-left:32px !important;
  padding-right:32px !important;
}

.main-content > .card,
.main-content > form,
.main-content > .form-card{
  max-width:calc(100% - 0px) !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

@media (max-width:760px){
  .main-content{
    padding-left:20px !important;
    padding-right:20px !important;
  }
}


/* ===== QUITAR ESPACIO SUPERIOR ===== */
.main-content{
    padding-top:8px !important;
}

/* ===== WRAPPER FORMULARIOS NUEVO PRESUPUESTO / FACTURA ===== */
.form-page-wrap{
  padding-left:32px !important;
  padding-right:32px !important;
}

.form-page-wrap > .card{
  margin-left:0 !important;
  margin-right:0 !important;
}

/* ===== LOGO LOGIN ===== */
.login-logo-img{
  width:120px !important;
  height:120px !important;
  object-fit:contain !important;
  display:block !important;
  margin:0 0 24px 0 !important;
}

/* ===== LOGO LOGIN ===== */
.login-logo-img{
    width:140px !important;
    max-width:140px !important;
    height:auto !important;
    max-height:70px !important;
    object-fit:contain !important;
    display:block !important;
    margin:0 auto 24px auto !important;
}

/* ===== WRAPPER DASHBOARD ===== */
.dashboard-page-wrap{
  padding-left:32px !important;
  padding-right:32px !important;
}

.dashboard-page-wrap .stats-grid,
.dashboard-page-wrap .dashboard-grid,
.dashboard-page-wrap > .card{
  margin-left:0 !important;
  margin-right:0 !important;
}

/* ===== FIX DASHBOARD BOTÓN NUEVA FACTURA ===== */
.dashboard-page-wrap > .btn,
.dashboard-page-wrap > a.btn{
  margin-bottom:28px !important;
}

.dashboard-page-wrap .stats-grid{
  margin-top:0 !important;
  clear:both !important;
}

/* ===== DASHBOARD: botón alineado con las tarjetas ===== */
.dashboard-page-wrap > a.btn,
.dashboard-page-wrap > .btn{
    display:inline-flex !important;
    margin:0 0 24px 0 !important;
    align-self:flex-start !important;
}

.dashboard-page-wrap .stats-grid{
    margin-top:0 !important;
}

/* ===== DASHBOARD BOTÓN NUEVA FACTURA ALINEADO ===== */
.dashboard-page-wrap > a.btn.btn-primary{
  margin-left:0 !important;
  margin-bottom:24px !important;
}

/* ===== Dashboard: botón Nueva factura a la derecha ===== */
.dashboard-page-wrap > a.btn.btn-primary{
    display:flex !important;
    width:max-content !important;
    margin:0 0 24px auto !important;
}

/* ===== Dashboard: separación superior botón ===== */
.dashboard-page-wrap > a.btn.btn-primary{
    margin-top:20px !important;
    margin-right:0 !important;
    margin-bottom:24px !important;
    margin-left:auto !important;
}

/* ===== Espacio superior Dashboard ===== */
.dashboard-page-wrap{
    padding-top:24px !important;
}

.dashboard-page-wrap > a.btn.btn-primary{
    margin:0 0 24px auto !important;
}

/* ===== Dashboard acciones superiores ===== */
.dashboard-actions{
  display:flex !important;
  justify-content:flex-end !important;
  align-items:center !important;
  padding-top:24px !important;
  margin-bottom:24px !important;
}

.dashboard-actions .btn{
  margin:0 !important;
}