/* ========== Obra Nave Industrial — Estilos ========== */
:root{
  --bg:#f6f4ee;
  --bg-2:#fffaf2;
  --card:#ffffff;
  --ink:#2b2a26;
  --ink-soft:#5d5b54;
  --line:#e7e1d3;
  --primary:#d97706;          /* ámbar obra */
  --primary-dark:#b45309;
  --primary-soft:#fef3c7;
  --secondary:#0f766e;        /* verde herramienta */
  --secondary-soft:#ccfbf1;
  --danger:#b91c1c;
  --danger-soft:#fee2e2;
  --info:#2563eb;
  --info-soft:#dbeafe;
  --violet:#7c3aed;
  --violet-soft:#ede9fe;
  --rose:#e11d48;
  --rose-soft:#ffe4e6;
  --amber:#f59e0b;
  --amber-soft:#fef3c7;
  --green:#16a34a;
  --green-soft:#dcfce7;
  --radius:14px;
  --shadow:0 6px 20px -8px rgba(60,40,10,.18), 0 2px 6px -2px rgba(60,40,10,.08);
  --shadow-lg:0 18px 50px -20px rgba(60,40,10,.28);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  background:
    radial-gradient(1200px 600px at 10% -10%, #fde7c2 0%, transparent 60%),
    radial-gradient(1000px 500px at 110% 10%, #d9f0ea 0%, transparent 55%),
    var(--bg);
  color:var(--ink);
  min-height:100vh;
  line-height:1.45;
}
a{color:var(--primary-dark);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0 0 .4em;color:var(--ink)}
h1{font-size:1.7rem}
h2{font-size:1.2rem}
small{color:var(--ink-soft)}

.container{max-width:1180px;margin:0 auto;padding:0 18px}

/* ========== Topbar ========== */
.topbar{
  background:linear-gradient(135deg,#fff 0%, #fff8ec 100%);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50;
  box-shadow:0 2px 12px -8px rgba(0,0,0,.12);
  padding-top:env(safe-area-inset-top);
}
.topbar-inner{display:flex;align-items:center;gap:14px;padding:12px 16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.1rem;color:var(--ink);flex:1;min-width:0}
.brand:hover{text-decoration:none}
.brand-icon{font-size:1.6rem;filter:drop-shadow(0 2px 3px rgba(0,0,0,.15));flex-shrink:0}
.brand-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav{display:flex;gap:4px;flex:1 1 100%;flex-wrap:wrap;order:3}
.nav a{
  padding:8px 12px;border-radius:10px;color:var(--ink-soft);font-weight:500;
  transition:all .15s ease;font-size:.92rem;
}
.nav a:hover{background:var(--primary-soft);color:var(--primary-dark);text-decoration:none}
.nav a.active{background:var(--primary);color:#fff}
.user-box{display:flex;align-items:center;gap:8px;flex-shrink:0}
.user-name{
  font-size:.85rem;color:#fff;padding:4px 10px;border-radius:999px;
  background:var(--primary);font-weight:600;max-width:160px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.nav-toggle{
  display:none;width:44px;height:44px;background:transparent;border:1px solid var(--line);
  border-radius:12px;cursor:pointer;padding:0;align-items:center;justify-content:center;
  flex-direction:column;gap:5px;flex-shrink:0;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s, opacity .2s}
body.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .nav-toggle span:nth-child(2){opacity:0}
body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
body.nav-open .nav-toggle{z-index:65;position:relative}

@media (max-width: 900px) {
  .nav-toggle{display:flex}
  .nav{
    order:0;position:fixed;top:0;right:0;height:100vh;height:100dvh;
    width:280px;max-width:85vw;
    background:#fff;flex-direction:column;flex-wrap:nowrap;
    padding:24px 16px;padding-top:max(24px, env(safe-area-inset-top, 24px));
    padding-bottom:max(24px, env(safe-area-inset-bottom, 24px));
    gap:2px;
    box-shadow:-8px 0 40px -8px rgba(0,0,0,.25);
    transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);
    z-index:60;overflow-y:auto;-webkit-overflow-scrolling:touch;
  }
  body.nav-open .nav{transform:translateX(0)}
  .nav a{
    padding:14px 16px;font-size:1rem;border-radius:12px;
    min-height:48px;display:flex;align-items:center;
  }
  .nav a:active{background:var(--primary-soft)}
}

/* ========== Buttons ========== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 16px;border-radius:10px;border:1px solid transparent;
  font-weight:600;font-size:.95rem;cursor:pointer;transition:all .15s ease;
  text-decoration:none;line-height:1;
}
.btn:hover{transform:translateY(-1px);text-decoration:none}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-dark);color:#fff}
.btn-secondary{background:var(--secondary);color:#fff}
.btn-secondary:hover{background:#115e59;color:#fff}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{background:#fff;border-color:var(--primary);color:var(--primary-dark)}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover{background:#7f1d1d;color:#fff}
.btn-sm{padding:6px 10px;font-size:.85rem}
.btn-block{width:100%;margin-top:10px}

/* ========== Cards / Layouts ========== */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;margin:18px 0;box-shadow:var(--shadow);
}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:18px 0}
@media(max-width:800px){.grid-2{grid-template-columns:1fr}}

.page-head{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;
  margin:22px 0 8px;
}
.page-sub{margin:.2em 0 0;color:var(--ink-soft)}

/* ========== Hero ========== */
.hero{
  margin:22px 0;padding:24px 26px;border-radius:var(--radius);
  background:linear-gradient(135deg,#fff7e6,#ffece1);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.hero{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.hero h1{margin:0;font-size:1.9rem}
.hero-sub{margin:.4em 0 0;color:var(--ink-soft);font-size:1.05rem}
.hero-fiscal{white-space:nowrap}

/* ========== Stats ========== */
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin:18px 0}
@media(max-width:900px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{
  display:block;padding:18px;border-radius:var(--radius);background:#fff;
  border:1px solid var(--line);box-shadow:var(--shadow);transition:transform .15s ease;
  color:var(--ink);
}
.stat:hover{transform:translateY(-3px);text-decoration:none}
.stat-num{font-size:1.8rem;font-weight:700;line-height:1}
.stat-label{margin-top:6px;font-size:.95rem;color:var(--ink-soft)}
.stat-amber{border-top:4px solid var(--amber)}
.stat-blue{border-top:4px solid var(--info)}
.stat-green{border-top:4px solid var(--green)}
.stat-violet{border-top:4px solid var(--violet)}
.stat-rose{border-top:4px solid var(--rose)}

/* ========== Flash ========== */
.flash{
  padding:12px 16px;border-radius:10px;margin:14px 0;font-weight:500;
  background:var(--green-soft);color:#14532d;border:1px solid #86efac;
}
.flash-error{background:var(--danger-soft);color:#7f1d1d;border-color:#fca5a5}

/* ========== Forms ========== */
label{display:block;margin:10px 0;color:var(--ink);font-weight:500;font-size:.95rem}
input[type=text],input[type=password],input[type=date],input[type=time],
input[type=search],input[type=file],input[type=email],textarea,select{
  width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;
  background:#fff;font:inherit;color:var(--ink);margin-top:4px;
  transition:border .15s ease, box-shadow .15s ease;
}
input:focus,textarea:focus,select:focus{
  outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);
}
textarea{resize:vertical;min-height:60px;font-family:inherit}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:600px){.form-row{grid-template-columns:1fr}}
.form-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}
.filters{
  display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 18px;
  background:#fff;padding:12px;border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow);
}
.filters input[type=search]{flex:1;min-width:220px;margin:0}
.filters select{width:auto;margin:0}
.inline{display:inline-block;margin:0}

/* ========== Tasks ========== */
.task-list{display:flex;flex-direction:column;gap:12px;margin:18px 0}
.task{
  display:flex;gap:12px;align-items:flex-start;padding:16px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);transition:all .15s ease;
  border-left:5px solid var(--amber);
}
.task:hover{box-shadow:var(--shadow-lg);transform:translateY(-1px)}
.task-en_progreso{border-left-color:var(--info)}
.task-completada{border-left-color:var(--green);opacity:.7}
.task-completada .task-title{text-decoration:line-through;color:var(--ink-soft)}
.task-drag{cursor:grab;color:#bbb;font-size:1.3rem;padding:4px 6px;user-select:none}
.task-main{flex:1;min-width:0}
.task-top{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.task-title{margin:.1em 0;font-size:1.1rem}
.task-desc{margin:6px 0;color:var(--ink-soft);font-size:.95rem;white-space:pre-wrap}
.task-foot{margin-top:8px;font-size:.8rem;color:var(--ink-soft)}
.task-actions{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
@media(max-width:600px){
  .task{flex-wrap:wrap}
  .task-actions{flex-direction:row;width:100%}
}

.prio{
  display:inline-block;padding:3px 9px;border-radius:999px;font-size:.78rem;font-weight:600;
}
.prio-alta{background:var(--danger-soft);color:#991b1b}
.prio-media{background:var(--amber-soft);color:#92400e}
.prio-baja{background:var(--green-soft);color:#166534}

.chip{
  display:inline-block;padding:3px 9px;border-radius:999px;font-size:.78rem;
  background:#f1ece0;color:var(--ink-soft);
}
.chip-date{background:var(--info-soft);color:#1e40af}

.status-select{
  padding:6px 10px;border-radius:8px;font-size:.85rem;font-weight:600;width:auto;
  margin:0;cursor:pointer;
}
.status-pendiente{background:var(--amber-soft);color:#92400e;border-color:#fcd34d}
.status-en_progreso{background:var(--info-soft);color:#1e40af;border-color:#93c5fd}
.status-completada{background:var(--green-soft);color:#166534;border-color:#86efac}

/* ========== Documents ========== */
.doc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin:18px 0}
.doc-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px;
  transition:transform .15s ease;
}
.doc-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.doc-icon{font-size:2.2rem}
.doc-type{
  display:inline-block;padding:2px 10px;border-radius:999px;font-size:.75rem;font-weight:600;
  background:var(--primary-soft);color:var(--primary-dark);align-self:flex-start;
}
.doc-type-factura{background:var(--rose-soft);color:#9f1239}
.doc-type-presupuesto{background:var(--info-soft);color:#1e40af}
.doc-type-contrato{background:var(--violet-soft);color:#5b21b6}
.doc-type-plano{background:#e0e7ff;color:#3730a3}
.doc-type-foto{background:var(--green-soft);color:#166534}
.doc-title{font-size:1.05rem;margin:.2em 0}
.doc-amount{font-size:1.2rem;font-weight:700;color:var(--primary-dark)}
.doc-meta{font-size:.85rem;color:var(--ink-soft)}
.doc-notes{font-size:.9rem;color:var(--ink-soft);padding:6px 8px;background:var(--bg);border-radius:8px;margin:4px 0}
.doc-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px;padding-top:10px;border-top:1px dashed var(--line)}

/* ========== Calendar ========== */
.cal-nav{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0}
.cal-nav h2{flex:1;text-align:center;margin:0;font-size:1.4rem;text-transform:capitalize}
.calendar{
  display:grid;grid-template-columns:repeat(7,1fr);gap:6px;
  background:#fff;padding:14px;border-radius:var(--radius);
  border:1px solid var(--line);box-shadow:var(--shadow);
}
.cal-head{
  font-weight:700;text-align:center;padding:8px 0;color:var(--ink-soft);
  background:var(--bg);border-radius:8px;font-size:.85rem;
}
.cal-cell{
  min-height:90px;padding:6px;border-radius:8px;background:#fdfbf6;
  border:1px solid transparent;transition:all .15s ease;
}
.cal-cell:hover{border-color:var(--line);background:#fff}
.cal-empty{background:transparent}
.cal-today{background:linear-gradient(135deg,#fff7e6,#ffece1);border-color:var(--primary)}
.cal-day{font-weight:600;font-size:.9rem;color:var(--ink-soft);margin-bottom:4px}
.cal-today .cal-day{color:var(--primary-dark)}
.cal-event{
  display:block;width:100%;text-align:left;padding:4px 6px;margin:2px 0;
  border-radius:6px;border:none;cursor:pointer;font-size:.78rem;
  background:var(--primary-soft);color:var(--primary-dark);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cal-event:hover{background:var(--primary);color:#fff}
.ev-instalacion{background:var(--info-soft);color:#1e40af}
.ev-instalacion:hover{background:var(--info);color:#fff}
.ev-entrega{background:var(--violet-soft);color:#5b21b6}
.ev-entrega:hover{background:var(--violet);color:#fff}
.ev-visita{background:var(--green-soft);color:#166534}
.ev-visita:hover{background:var(--green);color:#fff}
.ev-pago{background:var(--rose-soft);color:#9f1239}
.ev-pago:hover{background:var(--rose);color:#fff}
.ev-pill{
  display:inline-block;padding:2px 8px;border-radius:999px;font-size:.75rem;font-weight:600;
  background:var(--primary-soft);color:var(--primary-dark);
}
@media(max-width:700px){
  .cal-cell{min-height:60px;font-size:.8rem}
  .cal-event{font-size:.7rem}
}

/* ========== Rows ========== */
.row-item{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  padding:10px 12px;border-radius:10px;margin:6px 0;background:var(--bg-2);
  border:1px solid var(--line);
}
.row-title{font-weight:600;flex:1;min-width:120px}
.row-meta{font-size:.85rem;color:var(--ink-soft)}
.evdate{font-weight:700;color:var(--primary-dark);min-width:120px}

/* ========== Notes ========== */
.note-form textarea{margin-bottom:10px}
.notes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin:14px 0}
.note-card{
  background:linear-gradient(135deg,#fffbe6,#fff5d4);
  border:1px solid #f5e6a8;border-radius:var(--radius);
  padding:14px;box-shadow:var(--shadow);
  transform:rotate(-.4deg);transition:transform .15s ease;
}
.note-card:nth-child(even){transform:rotate(.5deg);background:linear-gradient(135deg,#e6f7ff,#d4ecff);border-color:#a8d4f5}
.note-card:nth-child(3n){background:linear-gradient(135deg,#ffe6f0,#ffd4e3);border-color:#f5a8c4}
.note-card:hover{transform:rotate(0) scale(1.02)}
.note-meta{font-size:.8rem;color:var(--ink-soft);margin-bottom:6px}
.note-body{white-space:pre-wrap;margin-bottom:10px}
.note{padding:10px;border-bottom:1px dashed var(--line)}
.note:last-child{border-bottom:none}

/* ========== Empty ========== */
.empty,.empty-card{text-align:center;color:var(--ink-soft);padding:30px 10px}
.empty-card{
  background:#fff;border:2px dashed var(--line);border-radius:var(--radius);grid-column:1/-1;
}
.empty-emoji{font-size:3rem;margin-bottom:8px}

/* ========== Modal ========== */
.modal{
  position:fixed;inset:0;background:rgba(40,30,10,.55);
  display:flex;align-items:center;justify-content:center;z-index:100;padding:20px;
  backdrop-filter:blur(3px);
}
.modal[hidden]{display:none}
.modal-card{
  background:#fff;border-radius:var(--radius);padding:26px;
  max-width:560px;width:100%;max-height:90vh;overflow:auto;
  box-shadow:var(--shadow-lg);position:relative;
  animation:pop .2s ease-out;
}
@keyframes pop{from{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}
.modal-close{
  position:absolute;top:12px;right:12px;border:none;background:transparent;
  font-size:1.4rem;cursor:pointer;color:var(--ink-soft);
  width:34px;height:34px;border-radius:50%;
}
.modal-close:hover{background:var(--bg)}

/* ========== Login ========== */
.login-body{
  display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px;
  background:
    radial-gradient(700px 400px at 20% 20%, #fde7c2 0%, transparent 60%),
    radial-gradient(600px 400px at 80% 80%, #d9f0ea 0%, transparent 60%),
    var(--bg);
}
.login-card{
  background:#fff;border-radius:20px;padding:36px;max-width:420px;width:100%;
  box-shadow:var(--shadow-lg);border:1px solid var(--line);
}
.login-hero{text-align:center;margin-bottom:20px}
.login-emoji{font-size:3.5rem;filter:drop-shadow(0 4px 8px rgba(0,0,0,.15))}
.login-hero h1{margin:6px 0 4px;font-size:1.5rem}
.login-hero p{color:var(--ink-soft);margin:0}
.login-form label{margin:14px 0}

/* ========== Áreas ========== */
.area-pills{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.area-pill{
  --area-color:#6b7280;
  padding:6px 14px;border-radius:999px;font-size:.88rem;font-weight:600;
  background:#fff;border:2px solid var(--line);color:var(--ink-soft);
  transition:all .15s ease;
}
.area-pill:hover{border-color:var(--area-color);color:var(--area-color);text-decoration:none;transform:translateY(-1px)}
.area-pill.active{background:var(--area-color);border-color:var(--area-color);color:#fff}

.area-chip{
  display:inline-block;padding:3px 9px;border-radius:999px;font-size:.78rem;font-weight:600;
  color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.2);
}
.task{border-left-color:var(--area-color, var(--amber)) !important}
.task-en_progreso{box-shadow:var(--shadow), inset 4px 0 0 var(--info)}
.task-completada{box-shadow:var(--shadow), inset 4px 0 0 var(--green)}

.area-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:8px}
.area-card{
  --area-color:#6b7280;
  display:block;padding:18px;border-radius:var(--radius);
  background:#fff;border:1px solid var(--line);border-top:4px solid var(--area-color);
  color:var(--ink);box-shadow:var(--shadow);transition:transform .15s ease;text-align:center;
}
.area-card:hover{transform:translateY(-3px);text-decoration:none;box-shadow:var(--shadow-lg)}
.area-emoji{font-size:2.4rem;line-height:1}
.area-name{font-weight:700;margin:6px 0 4px;color:var(--area-color)}
.area-stat{font-size:.85rem;color:var(--ink-soft)}
.area-spent{font-size:.85rem;color:var(--ink);font-weight:600;margin-top:4px}

.doc-type-row{display:flex;gap:6px;flex-wrap:wrap;align-items:center}

/* ========== Subtareas / Multitask ========== */
.task-main{cursor:pointer}
.task-progress{display:flex;align-items:center;gap:10px;margin:8px 0 4px}
.progress-bar{
  flex:1;height:8px;background:var(--bg);border-radius:999px;overflow:hidden;
  border:1px solid var(--line);min-width:80px;
}
.progress-fill{
  height:100%;background:linear-gradient(90deg, var(--secondary), var(--green));
  transition:width .3s ease;
}
.progress-label{font-size:.8rem;color:var(--ink-soft);font-weight:600;white-space:nowrap}

.modal-detail{max-width:640px}
.detail-head{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.detail-title{font-size:1.5rem;margin:.2em 0}
.detail-desc{
  color:var(--ink-soft);background:var(--bg);padding:12px;border-radius:10px;
  white-space:pre-wrap;margin:10px 0;
}
.detail-meta{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}
.status-pill{padding:3px 10px;border-radius:999px;font-size:.78rem;font-weight:600}
.status-pill.status-pendiente{background:var(--amber-soft);color:#92400e}
.status-pill.status-en_progreso{background:var(--info-soft);color:#1e40af}
.status-pill.status-completada{background:var(--green-soft);color:#166534}

.subtasks-block{
  margin:20px 0;padding:16px;background:var(--bg);border-radius:var(--radius);
  border:1px solid var(--line);
}
.subtasks-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.subtasks-head h3{margin:0;flex:0 0 100%;font-size:1.05rem}
.subtasks-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.subtask{
  display:flex;align-items:center;gap:8px;padding:8px 10px;
  background:#fff;border-radius:8px;border:1px solid var(--line);
  transition:all .15s ease;
}
.subtask:hover{border-color:var(--primary)}
.subtask-done{opacity:.6}
.subtask-done .sub-title{text-decoration:line-through;color:var(--ink-soft)}
.sub-check{display:flex;align-items:center;gap:10px;flex:1;cursor:pointer;margin:0}
.sub-check input[type=checkbox]{
  width:20px;height:20px;accent-color:var(--secondary);cursor:pointer;margin:0;
}
.sub-title{flex:1;user-select:none}
.subtasks-list .empty{
  padding:10px;text-align:center;color:var(--ink-soft);font-size:.9rem;
  background:#fff;border-radius:8px;border:2px dashed var(--line);
}
.subtask-add{display:flex;gap:8px;margin-top:10px}
.subtask-add input{flex:1;margin:0}

/* ========== Adjuntos en tareas ========== */
.task-icons{float:right;display:flex;gap:10px;align-items:center;font-size:.85rem;color:var(--ink-soft)}
.open-detail{color:var(--primary-dark);font-weight:600}

.files-block, .comments-block{
  margin:20px 0;padding:16px;background:var(--bg);border-radius:var(--radius);
  border:1px solid var(--line);
}
.files-block h3, .comments-block h3{margin:0 0 12px;font-size:1.05rem}

.file-gallery{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:10px;margin-bottom:12px;
}
.file-item{
  background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .15s ease;
}
.file-item:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.file-item img{
  width:100%;aspect-ratio:1;object-fit:cover;display:block;background:#f0ece2;
}
.file-doc{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  aspect-ratio:1;padding:10px;text-align:center;font-size:2rem;color:var(--ink);
  background:linear-gradient(135deg,#fef3c7,#fde68a);
}
.file-doc span{font-size:.7rem;color:var(--ink-soft);margin-top:6px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-all;
}
.file-doc:hover{text-decoration:none}
.file-meta{
  display:flex;justify-content:space-between;align-items:center;
  padding:6px 8px;font-size:.75rem;border-top:1px solid var(--line);background:#fff;
}
.file-del{
  background:transparent;border:none;color:var(--danger);font-weight:700;cursor:pointer;
  padding:2px 6px;border-radius:6px;
}
.file-del:hover{background:var(--danger-soft)}
.empty-files{
  grid-column:1/-1;text-align:center;color:var(--ink-soft);padding:14px;
  background:#fff;border:2px dashed var(--line);border-radius:10px;font-size:.9rem;
}

.file-drop{
  display:block;text-align:center;padding:18px;border:2px dashed var(--line);
  border-radius:10px;background:#fff;cursor:pointer;color:var(--ink-soft);
  transition:all .15s ease;margin:0;font-weight:500;
}
.file-drop:hover, .file-drop.drag-over{
  border-color:var(--primary);background:var(--primary-soft);color:var(--primary-dark);
}
.file-drop.uploading{opacity:.6;pointer-events:none}
.file-drop.uploading::after{content:' · Subiendo…';font-style:italic}
.file-buttons{display:flex;gap:8px;flex-wrap:wrap}
.file-buttons .file-drop{flex:2;min-width:180px}
.file-cam{
  flex:1;min-width:140px;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:18px;border:2px solid var(--primary);
  border-radius:10px;background:var(--primary);color:#fff;cursor:pointer;font-weight:600;
  transition:background .15s;margin:0;
}
.file-cam:hover{background:var(--primary-dark)}

/* ========== Comentarios ========== */
.comments-list{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.comment{display:flex;gap:10px;padding:10px;background:#fff;border-radius:10px;border:1px solid var(--line)}
.comment-avatar{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg, var(--primary), var(--secondary));
  color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;
}
.comment-body{flex:1;min-width:0}
.comment-head{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.comment-head small{color:var(--ink-soft);font-size:.75rem}
.comment-del{
  margin-left:auto;background:transparent;border:none;color:var(--ink-soft);cursor:pointer;
  padding:2px 6px;border-radius:6px;font-size:.9rem;
}
.comment-del:hover{background:var(--danger-soft);color:var(--danger)}
.comment-text{margin-top:4px;white-space:pre-wrap;word-wrap:break-word}
.empty-comments{
  text-align:center;color:var(--ink-soft);padding:14px;font-size:.9rem;
  background:#fff;border:2px dashed var(--line);border-radius:10px;
}
.comment-add{display:flex;gap:8px;align-items:flex-end}
.comment-add textarea{flex:1;margin:0}

/* ========== Datos fiscales ========== */
.fiscal-banner{
  display:flex;gap:16px;align-items:center;
  background:linear-gradient(135deg,#fff7e6,#ffece1);
  padding:16px 18px;border-radius:12px;margin-bottom:18px;border:1px solid var(--line);
}
.fiscal-emoji{font-size:2.6rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,.15))}
.fiscal-banner h2{margin:0 0 4px}

.fiscal-grid{display:grid;gap:10px;margin-bottom:20px}
.fiscal-row{
  display:grid;grid-template-columns:200px 1fr auto;gap:14px;align-items:center;
  padding:14px 16px;background:#fff;border:1px solid var(--line);border-radius:12px;
  transition:all .15s ease;
}
.fiscal-row:hover{border-color:var(--primary);box-shadow:var(--shadow)}
.fiscal-highlight{
  background:linear-gradient(135deg,#fff7e6,#fef3c7);
  border-color:var(--amber);
}
.fiscal-full{grid-template-columns:200px 1fr auto}
.fiscal-label{color:var(--ink-soft);font-weight:600;font-size:.9rem}
.fiscal-value{
  font-size:1.05rem;font-weight:600;color:var(--ink);
  font-family:'Consolas','Menlo',monospace;word-break:break-word;
}
.fiscal-big{font-size:1.3rem;letter-spacing:1px;color:var(--primary-dark)}

.fiscal-block{
  background:var(--bg);padding:18px;border-radius:12px;border:1px solid var(--line);
  margin-top:14px;
}
.fiscal-block h3{margin-top:0}
.fiscal-pre{
  background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:14px 16px;font-family:'Consolas','Menlo',monospace;font-size:.95rem;
  white-space:pre-wrap;word-break:break-word;color:var(--ink);margin:10px 0;
  line-height:1.5;
}
.copy-btn.copied{background:var(--green) !important;color:#fff !important;border-color:var(--green) !important}
.fiscal-warn{
  background:linear-gradient(135deg,#fff7ed,#ffedd5);
  border-color:#fdba74;
}
.fiscal-warn code{
  background:#fff;padding:2px 8px;border-radius:6px;font-family:'Consolas','Menlo',monospace;
  border:1px solid var(--line);
}

@media(max-width:700px){
  .fiscal-row{grid-template-columns:1fr;gap:6px}
  .fiscal-label{font-size:.8rem}
}

/* ========== Login: selector de usuario ========== */
.user-picker{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:18px 0;
}
.user-chip{
  --uc:#d97706;
  display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;
  background:#fff;border:2px solid var(--line);cursor:pointer;font-weight:600;color:var(--ink);
  transition:all .15s ease;
}
.user-chip:hover{border-color:var(--uc);color:var(--uc);transform:translateY(-1px)}
.user-chip-emoji{font-size:1.2rem}

/* ========== Usuarios / Familia ========== */
.users-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin:18px 0}
.user-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;box-shadow:var(--shadow);border-top:4px solid var(--uc, var(--primary));
}
.user-card-head{display:flex;gap:12px;align-items:center}
.user-avatar{
  width:54px;height:54px;border-radius:50%;font-size:1.6rem;
  display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;
  box-shadow:0 4px 10px -4px rgba(0,0,0,.3);
}
.user-actions{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap}
.badge{padding:2px 8px;border-radius:999px;font-size:.7rem;font-weight:700;text-transform:uppercase}
.badge-admin{background:var(--primary);color:#fff;margin-left:4px}
.badge-danger{background:var(--danger-soft);color:#7f1d1d}

/* ========== Actividad ========== */
.activity-feed{display:flex;flex-direction:column;gap:0;border-left:2px solid var(--line);margin:14px 0 14px 16px;padding-left:20px}
.activity-item{position:relative;padding:10px 0}
.activity-dot{
  position:absolute;left:-27px;top:14px;width:12px;height:12px;border-radius:50%;
  background:var(--primary);border:3px solid #fff;box-shadow:0 0 0 2px var(--primary);
}
.activity-body{font-size:.95rem;color:var(--ink)}
.activity-body small{display:block;color:var(--ink-soft);font-size:.75rem;margin-top:2px}
.activity-details{color:var(--ink-soft);font-style:italic}

/* ========== Contactos ========== */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin:18px 0}
.contact-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;box-shadow:var(--shadow);transition:transform .15s ease;
  display:flex;flex-direction:column;gap:10px;
}
.contact-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.contact-head{display:flex;gap:12px;align-items:flex-start}
.contact-avatar{
  width:48px;height:48px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg, var(--primary), var(--secondary));
  color:#fff;font-weight:700;font-size:1.3rem;
  display:flex;align-items:center;justify-content:center;
}
.contact-info{flex:1;min-width:0}
.contact-info h3{margin:0 0 4px;font-size:1.1rem}
.contact-trade, .contact-company{font-size:.85rem;color:var(--ink-soft);margin:2px 0}
.contact-rating{font-size:1rem}
.contact-links{display:flex;flex-direction:column;gap:4px;font-size:.9rem}
.contact-link{
  padding:6px 10px;border-radius:8px;background:var(--bg);color:var(--ink);
  border:1px solid transparent;
}
a.contact-link:hover{background:var(--primary-soft);color:var(--primary-dark);text-decoration:none}
.contact-link.wa{background:#dcfce7;color:#166534}
.contact-link.wa:hover{background:#86efac}
.contact-notes{font-size:.9rem;color:var(--ink-soft);padding:8px;background:var(--bg);border-radius:8px;white-space:pre-wrap}
.contact-actions{display:flex;gap:6px;justify-content:flex-end;padding-top:8px;border-top:1px dashed var(--line)}

/* ========== Compras ========== */
.shop-list{display:flex;flex-direction:column;gap:8px;margin:14px 0}
.shop-item{
  --area-color:var(--amber);
  display:flex;gap:12px;align-items:center;padding:12px 14px;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  border-left:4px solid var(--area-color);box-shadow:var(--shadow);
  transition:all .15s ease;
}
.shop-bought{opacity:.55}
.shop-bought .shop-title{text-decoration:line-through}
.shop-check{margin:0}
.shop-checkbox{
  background:transparent;border:none;font-size:1.8rem;cursor:pointer;
  width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  transition:background .15s;
}
.shop-checkbox:hover{background:var(--bg)}
.shop-main{flex:1;min-width:0}
.shop-title{font-weight:600;font-size:1.05rem;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.shop-meta{font-size:.85rem;color:var(--ink-soft);margin-top:4px}
.shop-notes{font-size:.85rem;color:var(--ink-soft);margin-top:4px;font-style:italic}
.shop-actions{display:flex;gap:6px;flex-shrink:0}

/* ========== Presupuesto ========== */
.budget-summary{
  display:flex;gap:18px;align-items:center;flex-wrap:wrap;
  background:linear-gradient(135deg,#fff7e6,#ffece1);
}
.budget-summary > div:first-child{flex:1;min-width:200px}
.progress-bar-big{height:14px;flex:2;min-width:200px}
.progress-warn{background:linear-gradient(90deg, var(--amber), #f59e0b) !important}
.progress-danger{background:linear-gradient(90deg, var(--danger), #ef4444) !important}

.budget-grid{display:flex;flex-direction:column;gap:12px;margin:16px 0}
.budget-row{
  --area-color:#6b7280;
  display:grid;grid-template-columns:200px 200px 1fr;gap:16px;align-items:center;
  padding:14px 16px;background:#fff;border:1px solid var(--line);border-radius:12px;
  border-left:5px solid var(--area-color);
}
.budget-area{display:flex;align-items:center;gap:10px;font-size:1.05rem}
.budget-emoji{font-size:1.6rem}
.budget-input{margin:0}
.budget-input input{margin-top:2px}
.budget-status{display:flex;flex-direction:column;gap:4px}
.budget-line{display:flex;justify-content:space-between;align-items:center;font-size:.9rem;color:var(--ink-soft)}

/* ========== Timeline antes/después ========== */
.timeline-section{
  --area-color:#6b7280;
  margin:24px 0;padding:18px;background:#fff;border:1px solid var(--line);
  border-left:5px solid var(--area-color);border-radius:var(--radius);box-shadow:var(--shadow);
}
.timeline-area-h{color:var(--area-color);margin:0 0 12px}
.timeline-area-h small{color:var(--ink-soft);font-weight:400;font-size:.85rem}
.timeline-gallery{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;
}
.tl-photo{
  margin:0;background:#fdfbf6;border:1px solid var(--line);border-radius:10px;
  overflow:hidden;display:flex;flex-direction:column;transition:transform .15s ease;
}
.tl-photo:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.tl-photo img{width:100%;aspect-ratio:1;object-fit:cover;cursor:zoom-in;display:block;background:#eee}
.tl-photo figcaption{padding:8px 10px;font-size:.85rem}
.tl-date{font-weight:600;color:var(--primary-dark);font-size:.8rem}
.tl-caption{margin-top:2px;color:var(--ink)}
.tl-actions{display:flex;gap:4px;margin-top:6px}

.lightbox{
  position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:200;
  display:flex;align-items:center;justify-content:center;cursor:zoom-out;padding:20px;
}
.lightbox[hidden]{display:none}
.lightbox img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px}

/* ========== Responsive móvil general ========== */
@media (max-width: 700px) {
  .container{padding:0 12px}
  h1{font-size:1.4rem}
  .hero{padding:18px}
  .hero h1{font-size:1.5rem}
  .page-head{margin:16px 0 4px}
  .page-head h1{font-size:1.3rem}
  .filters{padding:10px;gap:8px}
  .filters input[type=search]{min-width:100%;flex:1 1 100%}
  .filters select{width:100%}

  .task{padding:12px;gap:8px}
  .task-drag{display:none}
  .task-actions{flex-direction:row;width:100%;justify-content:space-between;flex-wrap:wrap}
  .task-icons{float:none;margin-top:6px}
  .status-select{flex:1;min-width:140px}

  .btn{padding:10px 14px;font-size:.95rem;min-height:44px}
  .btn-sm{min-height:36px;padding:8px 12px}
  .nav a{min-height:44px;display:flex;align-items:center}
  input,select,textarea{font-size:16px} /* evita zoom iOS */

  .modal-card{padding:18px;max-height:95vh;border-radius:14px}
  .modal{padding:8px;align-items:flex-end}
  .modal-card{width:100%;max-width:100%;border-radius:18px 18px 0 0}

  .stats{grid-template-columns:repeat(2,1fr);gap:8px}
  .stat{padding:14px}
  .stat-num{font-size:1.4rem}

  .doc-grid,.contact-grid,.users-grid,.notes-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr;gap:8px}

  .budget-row{grid-template-columns:1fr;gap:8px;padding:12px}
  .budget-area{font-size:1rem}

  .timeline-gallery{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}

  .shop-item{padding:10px;gap:8px;flex-wrap:wrap}
  .shop-checkbox{font-size:1.6rem;width:38px;height:38px}
  .shop-actions{margin-left:auto}

  .cal-cell{min-height:50px;padding:3px;font-size:.75rem}
  .cal-day{font-size:.8rem}
  .cal-event{font-size:.65rem;padding:2px 4px}
  .cal-head{font-size:.75rem;padding:6px 0}
  .cal-nav h2{font-size:1.1rem;flex:1 1 100%;order:-1;margin-bottom:6px}

  .fiscal-row{grid-template-columns:1fr;gap:6px;padding:12px}
  .fiscal-big{font-size:1.1rem}

  .file-gallery{grid-template-columns:repeat(3,1fr);gap:6px}
  .area-grid{grid-template-columns:repeat(2,1fr)}

  .topbar-inner{padding:10px 12px}
  .brand-text{font-size:.95rem}
  .user-name{font-size:.75rem;padding:3px 8px;max-width:100px}

  .activity-feed{margin-left:8px;padding-left:16px}
}

/* iOS safe area */
@supports (padding: max(0px)) {
  body{padding-bottom:env(safe-area-inset-bottom)}
}

/* Botón flotante (FAB) opcional para móvil — usado por algunas páginas */
.fab{
  position:fixed;bottom:20px;right:20px;width:60px;height:60px;border-radius:50%;
  background:var(--primary);color:#fff;font-size:1.6rem;border:none;cursor:pointer;
  box-shadow:var(--shadow-lg);display:none;align-items:center;justify-content:center;z-index:40;
}
.fab:hover{background:var(--primary-dark)}
@media (max-width: 700px) { .fab{display:flex} }

/* ========== Footer ========== */
.footer{margin-top:40px;padding:20px 0;border-top:1px solid var(--line);text-align:center;color:var(--ink-soft);background:#fff8ef}