@import url('https://api.fontshare.com/v2/css?f[]=clash-display@500,600,700&f[]=switzer@400,500,600,700&display=swap');

:root{
  --red:#E3181E;
  --red-hover:#BE1418;
  --red-soft:rgba(211,35,51,.14);
  --ink-950:oklch(0.14 0.012 24);
  --ink-900:oklch(0.18 0.013 24);
  --ink-850:oklch(0.23 0.015 24);
  --line-dark:oklch(0.36 0.014 24 / .55);
  --paper-100:oklch(0.97 0.004 24);
  --ink-soft:oklch(0.68 0.012 24);
  --white:oklch(0.99 0.002 24);
  --green:#2FAE66;
  --amber:#D9A02B;
  --font-display:'Clash Display', sans-serif;
  --font-body:'Switzer', sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{background:var(--ink-950); color:var(--paper-100); font-family:var(--font-body); line-height:1.5; -webkit-font-smoothing:antialiased;}
h1,h2,h3{font-family:var(--font-display); color:var(--white); letter-spacing:-.01em;}
a{color:inherit; text-decoration:none;}
button{font-family:var(--font-body);}

/* ---- login ---- */
.login-shell{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;}
.login-card{width:100%; max-width:380px; background:var(--ink-900); border:1px solid var(--line-dark); border-radius:14px; padding:36px;}
.login-logo{display:flex; align-items:center; gap:10px; margin-bottom:28px; font-family:var(--font-display); font-weight:600; font-size:19px; color:var(--white);}
.login-logo span{color:var(--red);}
.login-logo img{height:28px; width:auto; max-width:28px; flex-shrink:0;}
.field{display:flex; flex-direction:column; gap:7px; margin-bottom:16px;}
.field label{font-size:11.5px; font-weight:600; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.03em;}
.field input{background:var(--ink-850); border:1px solid var(--line-dark); border-radius:7px; color:var(--paper-100); font-family:var(--font-body); font-size:14px; padding:11px 12px;}
.field input:focus{outline:2px solid var(--red); outline-offset:1px;}
.btn-primary{width:100%; background:var(--red); color:var(--white); border:none; padding:13px; border-radius:7px; font-size:14.5px; font-weight:700; cursor:pointer; transition:background .2s ease;}
.btn-primary:hover{background:var(--red-hover);}
.login-error{background:var(--red-soft); color:#ffb3b6; border-radius:7px; padding:10px 12px; font-size:13px; margin-bottom:16px; display:none;}
.login-error.show{display:block;}

/* ---- shell ---- */
.admin-shell{display:flex; min-height:100vh;}
.admin-sidebar{width:240px; flex-shrink:0; background:var(--ink-900); border-right:1px solid var(--line-dark); padding:24px 16px; display:flex; flex-direction:column;}
.admin-logo{display:flex; align-items:center; gap:10px; padding:0 8px 24px; font-family:var(--font-display); font-weight:600; font-size:17px; color:var(--white);}
.admin-logo span{color:var(--red);}
.admin-logo img{height:26px; width:auto;}
.admin-nav{display:flex; flex-direction:column; gap:2px;}
.admin-nav a{display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:8px; font-size:14px; color:var(--ink-soft); font-weight:500; transition:background .15s ease, color .15s ease;}
.admin-nav a:hover{background:var(--ink-850); color:var(--paper-100);}
.admin-nav a.active{background:var(--red-soft); color:var(--white);}
.admin-sidebar-foot{margin-top:auto; padding-top:16px; border-top:1px solid var(--line-dark);}
.logout-btn{width:100%; background:none; border:1px solid var(--line-dark); color:var(--ink-soft); padding:10px; border-radius:7px; font-size:13px; cursor:pointer; transition:border-color .2s ease, color .2s ease;}
.logout-btn:hover{border-color:var(--red); color:var(--white);}

.admin-main{flex:1; padding:36px 44px; max-width:1200px;}
.admin-topbar{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:32px; gap:20px;}
.admin-topbar h1{font-size:26px; font-weight:600;}
.admin-topbar p{color:var(--ink-soft); font-size:14px; margin-top:4px;}

/* ---- kpis ---- */
.kpi-row{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:36px;}
.kpi-card{background:var(--ink-900); border:1px solid var(--line-dark); border-radius:12px; padding:22px;}
.kpi-value{font-family:var(--font-display); font-size:32px; font-weight:600; color:var(--white); margin-bottom:4px;}
.kpi-label{font-size:12.5px; color:var(--ink-soft);}

/* ---- panel / table ---- */
.panel{background:var(--ink-900); border:1px solid var(--line-dark); border-radius:12px; overflow:hidden; margin-bottom:28px;}
.panel-head{padding:18px 22px; border-bottom:1px solid var(--line-dark); display:flex; justify-content:space-between; align-items:center;}
.panel-head h2{font-size:17px; font-weight:600;}
.admin-table{width:100%; border-collapse:collapse;}
.admin-table th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-soft); padding:12px 22px; border-bottom:1px solid var(--line-dark); font-weight:600;}
.admin-table td{padding:14px 22px; border-bottom:1px solid var(--line-dark); font-size:13.5px; color:var(--paper-100); vertical-align:middle;}
.admin-table tr:last-child td{border-bottom:none;}
.admin-table tr:hover td{background:oklch(1 0 0 / .015);}
.empty-row td{text-align:center; color:var(--ink-soft); padding:32px;}

.badge{display:inline-block; padding:4px 11px; border-radius:20px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.02em;}
.badge.pendiente{background:rgba(217,160,43,.16); color:var(--amber);}
.badge.aprobado, .badge.activa, .badge.contactado, .badge.cerrado{background:rgba(47,174,102,.16); color:var(--green);}
.badge.rechazado, .badge.descartado{background:var(--red-soft); color:#ff8b8f;}
.badge.pausada, .badge.vendida, .badge.arrendada{background:oklch(1 0 0 / .08); color:var(--ink-soft);}

.row-actions{display:flex; gap:8px;}
.icon-btn{background:var(--ink-850); border:1px solid var(--line-dark); color:var(--paper-100); font-size:12px; padding:6px 12px; border-radius:6px; cursor:pointer; transition:border-color .2s ease;}
.icon-btn:hover{border-color:var(--red);}
.icon-btn.danger:hover{border-color:var(--red); color:#ff8b8f;}

select.status-select{background:var(--ink-850); border:1px solid var(--line-dark); border-radius:6px; color:var(--paper-100); font-size:12.5px; padding:6px 8px;}

/* ---- formulario nueva propiedad ---- */
.formgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:22px;}
.formgrid .field{margin-bottom:0;}
.formgrid select{background:var(--ink-850); border:1px solid var(--line-dark); border-radius:7px; color:var(--paper-100); font-size:14px; padding:10px 12px;}
.formgrid-submit{grid-column:1/-1; display:flex; justify-content:flex-end;}
.btn-primary.small{width:auto; padding:11px 22px;}
.field textarea{background:var(--ink-850); border:1px solid var(--line-dark); border-radius:7px; color:var(--paper-100); font-family:var(--font-body); font-size:14px; padding:11px 12px; resize:vertical; min-height:80px;}

@media(max-width:900px){
  .admin-shell{flex-direction:column;}
  .admin-sidebar{width:100%; flex-direction:row; align-items:center; padding:14px 16px;}
  .admin-logo{padding:0; margin-right:auto; padding-bottom:0;}
  .admin-nav{flex-direction:row; overflow-x:auto;}
  .admin-nav a{white-space:nowrap;}
  .admin-sidebar-foot{margin-top:0; margin-left:12px; padding-top:0; border-top:none;}
  .admin-main{padding:24px 20px;}
  .kpi-row{grid-template-columns:1fr 1fr;}
  .formgrid{grid-template-columns:1fr 1fr;}
  .admin-table{display:block; overflow-x:auto; white-space:nowrap;}
}

.checkitem{display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--paper-100); cursor:pointer; padding-top:8px;}
.checkitem input{width:16px; height:16px; accent-color:var(--red); cursor:pointer;}

.modal-overlay{position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; z-index:100;}
.modal-overlay[hidden]{display:none;}
.modal-box{background:var(--ink-900); border:1px solid var(--line-dark); padding:24px; border-radius:10px; width:400px; max-width:90vw;}
.modal-box h3{color:var(--white); margin-bottom:16px;}
.modal-box .field{margin-bottom:12px; display:flex; flex-direction:column; gap:4px;}
.modal-box .field label{font-size:12px; color:var(--ink-soft);}
.modal-box .field input, .modal-box .field textarea{background:var(--ink-850); border:1px solid var(--line-dark); border-radius:6px; color:var(--paper-100); padding:8px 10px; font-family:inherit;}
.modal-actions{display:flex; gap:10px; margin-top:16px;}

/* ---- analiticas ---- */
.tendencia-chart{display:flex; align-items:flex-end; gap:6px; padding:28px 22px 40px; height:160px; position:relative;}
.tendencia-bar-wrap{flex:1; height:100%; display:flex; align-items:flex-end; position:relative;}
.tendencia-bar{width:100%; background:var(--red); border-radius:4px 4px 0 0; min-height:3px;}
.tendencia-bar-label{position:absolute; bottom:-20px; left:0; right:0; text-align:center; font-size:10px; color:var(--ink-soft);}