/* ============================================================
   ULTRACASAS ERP — PANEL ADMINISTRATIVO
   Reusa tokens de main.css (navy/gold/bone) en clave "trabajo"
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');

:root{
  --navy:#0A1628; --navy-mid:#1E3A5F; --gold:#C9A84C; --gold-lt:#E8C96A;
  --bone:#F8F6F1; --light:#E8E4DD; --muted:#8B8578; --white:#FFFFFF;
  --danger:#D94F3D; --success:#2D9B6F; --warning:#E0A526; --info:#3B82C4;
  --sidebar-w:248px;
  --radius-sm:8px; --radius-md:12px; --radius-lg:18px;
  --shadow-sm:0 1px 3px rgba(10,22,40,.08);
  --shadow-md:0 4px 16px rgba(10,22,40,.10);
  --shadow-lg:0 12px 32px rgba(10,22,40,.16);
  --transition:.2s cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:'Inter',system-ui,sans-serif; background:#F1EFE9; color:var(--navy);
  display:flex; min-height:100vh;
}
a{color:inherit;text-decoration:none;} button{font-family:inherit;cursor:pointer;border:none;background:none;}
ul{list-style:none;} img{max-width:100%;display:block;}
::-webkit-scrollbar{width:6px;height:6px;} ::-webkit-scrollbar-thumb{background:var(--light);border-radius:99px;}

/* ─── SIDEBAR ─────────────────────────────────────────────── */
#sidebar{
  width:var(--sidebar-w); background:var(--navy); color:rgba(255,255,255,.85);
  flex-shrink:0; height:100vh; position:sticky; top:0;
  display:flex; flex-direction:column; z-index:200;
  transition:transform var(--transition);
}
.sidebar-brand{
  display:flex; align-items:center; gap:10px; padding:22px 22px 18px;
  font-family:'Playfair Display',serif; font-size:1.25rem; font-weight:700; color:#fff;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.sidebar-brand-icon{ width:32px;height:32px;background:var(--gold);border-radius:7px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.sidebar-brand span{color:var(--gold);}

.sidebar-nav{ flex:1; overflow-y:auto; padding:16px 12px; }
.nav-section-title{ font-size:.68rem; text-transform:uppercase; letter-spacing:.1em;
  color:rgba(255,255,255,.35); padding:14px 12px 8px; font-weight:700; }
.sidebar-link{
  display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:var(--radius-sm);
  font-size:.86rem; font-weight:500; color:rgba(255,255,255,.7); margin-bottom:2px;
  transition:var(--transition); position:relative;
}
.sidebar-link svg{flex-shrink:0; opacity:.85;}
.sidebar-link:hover{ background:rgba(255,255,255,.06); color:#fff; }
.sidebar-link.active{ background:var(--gold); color:var(--navy); font-weight:700; }
.sidebar-link.active svg{opacity:1;}
.sidebar-link .badge-count{
  margin-left:auto; background:rgba(255,255,255,.15); color:#fff;
  font-size:.68rem; font-weight:700; padding:1px 7px; border-radius:99px;
}
.sidebar-link.active .badge-count{ background:var(--navy); color:var(--gold); }

.sidebar-user{
  padding:16px 18px; border-top:1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; gap:10px;
}
.sidebar-user img{ width:38px;height:38px;border-radius:50%; object-fit:cover; }
.sidebar-user-name{ font-size:.82rem; font-weight:600; color:#fff; }
.sidebar-user-role{ font-size:.7rem; color:rgba(255,255,255,.45); text-transform:capitalize; }
.sidebar-logout{ margin-left:auto; color:rgba(255,255,255,.5); transition:var(--transition); padding:6px; border-radius:6px; }
.sidebar-logout:hover{ color:var(--danger); background:rgba(255,255,255,.06); }

#sidebar-toggle{ display:none; }

/* ─── MAIN ────────────────────────────────────────────────── */
#main{ flex:1; min-width:0; display:flex; flex-direction:column; }

#topbar{
  height:68px; background:#fff; border-bottom:1px solid var(--light);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 28px; position:sticky; top:0; z-index:100;
}
.topbar-title{ font-size:1.15rem; font-weight:700; }
.topbar-breadcrumb{ font-size:.78rem; color:var(--muted); margin-top:2px; }
.topbar-right{ display:flex; align-items:center; gap:14px; }
.topbar-btn{
  width:38px;height:38px; border-radius:50%; background:var(--bone);
  display:flex;align-items:center;justify-content:center; color:var(--navy);
  transition:var(--transition); position:relative;
}
.topbar-btn:hover{ background:var(--light); }
.topbar-btn .dot{ position:absolute; top:7px; right:8px; width:8px;height:8px;border-radius:50%;
  background:var(--danger); border:2px solid #fff; }
.menu-toggle{ display:none; }

.erp-content{ padding:28px; flex:1; }

/* ─── KPI CARDS ───────────────────────────────────────────── */
.kpi-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; margin-bottom:28px; }
.kpi-card{
  background:#fff; border-radius:var(--radius-md); padding:22px 24px;
  box-shadow:var(--shadow-sm); display:flex; align-items:center; gap:16px;
  transition:var(--transition); border:1px solid transparent;
}
.kpi-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }
.kpi-icon{ width:50px;height:50px;border-radius:var(--radius-sm); display:flex;align-items:center;justify-content:center; flex-shrink:0; }
.kpi-icon.navy{ background:rgba(10,22,40,.08); color:var(--navy); }
.kpi-icon.gold{ background:rgba(201,168,76,.15); color:#A8843A; }
.kpi-icon.green{ background:rgba(45,155,111,.12); color:var(--success); }
.kpi-icon.blue{ background:rgba(59,130,196,.12); color:var(--info); }
.kpi-val{ font-family:'Playfair Display',serif; font-size:1.6rem; font-weight:700; line-height:1; }
.kpi-lbl{ font-size:.78rem; color:var(--muted); margin-top:4px; }
.kpi-delta{ font-size:.72rem; font-weight:700; margin-top:4px; display:inline-flex; align-items:center; gap:3px; }
.kpi-delta.up{ color:var(--success); } .kpi-delta.down{ color:var(--danger); }

/* ─── PANELS / CARDS ──────────────────────────────────────── */
.panel{
  background:#fff; border-radius:var(--radius-md); box-shadow:var(--shadow-sm);
  padding:24px; margin-bottom:24px;
}
.panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; flex-wrap:wrap; gap:10px; }
.panel-title{ font-size:1rem; font-weight:700; }
.panel-sub{ font-size:.78rem; color:var(--muted); margin-top:2px; }
.grid-2{ display:grid; grid-template-columns:2fr 1fr; gap:24px; }

/* ─── TABLE ───────────────────────────────────────────────── */
.table-wrap{ overflow-x:auto; }
table.data-table{ width:100%; border-collapse:collapse; font-size:.86rem; }
.data-table thead th{
  text-align:left; padding:12px 14px; font-size:.7rem; text-transform:uppercase;
  letter-spacing:.06em; color:var(--muted); border-bottom:2px solid var(--light); font-weight:700;
  white-space:nowrap;
}
.data-table tbody td{ padding:13px 14px; border-bottom:1px solid var(--light); vertical-align:middle; }
.data-table tbody tr{ transition:var(--transition); }
.data-table tbody tr:hover{ background:var(--bone); }
.data-table tbody tr:last-child td{ border-bottom:none; }

.cell-prop{ display:flex; align-items:center; gap:10px; }
.cell-prop img{ width:48px;height:48px;border-radius:8px;object-fit:cover; flex-shrink:0; }
.cell-prop-title{ font-weight:600; font-size:.85rem; }
.cell-prop-loc{ font-size:.74rem; color:var(--muted); }

.pill{ display:inline-flex; align-items:center; gap:5px; font-size:.7rem; font-weight:700;
  padding:4px 11px; border-radius:99px; text-transform:capitalize; white-space:nowrap;}
.pill-venta{ background:rgba(10,22,40,.08); color:var(--navy); }
.pill-renta{ background:rgba(201,168,76,.18); color:#A8843A; }
.pill-preventa{ background:rgba(108,92,231,.12); color:#6C5CE7; }
.pill-activo,.pill-completada,.pill-ganado{ background:rgba(45,155,111,.12); color:var(--success); }
.pill-inactivo,.pill-perdido{ background:rgba(217,79,61,.1); color:var(--danger); }
.pill-pendiente,.pill-nuevo{ background:rgba(224,165,38,.14); color:#A8780F; }
.pill-en_progreso,.pill-contactado{ background:rgba(59,130,196,.12); color:var(--info); }
.pill-calificado,.pill-negociacion{ background:rgba(108,92,231,.12); color:#6C5CE7; }

.row-actions{ display:flex; gap:6px; }
.icon-btn{
  width:32px;height:32px; border-radius:7px; display:flex;align-items:center;justify-content:center;
  background:var(--bone); color:var(--navy); transition:var(--transition); font-size:.85rem;
}
.icon-btn:hover{ background:var(--navy); color:#fff; }
.icon-btn.danger:hover{ background:var(--danger); color:#fff; }
.icon-btn.success:hover{ background:var(--success); color:#fff; }

/* ─── FORMS ───────────────────────────────────────────────── */
.form-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.form-grid.cols-3{ grid-template-columns:repeat(3,1fr); }
.f-group{ display:flex; flex-direction:column; gap:6px; }
.f-group.span-2{ grid-column:span 2; }
.f-group.span-3{ grid-column:span 3; }
.f-label{ font-size:.78rem; font-weight:600; color:var(--navy); }
.f-label .req{ color:var(--danger); }
.f-input,.f-select,.f-textarea{
  height:42px; border:1.5px solid var(--light); border-radius:var(--radius-sm);
  padding:0 13px; font-family:inherit; font-size:.86rem; color:var(--navy);
  background:var(--bone); outline:none; transition:border-color var(--transition); width:100%;
}
.f-select{ -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238B8578' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center; padding-right:34px; }
.f-textarea{ height:auto; min-height:90px; padding:10px 13px; resize:vertical; }
.f-input:focus,.f-select:focus,.f-textarea:focus{ border-color:var(--gold); background:#fff; }
.f-hint{ font-size:.72rem; color:var(--muted); }
.f-check-row{ display:flex; align-items:center; gap:8px; }
.f-check-row input[type=checkbox]{ width:17px;height:17px; accent-color:var(--navy); }

.chip-select{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  padding:8px 14px; border:1.5px solid var(--light); border-radius:99px;
  font-size:.8rem; font-weight:500; cursor:pointer; transition:var(--transition);
  display:flex; align-items:center; gap:6px;
}
.chip input{ display:none; }
.chip:has(input:checked){ background:var(--navy); border-color:var(--navy); color:#fff; }

.img-upload-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; }
.img-upload-item{ position:relative; border-radius:var(--radius-sm); overflow:hidden; height:100px; border:1.5px solid var(--light); }
.img-upload-item img{ width:100%;height:100%;object-fit:cover; }
.img-upload-item .star{
  position:absolute; top:5px; left:5px; background:rgba(255,255,255,.9); width:24px;height:24px;border-radius:6px;
  display:flex;align-items:center;justify-content:center; color:var(--muted); font-size:.75rem;
}
.img-upload-item .star.active{ background:var(--gold); color:var(--navy); }
.img-upload-item .del{
  position:absolute; top:5px; right:5px; background:rgba(217,79,61,.9); color:#fff; width:24px;height:24px;border-radius:6px;
  display:flex;align-items:center;justify-content:center; font-size:.75rem;
}
.img-upload-add{
  height:100px; border:1.5px dashed var(--light); border-radius:var(--radius-sm);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  color:var(--muted); font-size:.72rem; cursor:pointer; transition:var(--transition);
}
.img-upload-add:hover{ border-color:var(--gold); color:var(--gold); }

.form-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:24px; padding-top:20px; border-top:1px solid var(--light); }

.btn{ height:42px; padding:0 22px; border-radius:var(--radius-sm); font-weight:600; font-size:.85rem;
  display:inline-flex; align-items:center; gap:7px; transition:var(--transition); }
.btn-navy{ background:var(--navy); color:#fff; } .btn-navy:hover{ background:var(--navy-mid); }
.btn-gold{ background:var(--gold); color:var(--navy); } .btn-gold:hover{ background:var(--gold-lt); }
.btn-ghost{ background:var(--bone); color:var(--navy); } .btn-ghost:hover{ background:var(--light); }
.btn-danger{ background:rgba(217,79,61,.1); color:var(--danger); } .btn-danger:hover{ background:var(--danger); color:#fff; }
.btn-sm{ height:34px; padding:0 14px; font-size:.78rem; }
.btn-block{ width:100%; justify-content:center; }

/* ─── TOOLBAR / FILTERS ───────────────────────────────────── */
.toolbar{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:18px; flex-wrap:wrap; }
.toolbar-filters{ display:flex; gap:10px; flex-wrap:wrap; flex:1; }
.search-input-wrap{ position:relative; min-width:220px; flex:1; max-width:320px; }
.search-input-wrap svg{ position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--muted); }
.search-input-wrap input{
  width:100%; height:40px; border:1.5px solid var(--light); border-radius:var(--radius-sm);
  padding:0 14px 0 38px; font-size:.84rem; outline:none; transition:border-color var(--transition); background:#fff;
}
.search-input-wrap input:focus{ border-color:var(--gold); }
.toolbar select.f-select{ height:40px; width:auto; min-width:140px; }

/* ─── LOGIN PAGE ─────────────────────────────────────────── */
.login-page{
  min-height:100vh; width:100%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-mid) 100%); position:relative; overflow:hidden;
}
.login-page::before{ content:''; position:absolute; top:-140px; right:-140px; width:420px;height:420px;
  background:rgba(201,168,76,.1); border-radius:50%; }
.login-page::after{ content:''; position:absolute; bottom:-160px; left:-100px; width:360px;height:360px;
  background:rgba(201,168,76,.07); border-radius:50%; }
.login-box{
  background:#fff; border-radius:20px; padding:44px 40px; width:100%; max-width:400px;
  box-shadow:0 30px 80px rgba(0,0,0,.35); position:relative; z-index:2;
  animation:loginIn .5s cubic-bezier(.4,0,.2,1) both;
}
@keyframes loginIn{ from{opacity:0; transform:translateY(24px) scale(.97);} to{opacity:1; transform:translateY(0) scale(1);} }
.login-brand{ display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:28px; text-align:center; }
.login-brand-icon{ width:52px;height:52px; background:var(--navy); border-radius:14px; display:flex;align-items:center;justify-content:center; }
.login-brand h1{ font-family:'Playfair Display',serif; font-size:1.4rem; font-weight:700; }
.login-brand h1 span{ color:var(--gold); }
.login-brand p{ font-size:.8rem; color:var(--muted); }
.login-error{
  background:rgba(217,79,61,.08); color:var(--danger); border:1px solid rgba(217,79,61,.25);
  border-radius:var(--radius-sm); padding:11px 14px; font-size:.82rem; margin-bottom:16px;
  display:flex; align-items:center; gap:8px;
}
.login-demo{ margin-top:20px; padding-top:18px; border-top:1px solid var(--light); font-size:.74rem; color:var(--muted); text-align:center; line-height:1.7; }
.login-demo b{ color:var(--navy); }

/* ─── EMPTY STATE ─────────────────────────────────────────── */
.empty-state{ text-align:center; padding:60px 20px; color:var(--muted); }
.empty-state svg{ margin-bottom:14px; opacity:.4; }
.empty-state-title{ font-weight:700; color:var(--navy); margin-bottom:6px; }

/* ─── TOAST (compartido) ─────────────────────────────────── */
.toast-container{ position:fixed; bottom:24px; right:24px; z-index:3000; display:flex; flex-direction:column; gap:10px; }
.toast{ background:var(--navy); color:#fff; padding:13px 18px; border-radius:10px; box-shadow:var(--shadow-lg);
  font-size:.84rem; font-weight:500; display:flex; align-items:center; gap:9px;
  transform:translateX(130%); transition:transform .35s cubic-bezier(.4,0,.2,1); max-width:320px; }
.toast.show{ transform:translateX(0); }
.toast.success{ border-left:3px solid var(--success); }
.toast.error{ border-left:3px solid var(--danger); }

/* ─── MODAL CONFIRM ──────────────────────────────────────── */
.modal-overlay{ position:fixed; inset:0; z-index:2000; background:rgba(10,22,40,.85); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; pointer-events:none; transition:opacity .25s; }
.modal-overlay.open{ opacity:1; pointer-events:all; }
.modal-box{ background:#fff; border-radius:16px; max-width:420px; width:100%; padding:30px;
  transform:translateY(16px); transition:transform .3s; text-align:center; }
.modal-overlay.open .modal-box{ transform:translateY(0); }
.modal-box .icon-warn{ width:54px;height:54px;border-radius:50%; background:rgba(217,79,61,.1); color:var(--danger);
  display:flex;align-items:center;justify-content:center; margin:0 auto 16px; }
.modal-box h3{ font-size:1.05rem; margin-bottom:8px; }
.modal-box p{ font-size:.86rem; color:var(--muted); margin-bottom:22px; }
.modal-actions{ display:flex; gap:10px; justify-content:center; }

/* ─── CHART CONTAINER ────────────────────────────────────── */
.chart-box{ position:relative; height:280px; }
.legend-row{ display:flex; gap:18px; flex-wrap:wrap; margin-top:14px; }
.legend-item{ display:flex; align-items:center; gap:7px; font-size:.78rem; color:var(--muted); }
.legend-dot{ width:9px;height:9px;border-radius:50%; }

/* ─── PAGINATION ──────────────────────────────────────────── */
.pagination{ display:flex; justify-content:center; gap:6px; margin-top:20px; }
.page-btn{ min-width:36px; height:36px; border-radius:8px; display:flex;align-items:center;justify-content:center;
  font-size:.82rem; background:var(--bone); color:var(--navy); transition:var(--transition); }
.page-btn:hover{ background:var(--navy); color:#fff; }
.page-btn.active{ background:var(--navy); color:#fff; font-weight:700; }
.page-btn:disabled{ opacity:.4; pointer-events:none; }

/* ─── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width:1024px){
  .grid-2{ grid-template-columns:1fr; }
  .form-grid{ grid-template-columns:1fr 1fr; }
  .form-grid.cols-3{ grid-template-columns:1fr 1fr; }
}
@media (max-width:900px){
  #sidebar{ position:fixed; left:0; top:0; transform:translateX(-100%); box-shadow:var(--shadow-lg); }
  #sidebar.open{ transform:translateX(0); }
  .menu-toggle{ display:flex; align-items:center; justify-content:center; width:38px;height:38px; border-radius:8px; background:var(--bone); }
  .sidebar-overlay{ display:none; position:fixed; inset:0; background:rgba(10,22,40,.5); z-index:150; }
  .sidebar-overlay.open{ display:block; }
}
@media (max-width:640px){
  .erp-content{ padding:16px; }
  #topbar{ padding:0 16px; }
  .form-grid,.form-grid.cols-3{ grid-template-columns:1fr; }
  .f-group.span-2,.f-group.span-3{ grid-column:span 1; }
  .kpi-grid{ grid-template-columns:1fr 1fr; }
  .toolbar{ flex-direction:column; align-items:stretch; }
  .toolbar-filters{ flex-direction:column; }
  .search-input-wrap{ max-width:none; }
}