/*
================================================================================
Sistema: Ecovía Comechingones (Smart City & Tourism)
Creador y Desarrollador: Silvio Deandrea
Copyright: © 2026 Silvio Deandrea. Todos los derechos reservados.
Licencia: Propiedad Privada - Producto Protegido por Derechos de Autor.
================================================================================
F88/F89 — Capa premium de los portales de trabajo (Comerciante, Vecino).
Sólo aplica bajo body.wp-app. Tokens de marca: /shared/styles/tokens-premium.css.
*/
@font-face { font-family: 'Fraunces'; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/fraunces-latin.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-weight: 400 800; font-display: swap; src: url('/assets/fonts/manrope-latin.woff2') format('woff2'); }

body.wp-app {
  --eco-bg: var(--sand-050); --eco-bg-warm: var(--sand-050); --eco-surface: #fff; --eco-surface-soft: var(--sand-100); --eco-surface-2: var(--sand-050);
  --eco-navy: var(--forest-950); --eco-navy-2: #0A3B40; --eco-navy-3: #0E4A4F;
  --eco-teal: var(--forest-700); --eco-teal-2: var(--forest-500); --eco-teal-deep: var(--forest-950); --eco-green: var(--forest-500);
  --eco-orange: var(--terracotta); --eco-orange-2: var(--terracotta-700);
  --eco-ink: var(--ink); --eco-ink-2: #22302F; --eco-muted: var(--ink-soft);
  --eco-border: rgba(23,35,34,.10); --eco-border-strong: rgba(23,35,34,.18);
  --eco-shadow-sm: 0 1px 2px rgba(6,47,53,.05), 0 6px 18px -10px rgba(6,47,53,.18);
  --eco-shadow-md: 0 14px 34px -16px rgba(6,47,53,.28);
  --eco-radius-md: 16px; --eco-radius-lg: 18px; --eco-radius-xl: 24px;
  --eco-font-display: var(--font-display); --eco-font-sans: var(--font-ui);
  --eco-topo-opacity: 0; --brand: var(--forest-700);
  --wp-rail: 88px; --wp-rail-open: 256px; --wp-bnav: 68px;
  margin: 0; background: var(--sand-050) !important; color: var(--ink); font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}
body.wp-app h1, body.wp-app h2, body.wp-app h3, body.wp-app .font-display { font-family: var(--font-display); letter-spacing: -.015em; }
body.wp-app :focus-visible { outline: 3px solid var(--terracotta); outline-offset: 2px; }
body.wp-noscroll { overflow: hidden; }
.wp-ico { width: 21px; height: 21px; flex-shrink: 0; }
.wp-logo { width: 38px; height: 26px; flex-shrink: 0; }

/* Rail */
.wp-rail { display: none; }
@media (min-width: 1024px) {
  .wp-rail { position: fixed; inset: 0 auto 0 0; z-index: 45; width: var(--wp-rail); display: flex; flex-direction: column; padding: 16px 12px 12px; background: var(--forest-950); color: rgba(255,255,255,.76); background-image: radial-gradient(120% 60% at 0% 100%, rgba(20,125,104,.28), transparent 60%); overflow: hidden; transition: width var(--t) var(--ease); }
  .wp-rail-open .wp-rail { width: var(--wp-rail-open); }
  .wp-brand { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; margin-bottom: 6px; color: #fff; text-decoration: none; }
  .wp-rail-open .wp-brand { justify-content: flex-start; padding-left: 12px; }
  .wp-brand b { display: block; font-family: var(--font-display); font-size: 19px; font-weight: 600; line-height: 1; }
  .wp-brand small { display: block; margin-top: 3px; font-size: 9px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; opacity: .75; }
  .wp-lbl { display: none; white-space: nowrap; }
  .wp-rail-open .wp-lbl { display: block; }
  .wp-rail__nav { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; display: grid; gap: 6px; align-content: start; }
  .wp-rail__nav::-webkit-scrollbar { display: none; }
  .wp-group { display: grid; gap: 2px; }
  .wp-group + .wp-group { padding-top: 6px; border-top: 1px solid rgba(255,255,255,.07); }
  .wp-group__t { margin: 0 0 4px 12px; font-size: 10px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.45); }
  .wp-item { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 40px; padding: 0 12px; border: 0; border-radius: 12px; background: none; color: inherit; font: 600 14px var(--font-ui); text-decoration: none; cursor: pointer; }
  .wp-rail-open .wp-item { justify-content: flex-start; }
  .wp-item:hover { background: rgba(255,255,255,.07); color: #fff; }
  .wp-item.is-active { background: rgba(255,255,255,.11); color: #fff; }
  .wp-item.is-active::before { content: ""; position: absolute; left: -12px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--terracotta); }
  .wp-item.is-active .wp-ico { color: #FFB48A; }
  .wp-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--terracotta); color: #fff; font: 800 11px/20px var(--font-ui); text-align: center; }
  body:not(.wp-rail-open) .wp-badge { position: absolute; top: 6px; right: 12px; min-width: 9px; height: 9px; padding: 0; font-size: 0; }
  .wp-rail__foot { display: grid; gap: 2px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.08); }
  .wp-item--sub { color: rgba(255,255,255,.58); font-size: 13.5px; }
  .wp-chev { transition: transform var(--t) var(--ease); }
  .wp-rail-open .wp-chev { transform: rotate(180deg); }
  body.wp-app .wp-shift { margin-left: var(--wp-rail); transition: margin-left var(--t) var(--ease); }
  body.wp-app.wp-rail-open .wp-shift { margin-left: var(--wp-rail-open); }
}

/* Barra inferior + hoja */
.wp-bnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-template-columns: repeat(5, 1fr); height: calc(var(--wp-bnav) + env(safe-area-inset-bottom)); padding: 6px 6px env(safe-area-inset-bottom); background: rgba(255,255,255,.97); backdrop-filter: blur(14px); border-top: 1px solid rgba(23,35,34,.08); box-shadow: 0 -8px 24px -18px rgba(6,47,53,.35); }
.wp-bnav__i { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 52px; border: 0; background: none; color: var(--ink-soft); font: 600 11.5px/1 var(--font-ui); text-decoration: none; cursor: pointer; }
.wp-bnav__i .wp-ico { width: 23px; height: 23px; }
.wp-bnav__i.is-active { color: var(--forest-950); }
.wp-bnav__i.is-active::before { content: ""; position: absolute; top: 2px; width: 46px; height: 30px; border-radius: 999px; background: rgba(20,125,104,.12); z-index: -1; }
.wp-bnav__i.is-active .wp-ico { color: var(--forest-700); }
@media (min-width: 1024px) { .wp-bnav, .wp-sheet { display: none !important; } }
.wp-sheet { position: fixed; inset: 0; z-index: 70; }
.wp-sheet__scrim { position: absolute; inset: 0; background: rgba(6,47,53,.45); opacity: 0; transition: opacity 220ms; }
.wp-sheet__panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 88vh; overflow-y: auto; background: var(--sand-050); border-radius: 24px 24px 0 0; padding: 10px 16px calc(20px + env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform 260ms var(--ease); outline: 0; }
.wp-sheet.is-open .wp-sheet__scrim { opacity: 1; }
.wp-sheet.is-open .wp-sheet__panel { transform: none; }
.wp-sheet__grip { width: 44px; height: 5px; border-radius: 5px; background: rgba(23,35,34,.18); margin: 0 auto 8px; }
.wp-sheet__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.wp-sheet__head strong { font-family: var(--font-display); font-size: 24px; color: var(--forest-950); }
.wp-sheet__t { margin: 14px 2px 8px; font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); }
.wp-sheet__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.wp-sheet__i { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 84px; padding: 10px 4px; border-radius: 16px; background: #fff; border: 1px solid rgba(23,35,34,.08); color: var(--forest-950); font: 600 12.5px/1.15 var(--font-ui); text-align: center; text-decoration: none; }
.wp-sheet__i .wp-ico { width: 24px; height: 24px; color: var(--forest-700); }
.wp-sheet__i.is-active { border-color: var(--forest-500); box-shadow: inset 0 0 0 1px var(--forest-500); }
.wp-sheet__logout { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; margin-top: 16px; border: 1px solid rgba(23,35,34,.14); border-radius: 14px; background: #fff; color: var(--ink-soft); font: 600 14.5px var(--font-ui); cursor: pointer; }
.wp-iconbtn { width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(23,35,34,.12); background: #fff; display: grid; place-items: center; color: var(--forest-950); cursor: pointer; }

/* Componentes heredados (EcoUI + Tailwind) con acabado premium */
body.wp-app .eco-card, body.wp-app .eco-filtercard, body.wp-app .eco-empty, body.wp-app .eco-kpi { border-radius: 18px; border-color: rgba(23,35,34,.08); box-shadow: var(--eco-shadow-sm); }
body.wp-app .eco-btn { border-radius: 999px; font-weight: 700; }
body.wp-app .eco-btn--primary { background: var(--terracotta); border-color: var(--terracotta); color: #fff; }
body.wp-app .eco-btn--primary:hover { background: var(--terracotta-700); }
body.wp-app .eco-btn--teal { background: var(--forest-700); border-color: var(--forest-700); }
body.wp-app .eco-modhead { border-left: 0; padding-left: 0; }
body.wp-app .eco-modhead__bar { display: none; }
body.wp-app .eco-modhead__title { font-size: clamp(28px, 3.4vw, 42px); color: var(--forest-950); }
body.wp-app table { border-collapse: separate; border-spacing: 0; }
body.wp-app thead th { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); background: var(--sand-100); }
body.wp-app input:not([type=checkbox]):not([type=radio]):not([type=file]), body.wp-app select, body.wp-app textarea { border-radius: 12px; border-color: rgba(23,35,34,.16); font-family: var(--font-ui); }
body.wp-app input:focus, body.wp-app select:focus, body.wp-app textarea:focus { outline: none; border-color: var(--forest-500); box-shadow: 0 0 0 4px rgba(20,125,104,.14); }
body.wp-app .eco-shell__aside, body.wp-app .eco-bnav, body.wp-app .eco-appbar, body.wp-app .eco-scrim, body.wp-app .eco-topbar__burger { display: none !important; }
body.wp-app .eco-shell { display: block; }
body.wp-app .eco-shell__canvas { margin: 0; padding: 0; }
@media (prefers-reduced-motion: reduce) { body.wp-app *, body.wp-app *::before, body.wp-app *::after { transition: none !important; animation: none !important; } }
body.wp-app .eco-shell, body.wp-app #app { background: var(--sand-050) !important; min-height: 100vh; }
body.wp-app .eco-shell__canvas { min-height: 100vh; border-radius: 0 !important; background: var(--sand-050) !important; box-shadow: none !important; }

/* F90.1 — Tablas → tarjetas en el celular (las etiqueta portal-premium.js). */
@media (max-width: 720px) {
  body.wp-app #view table.wp-rtable { min-width: 0 !important; width: 100%; border: 0; background: transparent; }
  body.wp-app #view table.wp-rtable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body.wp-app #view table.wp-rtable, body.wp-app #view table.wp-rtable tbody, body.wp-app #view table.wp-rtable tr, body.wp-app #view table.wp-rtable td { display: block; width: 100%; }
  body.wp-app #view table.wp-rtable tr { margin: 0 0 10px; padding: 10px 14px; border-radius: 16px; background: #fff; border: 1px solid rgba(23,35,34,.1); }
  body.wp-app #view table.wp-rtable td { display: grid; grid-template-columns: minmax(92px, 36%) 1fr; align-items: center; gap: 10px; padding: 7px 0 !important; border: 0 !important; text-align: left !important; white-space: normal !important; font-size: 14.5px; }
  body.wp-app #view table.wp-rtable td + td { border-top: 1px solid rgba(23,35,34,.06) !important; }
  body.wp-app #view table.wp-rtable td::before { content: attr(data-label); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
  body.wp-app #view table.wp-rtable td[data-label=""] { grid-template-columns: 1fr; }
  body.wp-app #view table.wp-rtable td[data-label=""]::before { display: none; }
  body.wp-app #view table.wp-rtable td.wp-rtable__full { grid-template-columns: 1fr; color: var(--ink-soft); }
  body.wp-app #view table.wp-rtable td.wp-rtable__full::before { display: none; }
  body.wp-app #view table.wp-rtable td:first-child { font-weight: 700; color: var(--forest-950); }
  body.wp-app #view table.wp-rtable td[data-label="Acciones"] { display: flex; justify-content: flex-end; gap: 6px; }
  body.wp-app #view table.wp-rtable td[data-label="Acciones"]::before { display: none; }
  body.wp-app #view table.wp-rtable td[data-label="#"] { display: none; }
  body.wp-app #view .overflow-x-auto:has(> table.wp-rtable) { overflow: visible; border: 0 !important; background: transparent !important; box-shadow: none !important; }
}