/* Portal del propietario: misma marca que la landing (morado metálico, plata, esquinas rectas, filetes) en formato de app */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--papel); color: var(--tinta); font: 400 var(--t-m)/1.5 var(--sans); font-variant-numeric: tabular-nums; min-height: 100dvh; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--jacaranda); }
:focus-visible { outline: 2px solid var(--jacaranda-claro); outline-offset: 2px; }
.skip { position: fixed; left: 8px; top: 8px; z-index: 100; padding: 10px 14px; background: var(--papel); color: var(--tinta); transform: translateY(-160%); }
.skip:focus { transform: none; }

/* Encabezado: logotipo centrado, contexto debajo (receta de documentos) */
.pt-top { background: var(--morado-metal); padding: calc(14px + env(safe-area-inset-top, 0px)) var(--gutter) 12px; display: grid; justify-items: center; gap: 6px; }
.pt-top__logo img { height: 32px; width: auto; }
.pt-top__ctx { font: 600 var(--t-xs)/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--acento-claro); }
.pt-demo { background: var(--hueso); border-bottom: var(--hair) solid var(--linea); }
.pt-demo__in { max-width: var(--max); margin: 0 auto; padding: 10px var(--gutter); display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; font-size: var(--t-s); }
.pt-demo__in p { color: var(--piedra); flex: 1 1 280px; }
.pt-demo__sel { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.pt-demo__sel select { border: var(--hair) solid var(--jacaranda); background: var(--papel); padding: 8px 10px; min-height: 44px; border-radius: 0; }

/* Estructura */
.pt-app { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 0 var(--s-4); padding: 0 var(--gutter); }
.pt-nav { position: sticky; top: 0; align-self: start; padding-top: var(--s-4); display: grid; gap: 2px; }
.pt-nav button { all: unset; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 11px 12px; border-left: 2px solid transparent; color: var(--piedra); font-size: var(--t-s); }
@media (hover: hover) and (pointer: fine) { .pt-nav button:hover { color: var(--tinta); } }
.pt-nav button[aria-current="page"] { color: var(--tinta); font-weight: 600; border-left-color: var(--jacaranda); background: var(--hueso); }
.pt-nav button:focus-visible { outline: 2px solid var(--jacaranda-claro); }
.pt-nav .n { min-width: 20px; height: 20px; display: inline-grid; place-items: center; background: var(--jacaranda); color: var(--papel); font: 600 11px/1 var(--sans); padding: 0 6px; }
.pt-nav .lock { font-size: 11px; color: var(--acento-texto); }
.pt-main { padding: var(--s-4) 0 var(--s-6); min-width: 0; outline: none; }
.pt-casa { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; align-items: end; padding-bottom: var(--s-3); border-bottom: var(--hair) solid var(--tinta); margin-bottom: var(--s-4); }
.pt-casa h1 { font: 400 var(--t-xl)/1.05 var(--serif); }
.pt-k { font: 600 var(--t-xs)/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--acento-texto); }
.pt-sub { color: var(--piedra); font-size: var(--t-s); margin-top: 4px; }
.pt-gerente { font-size: var(--t-xs); color: var(--piedra); text-align: right; line-height: 1.5; }
.pt-gerente b { color: var(--tinta); font-size: var(--t-s); }

/* Bloques */
.pt-sec { display: grid; gap: var(--s-2); margin-top: var(--s-4); }
.pt-sec:first-child { margin-top: 0; }
.pt-sec > h2 { font: 400 var(--t-l)/1.2 var(--serif); display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.pt-sec > h2 small { font: 400 var(--t-xs)/1.3 var(--sans); color: var(--piedra); }
.pt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: var(--s-2); }
.pt-card { background: #fff; border: var(--hair) solid var(--linea); padding: 18px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.pt-card h3 { font: 600 var(--t-s)/1.3 var(--sans); }
.pt-card p { font-size: var(--t-s); color: var(--piedra); }
.pt-card .big { font: 400 2.5rem/1 var(--serif); color: var(--jacaranda); }
.pt-card .big small { font: 400 var(--t-s)/1 var(--sans); color: var(--piedra); }
.pt-card--osc { background: var(--morado-metal); color: var(--papel); border-color: transparent; }
.pt-card--osc p { color: #D9D0E2; } .pt-card--osc .pt-k { color: var(--acento-claro); } .pt-card--osc .big { color: var(--papel); }
.pt-bar { height: 8px; background: var(--hueso); position: relative; }
.pt-bar i { position: absolute; inset: 0 auto 0 0; background: var(--jacaranda); }
.pt-card--osc .pt-bar { background: rgba(245, 246, 248, .16); } .pt-card--osc .pt-bar i { background: var(--acento); }
.pil { display: inline-block; padding: 3px 8px; font: 600 12px/1.2 var(--sans); white-space: nowrap; background: var(--hueso); color: var(--piedra); }
.pil.ok { background: #E3F0E7; color: #2F6B45; } .pil.warn { background: #F7EDD5; color: #7E5610; } .pil.bad { background: #F6E1DF; color: #8E2F2F; } .pil.info { background: #ECE6F3; color: var(--jacaranda); }
.pt-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pt-list { list-style: none; display: grid; }
.pt-list > li { padding: 12px 0; border-top: var(--hair) solid var(--linea); display: grid; gap: 4px; }
.pt-list > li:first-child { border-top: 0; }
.pt-list .meta { font-size: var(--t-xs); color: var(--piedra); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; font: 600 var(--t-s)/1.2 var(--sans); border: var(--hair) solid var(--jacaranda); background: transparent; color: var(--jacaranda); cursor: pointer; text-decoration: none; border-radius: 0; transition: transform var(--dur-press) var(--ease-out), background-color 200ms ease, color 200ms ease; touch-action: manipulation; }
.btn:active { transform: scale(var(--press)); }
.btn--pri { background: var(--jacaranda); color: var(--papel); }
.btn--oro { background: var(--oro); color: var(--oro-tinta); border-color: transparent; }
.btn[disabled] { opacity: .5; cursor: default; }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: var(--hueso); } .btn--pri:hover { background: var(--jacaranda-profundo); } .btn--oro:hover { background: var(--plata); } }

/* Foto sellada: misma receta que la landing */
.pt-card > .shot { max-width: 340px; width: 100%; justify-self: center; }
.shot { position: relative; background: var(--tinta); border: 6px solid var(--papel); outline: var(--hair) solid var(--linea); }
.shot img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 62%; }
.stamp { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 1px; padding: 28px 12px 10px; background: linear-gradient(to bottom, rgba(20, 14, 24, 0), rgba(20, 14, 24, .82) 38%); color: #fff; font: 500 11.5px/1.35 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .02em; }
.stamp b { font-size: 18px; line-height: 1.15; font-weight: 500; }
.pend { aspect-ratio: 3 / 4; background: var(--jacaranda-claro); display: grid; place-items: center; position: relative; }
.pend span { font: 600 11px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--jacaranda-profundo); text-align: center; padding: 0 8px; }
.pend em { position: absolute; left: 0; right: 0; bottom: 0; font: 500 10px/1 ui-monospace, Menlo, monospace; font-style: normal; background: var(--jacaranda-profundo); color: #fff; padding: 5px 6px; text-align: center; }
.fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.puntos { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 0 18px; font-size: var(--t-s); }
.puntos li { padding: 7px 0 7px 22px; border-top: var(--hair) solid var(--linea); position: relative; }
.puntos li::before { content: ""; position: absolute; left: 0; top: 14px; width: 10px; height: 10px; background: #3E7A55; }
.puntos li.h::before { background: #A33A3A; }
details.pt-vis { background: #fff; border: var(--hair) solid var(--linea); }
details.pt-vis summary { cursor: pointer; list-style: none; padding: 14px 18px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
details.pt-vis summary::-webkit-details-marker { display: none; }
details.pt-vis summary b { font-weight: 600; }
details.pt-vis summary .meta { display: block; font-size: var(--t-xs); color: var(--piedra); }
details.pt-vis[open] summary { border-bottom: var(--hair) solid var(--linea); }
details.pt-vis > div { padding: 16px 18px; display: grid; gap: 14px; }

/* Decisión */
.opc { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 10px; }
.opc > div { border: var(--hair) solid var(--linea); padding: 14px; display: grid; gap: 8px; align-content: start; background: var(--papel); }
.opc .letra { font: 400 2rem/1 var(--serif); color: var(--jacaranda); }
.opc .precio { font: 400 1.5rem/1 var(--serif); }
.folio { font: 500 13px/1.3 ui-monospace, Menlo, monospace; background: var(--jacaranda-profundo); color: #fff; padding: 8px 10px; }

/* Bloqueado por plan */
.lockcard { border: var(--hair) dashed var(--jacaranda-claro); background: var(--papel); padding: 18px; display: grid; gap: 8px; }
.lockcard h3 { font: 400 var(--t-l)/1.2 var(--serif); }
.lockcard p { color: var(--piedra); font-size: var(--t-s); }

/* Tablas */
.tabla { overflow-x: auto; background: #fff; border: var(--hair) solid var(--linea); }
table { width: 100%; border-collapse: collapse; min-width: 620px; font-size: var(--t-s); }
th, td { text-align: left; padding: 10px 12px; border-bottom: var(--hair) solid var(--linea); vertical-align: top; }
th { font: 600 11px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--piedra); background: var(--hueso); white-space: nowrap; }
td.num, th.num { text-align: right; }
td .meta { display: block; font-size: var(--t-xs); color: var(--piedra); }
tbody tr:last-child td { border-bottom: 0; }

/* Proveedores */
.seg { display: inline-flex; border: var(--hair) solid var(--jacaranda); }
.seg button { all: unset; cursor: pointer; padding: 8px 12px; min-height: 28px; font-size: var(--t-xs); font-weight: 600; color: var(--jacaranda); }
.seg button[aria-pressed="true"] { background: var(--jacaranda); color: var(--papel); }
.seg button:focus-visible { outline: 2px solid var(--jacaranda-claro); }
.req { display: flex; flex-wrap: wrap; gap: 4px; }
.req i { font-style: normal; font-size: 11px; padding: 2px 6px; background: #E3F0E7; color: #2F6B45; }
.estrellas { display: inline-flex; gap: 2px; }
.estrellas button { all: unset; cursor: pointer; font-size: 22px; line-height: 1; color: var(--jacaranda-claro); padding: 2px; min-width: 24px; text-align: center; }
.estrellas button[aria-pressed="true"] { color: var(--jacaranda); }
.estrellas button:focus-visible { outline: 2px solid var(--jacaranda-claro); }
form.pt-form { display: grid; gap: 12px; }
form.pt-form label { display: grid; gap: 4px; font-size: var(--t-xs); font-weight: 600; color: var(--piedra); }
form.pt-form input, form.pt-form select, form.pt-form textarea { border: var(--hair) solid var(--linea); background: #fff; padding: 10px; min-height: 44px; border-radius: 0; font-size: 16px; font-weight: 400; color: var(--tinta); }
form.pt-form .chk { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; color: var(--tinta); font-size: var(--t-s); }
form.pt-form .chk input { min-height: 0; margin-top: 4px; }
.reglas { list-style: none; display: grid; gap: 0; font-size: var(--t-s); }
.reglas li { padding: 9px 0 9px 22px; border-top: var(--hair) solid var(--linea); position: relative; }
.reglas li::before { content: ""; position: absolute; left: 0; top: 17px; width: 8px; height: 8px; background: var(--acento); }
.cal { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.cal div { background: #fff; border: var(--hair) solid var(--linea); padding: 12px; display: grid; gap: 4px; align-content: start; }
.cal div.hoy { border-color: var(--jacaranda); outline: 1px solid var(--jacaranda); outline-offset: -1px; }
.cal b { font: 400 var(--t-m)/1.2 var(--serif); }
.cal span { font-size: var(--t-xs); color: var(--piedra); }

.pt-toast { position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 16px); background: var(--tinta); color: var(--papel); padding: 10px 16px; opacity: 0; pointer-events: none; transition: opacity 200ms ease, transform 240ms var(--ease-out); z-index: 30; max-width: calc(100% - 32px); font-size: var(--t-s); }
.pt-toast.on { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 860px) {
  .pt-app { grid-template-columns: minmax(0, 1fr); }
  .pt-nav { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 20; padding: 0 0 env(safe-area-inset-bottom, 0px); background: var(--jacaranda-profundo); display: flex; overflow-x: auto; scrollbar-width: none; gap: 0; }
  .pt-nav button { flex: 1 0 auto; flex-direction: column; justify-content: center; gap: 2px; border-left: 0; border-top: 2px solid transparent; padding: 10px 12px; min-height: 58px; color: #BBAFC6; font-size: 12px; }
  .pt-nav button[aria-current="page"] { background: transparent; color: var(--papel); border-top-color: var(--acento); }
  .pt-nav .n { position: absolute; transform: translate(14px, -12px); }
  .pt-nav button { position: relative; }
  .pt-main { padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }
  .pt-gerente { text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .btn, .pt-toast { transition: opacity 200ms ease; } .btn:active { transform: none; } }

.entradas { display: grid; gap: 8px; }
.entrada { background: #fff; border: var(--hair) solid var(--linea); padding: 14px 16px; display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 6px 18px; align-items: start; }
.entrada .cuando b { display: block; font-weight: 600; font-size: var(--t-s); }
.entrada .meta { font-size: var(--t-xs); color: var(--piedra); display: block; }
.entrada .que b { font-weight: 600; }
.entrada .chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.entrada .monto { text-align: right; font: 400 1.25rem/1.1 var(--serif); }
.entrada .estrellas { grid-column: 2 / -1; }
@media (max-width: 640px) { .entrada { grid-template-columns: minmax(0, 1fr) auto; } .entrada .cuando { grid-column: 1 / -1; } .entrada .estrellas { grid-column: 1 / -1; } }
.pt-card { grid-template-columns: minmax(0, 1fr); }

/* Índice de portales */
.hub { max-width: var(--max); margin: 0 auto; padding: var(--s-5) var(--gutter) var(--s-6); display: grid; gap: var(--s-4); }
.hub__head { max-width: 760px; display: grid; gap: 12px; }
.hub__head h1 { font: 400 var(--t-xxl)/1.02 var(--serif); text-wrap: balance; }
.hub__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--s-3); }
.hub__card { display: grid; gap: 12px; align-content: start; grid-template-rows: auto auto auto 1fr auto; }
.hub__card h2 { font: 400 var(--t-l)/1.2 var(--serif); }
.hub__shot { display: block; background: var(--morado-metal); padding: 24px 24px 0; overflow: hidden; aspect-ratio: 4 / 3.4; }
.hub__shot img { width: 100%; height: auto; outline: var(--hair) solid rgba(245, 246, 248, .2); transition: transform 400ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .hub__card:hover .hub__shot img { transform: translateY(-8px); } }
.hub__card .btn { justify-self: start; }
.hub__nota { max-width: 70ch; }
@media (prefers-reduced-motion: reduce) { .hub__shot img { transition: none; } }
/* Estado vacío de una lista */
.pt-vacio { display: grid; gap: 4px; padding: 18px 16px; text-align: center; border: var(--hair) dashed var(--linea); background: var(--papel); }
.pt-vacio b { font: 400 var(--t-m)/1.3 var(--serif); color: var(--tinta); }
.pt-vacio p { font-size: var(--t-s); color: var(--piedra); max-width: 42ch; margin-inline: auto; }
/* Servicios extra y encargos de concierge */
.px-buscar input { width: 100%; min-height: 44px; padding: 8px 12px; margin-bottom: var(--s-2); border: var(--hair) solid var(--linea); background: #fff; font: inherit; color: var(--tinta); }
.px-cat { margin-bottom: var(--s-2); }
.px-cat[hidden], .pt-list li[hidden] { display: none; }
.px-row { display: grid; grid-template-columns: 1fr auto auto; gap: 6px 16px; align-items: center; }
.px-row > span:first-child { display: grid; gap: 2px; }
.px-p { text-align: right; font: 400 var(--t-m)/1.2 var(--serif); color: var(--jacaranda); white-space: nowrap; }
.px-p small { display: block; font: 400 var(--t-xs)/1.3 var(--sans); color: var(--piedra); }
.px-p em { display: block; font: 600 var(--t-xs)/1.3 var(--sans); font-style: normal; color: var(--jacaranda); }
@media (max-width: 599px) { .px-row { grid-template-columns: 1fr auto; } .px-row .btn { grid-column: 1 / -1; justify-self: start; } }
@media (hover: hover) and (pointer: fine) { .px-buscar input:hover { border-color: var(--jacaranda); } }
.btn--s { min-height: 40px; padding: 0 14px; font-size: var(--t-xs); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }