:root {
  --paper: #f7f5f0;
  --surface: #ffffff;
  --ink: #1c1b18;
  --muted: #6e6b60;
  --line: #e2ded3;
  --olive: #8b8463;
  --olive-dark: #6a6449;
  --olive-soft: #eeecdf;
  --green: #3f7a56;
  --green-soft: #e5f0e8;
  --amber: #9a6a12;
  --amber-soft: #f8eed8;
  --red: #a8402f;
  --red-soft: #f8e6e2;
  --grey-soft: #eeece6;
  --radius: 4px;
  --shadow: 0 12px 40px rgba(28, 27, 24, .16);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.5 'Jost', 'Segoe UI', system-ui, sans-serif; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1.2; }
h1 { font-size: 30px; letter-spacing: .01em; }
h2 { font-size: 21px; }
h3 { font-size: 17px; font-weight: 500; }
p { margin: 0; }
a { color: inherit; }
img, video { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
.eyebrow { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.prewrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.num { font-variant-numeric: tabular-nums; }

/* Estructura */
.shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
.sidebar { background: var(--surface); border-right: 1px solid var(--line); padding: 26px 18px; display: flex; flex-direction: column; gap: 26px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.sidebar .brand img { width: 170px; margin: 0 6px; }
.nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav a { padding: 9px 10px; border-radius: var(--radius); text-decoration: none; color: var(--muted); }
.nav a:hover { background: var(--paper); color: var(--ink); }
.nav a.on { background: var(--olive-soft); color: var(--ink); }
.nav .eyebrow { padding: 14px 10px 6px; }
.account { border-top: 1px solid var(--line); padding-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.account strong { font-weight: 500; overflow-wrap: anywhere; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--muted); cursor: pointer; text-align: left; text-decoration: underline; text-underline-offset: 3px; font-size: 14px; }
.linkbtn:hover { color: var(--ink); }
.main { padding: 34px 40px 80px; min-width: 0; max-width: 1240px; width: 100%; container: content / inline-size; }
.mobilebar { display: none; }

.preview-banner { background: var(--olive); color: #fff; padding: 9px 16px; display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; align-items: center; font-size: 15px; position: sticky; top: 0; z-index: 20; }
.preview-banner button { background: #fff; color: var(--ink); border: 0; padding: 3px 12px; border-radius: var(--radius); cursor: pointer; }

.page-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 24px; }
.page-head .meta { margin-top: 6px; color: var(--muted); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.tabs { display: flex; gap: 26px; border-bottom: 1px solid var(--line); margin-bottom: 28px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { padding: 10px 0; text-decoration: none; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs a:hover { color: var(--ink); }
.tabs a.on { color: var(--ink); border-color: var(--ink); }
.subtabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.subtabs a { padding: 5px 14px; border: 1px solid var(--line); border-radius: 99px; text-decoration: none; font-size: 15px; color: var(--muted); background: var(--surface); }
.subtabs a.on { background: var(--ink); border-color: var(--ink); color: #fff; }

.section { margin-bottom: 36px; }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.grid { display: grid; gap: 16px; }
.grid.kpis { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.kpi .value { font-size: 28px; font-weight: 300; margin-top: 6px; line-height: 1.2; }
.kpi .note { margin-top: 4px; font-size: 14px; color: var(--muted); }
.empty { background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius); padding: 36px 20px; text-align: center; color: var(--muted); }

/* Botones */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); cursor: pointer; text-decoration: none; font-size: 15px; white-space: nowrap; }
.btn:hover { border-color: var(--ink); }
.btn.primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn.primary:hover { background: #38362f; }
.btn.danger { color: var(--red); }
.btn.danger:hover { border-color: var(--red); }
.btn.sm { padding: 4px 10px; font-size: 14px; }
.btn:disabled { opacity: .55; cursor: default; }
:focus-visible { outline: 2px solid var(--olive); outline-offset: 2px; }

/* Estados */
.pill { display: inline-block; padding: 2px 10px; border-radius: 99px; font-size: 13px; font-weight: 500; white-space: nowrap; background: var(--grey-soft); color: var(--muted); }
.pill.green { background: var(--green-soft); color: var(--green); }
.pill.amber { background: var(--amber-soft); color: var(--amber); }
.pill.red { background: var(--red-soft); color: var(--red); }
.pill.olive { background: var(--olive-soft); color: var(--olive-dark); }
.bar { height: 5px; background: var(--grey-soft); border-radius: 3px; overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--olive); }

/* Tablero de proyectos */
.project-card { padding: 0; overflow: hidden; text-decoration: none; display: flex; flex-direction: column; transition: border-color .15s; }
.project-card:hover { border-color: var(--olive); }
.project-card .cover { aspect-ratio: 16 / 9; background: var(--olive-soft); object-fit: cover; width: 100%; }
.project-card .cover.none { display: flex; align-items: center; justify-content: center; }
.project-card .cover.none img { width: 56px; opacity: .5; mix-blend-mode: multiply; }
.project-card .body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; }
.hero { width: 100%; aspect-ratio: 21 / 8; object-fit: cover; border-radius: var(--radius); margin-bottom: 24px; }

/* Gantt */
.gantt-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.gantt { min-width: 760px; position: relative; }
.g-row { display: grid; grid-template-columns: 220px minmax(0, 1fr); border-bottom: 1px solid var(--line); min-height: 44px; }
.g-row:last-child { border-bottom: 0; }
.g-name { padding: 8px 12px; font-size: 14px; position: sticky; left: 0; background: var(--surface); z-index: 3; border-right: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; line-height: 1.25; }
.g-name small { color: var(--muted); }
.g-track { position: relative; }
.g-months { display: flex; height: 100%; }
.g-month { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border-left: 1px solid var(--line); padding: 8px 6px; overflow: hidden; white-space: nowrap; }
.g-grid { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--grey-soft); }
.g-bar { position: absolute; top: 12px; bottom: 12px; border-radius: 3px; background: var(--grey-soft); overflow: hidden; min-width: 4px; border: 1px solid #d9d5c8; }
.g-bar > span { display: block; height: 100%; background: var(--olive); }
.g-bar.done > span { background: var(--ink); }
.g-today { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px solid var(--red); z-index: 2; pointer-events: none; }
.legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 10px; font-size: 14px; color: var(--muted); }
.legend i { display: inline-block; width: 18px; height: 8px; margin-right: 6px; border-radius: 2px; vertical-align: middle; }
.legend i.prog { background: var(--olive); }
.legend i.done { background: var(--ink); }
.legend i.rest { background: var(--grey-soft); border: 1px solid #d9d5c8; }
.legend i.today { background: var(--red); width: 2px; height: 14px; }

/* Etapas */
.stages { display: flex; flex-direction: column; }
.stage { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); align-items: start; }
.stage:last-child { border-bottom: 0; }
.stage .dot { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--muted); background: var(--surface); }
.stage.completed .dot { background: var(--ink); border-color: var(--ink); color: #fff; }
.stage.in_progress .dot { border: 2px solid var(--olive); color: var(--olive-dark); font-weight: 600; }
.stage .title { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.stage .bar { margin-top: 10px; max-width: 360px; }
.internal-note { margin-top: 8px; padding: 6px 10px; background: var(--amber-soft); border-radius: var(--radius); font-size: 14px; }
.stepper { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(96px, 1fr); gap: 4px; overflow-x: auto; }
.stepper div { border-top: 3px solid var(--grey-soft); padding-top: 8px; font-size: 13px; line-height: 1.25; color: var(--muted); }
.stepper div.completed { border-color: var(--ink); color: var(--ink); }
.stepper div.in_progress { border-color: var(--olive); color: var(--ink); font-weight: 500; }

/* Galerías */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.item .thumb { aspect-ratio: 16 / 10; width: 100%; object-fit: cover; background: var(--olive-soft); border: 0; padding: 0; cursor: zoom-in; display: block; }
.item .thumb img { width: 100%; height: 100%; object-fit: cover; }
.item video.thumb { cursor: default; background: #000; object-fit: contain; }
.item .thumb.doc { display: flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; color: var(--olive-dark); font-size: 15px; letter-spacing: .14em; flex-direction: column; gap: 4px; }
.item .thumb.doc b { font-weight: 400; font-size: 30px; }
.item .body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.item .tools { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 8px; }
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin-top: 14px; }
.photo { position: relative; aspect-ratio: 4 / 3; background: var(--olive-soft); border-radius: var(--radius); overflow: hidden; }
.photo button.open { padding: 0; border: 0; width: 100%; height: 100%; cursor: zoom-in; background: none; display: block; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo .remove { position: absolute; top: 5px; right: 5px; background: rgba(28, 27, 24, .75); color: #fff; border: 0; border-radius: 50%; width: 26px; height: 26px; cursor: pointer; line-height: 1; }
.photo.pick { cursor: pointer; }
.photo.pick input { position: absolute; top: 8px; left: 8px; width: 20px; height: 20px; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; background: rgba(15, 15, 13, .94); z-index: 60; display: flex; flex-direction: column; color: #fff; }
.lightbox .stage-img { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 12px; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lightbox .cap { padding: 10px 20px 20px; text-align: center; font-size: 15px; }
.lightbox button { position: absolute; background: rgba(255, 255, 255, .12); color: #fff; border: 0; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; font-size: 20px; }
.lightbox button:hover { background: rgba(255, 255, 255, .26); }
.lightbox .close { top: 14px; right: 14px; }
.lightbox .prev { left: 14px; top: calc(50% - 22px); }
.lightbox .next { right: 14px; top: calc(50% - 22px); }

/* Tablas */
.table-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th { text-align: left; font-weight: 500; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 11px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
td.right, th.right { text-align: right; }
td .tools { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* Banco */
.bank dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 12px 0 0; align-items: center; }
.bank dt { color: var(--muted); font-size: 14px; }
.bank dd { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; overflow-wrap: anywhere; }
.bank .note { margin-top: 12px; font-size: 14px; color: var(--muted); }

/* Reportes */
.report { margin-bottom: 16px; }
.report .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.report .block { margin-top: 12px; }
.report .block .eyebrow { display: block; margin-bottom: 2px; }
.facts { display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; color: var(--muted); margin-top: 4px; }

/* Calendario mensual */
.cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 10px; }
.cal-head strong { font-weight: 400; font-size: 18px; display: inline-block; }
.cal-head strong::first-letter { text-transform: uppercase; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.cal .dow { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 7px 8px; border-bottom: 1px solid var(--line); }
.cal .day { min-height: 92px; padding: 5px 6px; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: none; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 13px; }
.cal .day:hover { background: var(--paper); }
.cal .day:nth-child(7n) { border-right: 0; }
.cal .day.out { color: #b6b3a8; background: #fbfaf7; }
.cal .day.today .n { background: var(--red); color: #fff; border-radius: 50%; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; }
.cal .chip { font-size: 12px; line-height: 1.3; padding: 0 5px; border-radius: 2px; background: var(--olive-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal .chip.daily { background: var(--ink); color: #fff; }
.cal .chip.weekly { background: var(--green-soft); color: var(--green); }
.cal .more { font-size: 12px; color: var(--muted); }

/* Formularios y modal */
.overlay { position: fixed; inset: 0; background: rgba(28, 27, 24, .45); z-index: 50; display: flex; align-items: flex-start; justify-content: center; padding: 5vh 16px; overflow-y: auto; }
.modal { background: var(--surface); width: 100%; max-width: 560px; border-radius: 6px; box-shadow: var(--shadow); padding: 26px; }
.modal.wide { max-width: 800px; }
.modal-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 18px; align-items: flex-start; }
.modal-head button { background: none; border: 0; font-size: 22px; line-height: 1; cursor: pointer; color: var(--muted); padding: 2px 6px; }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field > label, .field > .label { font-size: 14px; color: var(--muted); }
.field input:not([type=checkbox]), .field select, .field textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--olive); outline: none; }
.field textarea { min-height: 84px; resize: vertical; }
.field .hint { font-size: 13px; color: var(--muted); }
.check { display: flex !important; gap: 8px; align-items: flex-start; font-size: 15px; color: var(--ink) !important; cursor: pointer; }
.check input { width: 18px; height: 18px; margin-top: 3px; flex: none; }
.form-error { grid-column: 1 / -1; background: var(--red-soft); color: var(--red); padding: 8px 12px; border-radius: var(--radius); font-size: 15px; }
.form-foot { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; align-items: center; flex-wrap: wrap; }
.progress-line { flex: 1 1 100%; }
.secret { font-size: 20px; background: var(--paper); border: 1px solid var(--line); padding: 10px 14px; border-radius: var(--radius); margin: 12px 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }

/* Acceso */
.auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.auth-box { width: 100%; max-width: 380px; }
.auth-box img { width: 230px; margin: 0 auto 30px; mix-blend-mode: multiply; }
.auth-box .form { grid-template-columns: 1fr; }
.auth-box .btn { width: 100%; }
.demo-note { margin-top: 18px; font-size: 14px; color: var(--muted); text-align: center; }

#toasts { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 70; display: flex; flex-direction: column; gap: 8px; width: min(92vw, 440px); }
.toast { background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--radius); box-shadow: var(--shadow); font-size: 15px; text-align: center; }
.toast.error { background: var(--red); }

@media (max-width: 860px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar { display: none; position: fixed; inset: 0; z-index: 40; height: auto; width: min(86vw, 300px); box-shadow: var(--shadow); }
  .sidebar.open { display: flex; }
  .mobilebar { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 15; }
  .mobilebar img { height: 34px; width: auto; mix-blend-mode: multiply; }
  .mobilebar button { background: none; border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 12px; cursor: pointer; }
  .preview-banner { top: 57px; }
  .main { padding: 22px 16px 70px; }
  h1 { font-size: 25px; }
  .hero { aspect-ratio: 16 / 9; }
  .form { grid-template-columns: minmax(0, 1fr); }
  .modal { padding: 20px 16px; }
  .g-row { grid-template-columns: 140px minmax(0, 1fr); }
  .gantt { min-width: 620px; }
  .gallery { grid-template-columns: repeat(auto-fill, minmax(100%, 1fr)); }
  .grid.two { grid-template-columns: minmax(0, 1fr); }
  .stage { grid-template-columns: 34px minmax(0, 1fr); }
  .stage .stage-tools { grid-column: 2; }
  .cal .day { min-height: 58px; padding: 3px; }
  .cal .chip { font-size: 0; height: 5px; padding: 0; }
  .cal .more { display: none; }
}
/* --- Versión 2 ----------------------------------------------------------------- */
.lang-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 99px; overflow: hidden; width: max-content; margin: 4px 0; }
.lang-switch button { background: none; border: 0; padding: 3px 12px; cursor: pointer; font-size: 13px; color: var(--muted); }
.lang-switch button.on { background: var(--ink); color: #fff; }
.auth-lang { display: flex; justify-content: center; margin-top: 20px; }
.form-heading { margin-top: 6px; border-top: 1px solid var(--line); padding-top: 12px; }
.price-preview { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 16px; margin-top: 10px; padding: 10px 12px; background: var(--paper); border-radius: var(--radius); }
.price-preview div { display: flex; flex-direction: column; font-size: 14px; }
.price-preview strong { font-weight: 500; font-size: 16px; }
.icon-preview { margin-top: 8px; color: var(--olive-dark); }
.icon-cell { width: 44px; color: var(--olive-dark); }
.icon { flex: none; vertical-align: middle; }
.cat-line { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; align-items: center; }
.toolbar select, .schedule-toolbar select, .status-select { padding: 5px 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); font-size: 14px; }
.search { flex: 1 1 260px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.mini { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; margin: 6px 0 0; font-size: 14px; }
.mini dt { color: var(--muted); }
.mini dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.pills { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.section-note { margin: -4px 0 14px; }
.client-note { background: var(--olive-soft); border-radius: var(--radius); padding: 6px 10px; font-style: italic; }
.card.attention { border-color: var(--amber); background: #fffaf0; }
.card.attention ul { margin: 8px 0 0; padding-left: 18px; }
.card.attention li { margin: 4px 0; }
.next-meeting { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; }
.credit { color: var(--green); }
.debit { color: var(--red); }
.btn.whatsapp { color: #1d7a4b; border-color: #bfe0cc; }
.btn.whatsapp:hover { border-color: #1d7a4b; }
tfoot td { font-weight: 500; border-top: 1px solid var(--line); border-bottom: 0; }
.block { margin-top: 12px; }
.activity { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.actions-list { list-style: none; padding: 0; margin: 6px 0 10px; display: flex; flex-direction: column; gap: 6px; }
.actions-list li { display: flex; gap: 10px; align-items: flex-start; }
.actions-list li.done > span:nth-child(2) { text-decoration: line-through; color: var(--muted); }
.actions-list input { width: 18px; height: 18px; margin-top: 3px; flex: none; }
.actions-list .tick { width: 18px; text-align: center; color: var(--olive-dark); }
.actions-list .linkbtn { margin-left: auto; }
.payment .tools { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.page-head.slim h2 { margin-top: 6px; font-size: 24px; }

/* Comentarios */
.thread { max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.comment { background: var(--paper); border-radius: 8px; padding: 8px 12px; max-width: 88%; }
.comment.mine { align-self: flex-end; background: var(--olive-soft); }
.comment .linkbtn { margin-left: 8px; font-size: 12px; }
.comment-form textarea { width: 100%; min-height: 70px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); }

/* Schedule */
.schedule-toolbar { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.schedule-toolbar .subtabs { margin-bottom: 0; }
.selection-bar { position: sticky; top: 8px; z-index: 12; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; box-shadow: var(--shadow); }
.selection-bar .btn:not(.primary) { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.selection-bar .btn.primary { background: #fff; color: var(--ink); }
.schedule-group h2 { font-size: 19px; }
.schedule-list { display: flex; flex-direction: column; gap: 10px; }
.sched-item { display: grid; grid-template-columns: 26px 96px minmax(0, 1fr) auto; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; align-items: start; }
.sched-item.faded { opacity: .55; }
.sched-item .pick input { width: 18px; height: 18px; margin-top: 4px; }
.sched-img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--radius); background: var(--olive-soft); }
.sched-img.none { display: flex; align-items: center; justify-content: center; color: var(--olive-dark); }
.sched-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sched-main .tools { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; align-items: center; }
.sched-price { text-align: right; display: flex; flex-direction: column; gap: 2px; min-width: 150px; }
.sched-price strong { font-size: 18px; font-weight: 500; }
.cost-line { max-width: 220px; margin-left: auto; }
.alternative { margin-top: 8px; border: 1px dashed var(--amber); background: #fffaf0; border-radius: var(--radius); padding: 10px 12px; }
.alt-row { display: flex; gap: 12px; margin: 6px 0; }
.alt-row img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius); }
.alternative .tools { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.picker { max-height: 52vh; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.picker-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--line); cursor: pointer; }
.picker-row:last-child { border-bottom: 0; }
.picker-row img, .picker-icon { width: 44px; height: 44px; object-fit: cover; border-radius: var(--radius); background: var(--olive-soft); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.picker-row input { width: 18px; height: 18px; flex: none; }
.level-spaces { list-style: none; padding: 0; margin: 8px 0 0; }
.level-spaces li { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-top: 1px solid var(--line); gap: 10px; }
.financial td, .financial th { white-space: nowrap; }
.financial td:nth-child(2) { white-space: normal; min-width: 180px; }

/* Presentaciones */
.presentation-card { text-decoration: none; }
.slide-block { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.slide-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 12px; }
.slide-title { font-family: Georgia, 'Times New Roman', serif; font-size: 22px; }
.slide-subtitle { font-family: Georgia, 'Times New Roman', serif; font-size: 18px; color: var(--muted); }
.slide-canvas { display: grid; gap: 10px; aspect-ratio: 16 / 9; width: 100%; }
.layout-one { grid-template-columns: 1fr; }
.layout-hero { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.layout-hero .slot-0 { grid-row: 1 / 3; }
.layout-two { grid-template-columns: 1fr 1fr; }
.layout-grid4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.slot { position: relative; background: var(--olive-soft); border-radius: 2px; min-height: 0; display: flex; align-items: center; justify-content: center; }
.slot > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 2px; user-select: none; }
.slot.pin-mode { cursor: crosshair; outline: 2px dashed var(--olive); outline-offset: 2px; }
.slot.empty-slot { background: var(--grey-soft); }
.slot-tools { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; z-index: 4; opacity: .92; }
.upload-slot { position: relative; z-index: 3; }
.pin { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: #2fa36b; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); cursor: pointer; z-index: 3; padding: 0; }
.pin:hover, .pin:focus-visible { transform: scale(1.25); }
.pin.numbered { width: 24px; height: 24px; margin: -12px 0 0 -12px; border-width: 2px; color: #fff; font-size: 12px; font-weight: 600; line-height: 1; }
.pin-popover { position: absolute; z-index: 8; width: min(300px, 80vw); background: #f7f5f0; border-radius: 10px; box-shadow: var(--shadow); padding: 12px; }
.pin-card { display: grid; grid-template-columns: 72px 1fr; gap: 12px; }
.pin-card img { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; }
.pin-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pin-body .tools { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.add-slide { justify-content: center; padding: 16px; border: 1px dashed var(--line); border-radius: var(--radius); }
.present-mode { position: fixed; inset: 0; z-index: 80; background: #faf9f6; display: flex; flex-direction: column; }
.present-bar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.present-bar img { height: 26px; mix-blend-mode: multiply; }
.present-bar > span:first-of-type { flex: 1; }
.present-counter { color: var(--muted); font-size: 14px; }
.present-stage { flex: 1; display: flex; align-items: center; justify-content: center; padding: 20px; min-height: 0; }
.present-slide { width: min(100%, calc((100vh - 140px) * 16 / 9)); }
.present-title { display: flex; gap: 14px; align-items: baseline; font-family: Georgia, serif; font-size: 22px; margin-bottom: 10px; }

/* Diseño: me gusta y orden */
.btn.like.on { background: var(--olive-soft); border-color: var(--olive); }
.like-count { padding: 4px 4px; }
.gallery .sortable { cursor: grab; }
.gallery .sortable.dragging { opacity: .45; outline: 2px dashed var(--olive); }
.preview-note { background: var(--paper); padding: 8px 10px; border-radius: var(--radius); }

/* Schedule: enlace, especificaciones y tabla financiera editable */
.name-line { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.ext-link { text-decoration: none; color: var(--olive-dark); font-size: 15px; border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; line-height: 1.4; }
.ext-link:hover { border-color: var(--olive); background: var(--olive-soft); }
.specs { color: var(--ink); }
.share-toggle { display: inline-flex !important; align-items: center; gap: 6px; padding: 3px 8px; border: 1px solid var(--line); border-radius: var(--radius); }
.share-toggle input { margin: 0 !important; width: 16px !important; height: 16px !important; }
.fin-summary { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.fin-kpis { display: flex; gap: 26px; flex-wrap: wrap; }
.fin-kpi { display: flex; flex-direction: column; }
.fin-kpi strong { font-weight: 500; font-size: 17px; }
.fin-kpi span { font-size: 13px; color: var(--muted); }
.fin-markup { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.markup-input { width: 70px; padding: 5px 8px; border: 1px solid var(--line); border-radius: var(--radius); text-align: right; }
.fin-wrap { max-height: 72vh; overflow: auto; }
.fin-table { font-size: 14px; }
.fin-table th { position: sticky; top: 0; background: var(--surface); z-index: 2; }
.fin-table td, .fin-table th { white-space: nowrap; padding: 8px 10px; }
.fin-table td.fin-name { position: sticky; left: 0; background: var(--surface); z-index: 1; display: flex; gap: 10px; align-items: center; min-width: 240px; white-space: normal; }
.fin-name img, .fin-icon { width: 36px; height: 36px; object-fit: cover; border-radius: 4px; background: var(--olive-soft); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.fin-group td { background: var(--paper); font-size: 14px; }
.edit-cell { padding: 2px 4px !important; }
.cell-input { width: 92px; text-align: right; border: 1px solid transparent; background: transparent; padding: 5px 6px; border-radius: 4px; font-variant-numeric: tabular-nums; }
.cell-input:hover { border-color: var(--line); background: #fff; }
.cell-input:focus { border-color: var(--olive); background: #fff; outline: none; box-shadow: 0 0 0 2px var(--olive-soft); }
.lock { font-size: 11px; }

/* Schedule: fotos, selección, orden y borrado */
.sched-img-btn { position: relative; padding: 0; border: 0; background: none; cursor: zoom-in; width: 96px; height: 96px; }
.photo-count { position: absolute; right: 4px; bottom: 4px; background: rgba(28, 27, 24, .75); color: #fff; font-size: 12px; padding: 1px 6px; border-radius: 10px; }
.sched-item.internal { border-style: dashed; background: #fbfaf7; }
.schedule-list .sortable { cursor: grab; }
.schedule-list .sortable.dragging { opacity: .45; outline: 2px dashed var(--olive); }
.icon-btn { padding: 4px 9px; }
.photo-manager { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; min-height: 60px; }
.photo-manager .photo { cursor: grab; }
.photo-manager .photo.dragging { opacity: .45; }
.main-badge { position: absolute; left: 6px; top: 6px; background: var(--ink); color: #fff; font-size: 11px; padding: 1px 7px; border-radius: 10px; }
.fin-thumb { padding: 0; border: 0; background: none; cursor: zoom-in; flex: none; }
.fin-thumb img { width: 44px; height: 44px; object-fit: cover; border-radius: 4px; display: block; }
.financial .fin-name { display: flex; gap: 10px; align-items: center; }
.import-steps { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.import-errors { margin: 8px 0 0; padding-left: 18px; max-height: 200px; overflow-y: auto; color: var(--red); }
.details-thumbs { display: flex; gap: 6px; margin-top: 8px; }
.details-thumbs button { padding: 0; border: 1px solid var(--line); border-radius: 4px; background: none; cursor: pointer; }
.details-thumbs img { width: 56px; height: 56px; object-fit: cover; border-radius: 3px; display: block; }

/* Ficha completa del artículo (solo pantallas grandes) */
.item-details { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.details-media img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; background: var(--olive-soft); }
.details-noimg { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: var(--olive-soft); border-radius: 6px; color: var(--olive-dark); }
.details-body { display: flex; flex-direction: column; gap: 10px; }
.details-list { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; font-size: 15px; }
.details-list dt { color: var(--muted); }
.details-list dd { margin: 0; }
.details-body .tools { display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 860px) { .desktop-only { display: none !important; } }

/* PDF (impresión) */
.print-root { display: none; }
@media print {
  html.printing body > *:not(.print-root) { display: none !important; }
  html.printing, html.printing body { background: #fff !important; }
  html.printing .print-root { display: block; color: #1c1b18; font: 9.5pt/1.35 'Jost', sans-serif; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .print-root .muted { color: #77756d; }
  .pdf-label, .pdf-band, .pdf-cover-meta dt, .pdf-summary th { font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace; }

  /* Marca: verde #3c4f45 del logo (versión 3) como acento sobre blanco. */
  .pdf-cover { height: 182mm; display: flex; flex-direction: column; justify-content: space-between; break-after: page; }
  .pdf-cover-logo { width: 62mm; height: auto; }
  .pdf-cover-title { display: flex; flex-direction: column; font-weight: 300; line-height: 1.1; border-left: 1.2mm solid #3c4f45; padding-left: 6mm; }
  .pdf-project { font-size: 32pt; color: #7d8a83; }
  .pdf-doc { font-size: 32pt; color: #3c4f45; font-weight: 400; }
  .pdf-cover-meta { margin: 0; display: grid; grid-auto-flow: column; grid-template-rows: auto auto; gap: .5mm 12mm; justify-content: start; font-size: 9pt; border-top: 1px solid #c9d1cc; padding-top: 4mm; }
  .pdf-cover-meta dt { font-size: 6.5pt; color: #6f7d75; text-transform: uppercase; letter-spacing: .06em; }
  .pdf-cover-meta dd { margin: 0; color: #1c1b18; }

  .pdf-page { break-before: page; }
  .pdf-summary h2 { font-size: 20pt; font-weight: 300; color: #3c4f45; margin-bottom: 8mm; }
  .pdf-summary table { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
  .pdf-summary th { font-size: 7pt; color: #6f7d75; font-weight: 400; text-align: left; border-bottom: 1px solid #3c4f45; padding: 2mm 0; text-transform: uppercase; letter-spacing: .06em; }
  .pdf-summary td { padding: 2mm 0; border: 0; border-bottom: 1px solid #edf0ee; }
  .pdf-summary tfoot td { border-top: 1px solid #3c4f45; border-bottom: 0; font-weight: 500; color: #3c4f45; }
  .pdf-summary .right { text-align: right; }

  .pdf-group { break-before: page; }
  .pdf-band { background: #edf0ee; color: #3c4f45; border-left: 1mm solid #3c4f45; padding: 2.4mm 3mm; font-size: 8pt; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 3mm; }
  .pdf-band-count { color: #6f7d75; }
  .pdf-item { break-inside: avoid; border-bottom: 1px solid #e3e7e4; padding: 3mm 0 4mm; }
  .pdf-item header { display: flex; align-items: baseline; gap: 2.5mm; margin-bottom: 2mm; font-size: 11pt; }
  .pdf-item header strong { font-weight: 500; color: #1c1b18; }
  .pdf-link { color: #3c4f45; text-decoration: none; font-size: 9pt; }
  .pdf-num { height: 6mm; border-radius: 3mm; background: #3c4f45; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 7.5pt; padding: 0 1.6mm; min-width: 6mm; }
  .pdf-pill { margin-left: auto; font-size: 7.5pt; padding: .6mm 2.2mm; border-radius: 1.5mm; background: #eeece6; color: #6e6b60; }
  .pdf-pill.green { background: #e5f0e8; color: #3f7a56; }
  .pdf-pill.amber { background: #f8eed8; color: #9a6a12; }
  .pdf-pill.red { background: #f8e6e2; color: #a8402f; }
  .pdf-pill.olive { background: #eeecdf; color: #6a6449; }
  .pdf-item-body { display: grid; grid-template-columns: 26mm 1.3fr 1fr 1fr 1fr 1.2fr; gap: 4mm; }
  .pdf-item-body > img, .pdf-noimg { width: 26mm; height: 26mm; object-fit: cover; border-radius: 1.5mm; background: #f1eee7; display: flex; align-items: center; justify-content: center; }
  .pdf-col { border-left: 1px solid #e3e7e4; padding-left: 2.5mm; display: flex; flex-direction: column; gap: 2mm; min-width: 0; }
  .pdf-col:empty { border-left-color: transparent; }
  .pdf-sub { font-size: 10pt; color: #55605a; }
  .pdf-field { overflow-wrap: anywhere; }
  .pdf-label { font-size: 6.5pt; color: #6f7d75; }
  .pdf-price .pdf-field:first-child > div:first-child { font-weight: 500; color: #3c4f45; }
  .pdf-item footer { margin: 2mm 0 0 30mm; font-size: 8pt; }
  .pdf-tag { background: #edf0ee; color: #3c4f45; border-radius: 3mm; padding: .3mm 2.2mm; }

  .pdf-slide-page { break-before: page; height: 172mm; display: flex; flex-direction: column; }
  .pdf-slide-page h2 { font-weight: 300; font-size: 15pt; color: #3c4f45; margin-bottom: 3mm; }
  .pdf-slide-page .slide-canvas { flex: 1; width: 100%; aspect-ratio: auto; min-height: 0; gap: 2mm; }
  .pdf-slide-page .pin { background: #3c4f45; border-width: 2px; box-shadow: none; appearance: none; -webkit-appearance: none; outline: 0; }
}

@media (max-width: 860px) {
  .sched-item { grid-template-columns: 22px 64px minmax(0, 1fr); }
  .sched-img { width: 64px; height: 64px; }
  .sched-price { grid-column: 2 / -1; text-align: left; min-width: 0; }
  .cost-line { margin-left: 0; }
  .slot-tools { top: 4px; right: 4px; }
  .slot-tools .btn { padding: 2px 8px; font-size: 12px; }
  .pin-popover { width: min(260px, 72vw); }
}

/* Las tablas se vuelven tarjetas cuando el área de contenido ya no les alcanza */
@container content (max-width: 900px) {
  .table-wrap.cards { background: none; border: 0; overflow: visible; }
  .cards table, .cards tbody, .cards tr, .cards td { display: block; width: 100%; }
  .cards thead { display: none; }
  .cards tr { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 14px; margin-bottom: 12px; }
  .cards td { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; border: 0; text-align: right; }
  .cards td[data-label]::before { content: attr(data-label); color: var(--muted); font-size: 14px; text-align: left; flex: none; }
  .cards td:empty { display: none; }
  .cards td .tools { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }