#parcela-os-root, #parcela-os-root *{ box-sizing:border-box; }

/* Modo app: en celular, que el plugin ocupe TODO el espacio disponible,
   sin el padding/márgenes que el tema de WordPress le pone alrededor. */
body:has(#parcela-os-root){ margin:0 !important; padding:0 !important; background: #0f1912; }
body:has(#parcela-os-root) #masthead,
body:has(#parcela-os-root) .site-header,
body:has(#parcela-os-root) header.site-header,
body:has(#parcela-os-root) #colophon,
body:has(#parcela-os-root) footer.site-footer,
body:has(#parcela-os-root) .ast-scroll-top-container{ display:none !important; }
body:has(#parcela-os-root) #content,
body:has(#parcela-os-root) .ast-container,
body:has(#parcela-os-root) #page,
body:has(#parcela-os-root) .site,
body:has(#parcela-os-root) .site-content,
body:has(#parcela-os-root) .ast-container > .ast-row,
body:has(#parcela-os-root) .entry-content{ margin:0 !important; padding:0 !important; max-width:none !important; width:100% !important; }
@media (max-width: 779px){
  #parcela-os-root{ padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
  /* ocultar el botón de sonido en celular (deja más aire a los otros) */
  .pos-hide-mobile{ display:none !important; }
  /* banner más bajo en celular */
  .pos-home-header{ height: 240px !important; padding: 54px 20px 18px !important; }
  /* las fotos del banner con desenfoque suave, para que el nombre y Polito resalten */
  .pos-home-banner-img{ filter: blur(2px); }
  /* gradiente más marcado desde abajo hacia arriba */
  .pos-home-banner-gradient{ background: linear-gradient(180deg, rgba(15,25,18,0.25) 0%, rgba(15,25,18,0.5) 40%, rgba(15,25,18,0.82) 78%, var(--moss-900) 100%) !important; }
  /* FAB "+" alineado con el margen real del contenido */
  .pos-fab-add{ right: 20px !important; bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important; }
  /* el overflow del contenedor rompe el position:fixed del FAB en celular */
  #parcela-os-root{ overflow: visible !important; }
}
#parcela-os-root{
  --moss-950: #23402e;
  --moss-900: #2e5139;
  --moss-800: #3d6647;
  --sand-100: #f2ead9;
  --sand-200: #e6d9bd;
  --lantern: #e0a84f;
  --lantern-soft: #f0c877;
  --leaf: #6f9a5a;
  --leaf-bright: #8fbf72;
  --ink: #0c130e;
  --rope: #a9895a;
  --font-display: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  width: 100%;
  max-width: 1800px;
  margin: 0 auto;
  background:
    radial-gradient(circle at 15% 8%, rgba(143,191,114,0.18) 0%, transparent 30%),
    radial-gradient(circle at 85% 25%, rgba(111,154,90,0.15) 0%, transparent 28%),
    radial-gradient(circle at 25% 55%, rgba(163,209,127,0.12) 0%, transparent 26%),
    radial-gradient(circle at 90% 75%, rgba(143,191,114,0.14) 0%, transparent 30%),
    radial-gradient(circle at 40% 92%, rgba(111,154,90,0.12) 0%, transparent 28%),
    radial-gradient(ellipse at 20% -10%, #33543e 0%, transparent 55%),
    var(--moss-950);
  color: var(--sand-100);
  border-radius: 0;
  overflow: hidden;
  font-family: var(--font-body);
  min-height: 100dvh;
  min-height: 100vh;
  position: relative;
}

@media (min-width: 780px){
  #parcela-os-root{ width: 95%; border-radius: 24px; min-height: 600px; margin: 20px auto; }
  #parcela-os-root .pos-object-grid{ grid-template-columns: repeat(3, 1fr); }
  #parcela-os-root .pos-home-title{ font-size: 44px; }
  #parcela-os-root .pos-detail-title{ font-size: 34px; }
  #parcela-os-root .pos-detail-banner{ height: 340px; }
  #parcela-os-root .pos-detail-body{ max-width: 760px; margin: 0 auto; }
  #parcela-os-root .pos-fab-row{ max-width: 760px; margin: 0 auto; left:0; right:0; }
}
@media (min-width: 1100px){
  #parcela-os-root .pos-object-grid{ grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1500px){
  #parcela-os-root .pos-object-grid{ grid-template-columns: repeat(5, 1fr); }
}

.pos-screen{ display:none; flex-direction:column; min-height: 600px; }
.pos-screen.active{ display:flex; }
.pos-screen.pos-anim-in{ animation: pos-screen-in .32s cubic-bezier(.22,.9,.32,1); }
.pos-screen.pos-anim-out{ animation: pos-screen-out .26s cubic-bezier(.4,0,.7,.2); }
@keyframes pos-screen-in{
  from{ opacity:0; transform: translateY(22px) scale(0.97); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}
@keyframes pos-screen-out{
  from{ opacity:1; transform: translateY(0) scale(1); }
  to{ opacity:0; transform: translateY(18px) scale(0.97); }
}
@media (prefers-reduced-motion: reduce){ .pos-screen.pos-anim-in, .pos-screen.pos-anim-out{ animation:none; } }

/* Home */
.pos-home-header{ padding: 70px 24px 20px; position:relative; overflow:hidden; height: 330px; display:flex; flex-direction:column; justify-content:flex-end; }
.pos-home-header::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:80px; background: linear-gradient(180deg, transparent 0%, var(--moss-950) 96%); pointer-events:none; z-index:2; }
@media (min-width: 780px){ .pos-home-header{ height: 400px; } }
.pos-home-banner-slideshow{ position:absolute !important; inset:0; z-index:0 !important; }
.pos-home-banner-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: opacity 2.6s ease-in-out; transform: scale(1.1) translateZ(0); filter: blur(2px); will-change: opacity; backface-visibility: hidden; }
.pos-home-banner-img:nth-child(4n+1){ transform: scale(1.06) translateZ(0); }
.pos-home-banner-img:nth-child(4n+2){ transform: scale(1.06) translateZ(0); }
.pos-home-banner-img:nth-child(4n+3){ transform: scale(1.06) translateZ(0); }
.pos-home-banner-img:nth-child(4n){   transform: scale(1.06) translateZ(0); }
@keyframes pos-pan-right{ from{ transform: scale(1.1) translate(-2%,0); } to{ transform: scale(1.1) translate(2%,0); } }
@keyframes pos-pan-left{  from{ transform: scale(1.1) translate(2%,0); }  to{ transform: scale(1.1) translate(-2%,0); } }
@keyframes pos-pan-down{  from{ transform: scale(1.1) translate(0,-2%); } to{ transform: scale(1.1) translate(0,2%); } }
@keyframes pos-pan-up{    from{ transform: scale(1.1) translate(0,2%); }  to{ transform: scale(1.1) translate(0,-2%); } }
@media (prefers-reduced-motion: reduce){ .pos-home-banner-img{ animation:none !important; transform: scale(1) !important; } }
.pos-home-banner-gradient{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(15,25,18,0.25) 0%, rgba(15,25,18,0.45) 42%, rgba(15,25,18,0.78) 80%, var(--moss-900) 100%); z-index:1 !important; }
.pos-home-header > *{ position:relative; z-index:2; }
.pos-banner-actions{ position:absolute; top:16px; right:24px; left:24px; z-index:3; display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.pos-icon-btn{ width:42px; height:42px; border-radius:50%; background: rgba(15,25,18,0.6); border:1px solid rgba(255,255,255,0.15); color:var(--sand-100); display:flex; align-items:center; justify-content:center; font-size:17px; cursor:pointer; flex-shrink:0; }
.pos-icon-btn.add{ background: var(--lantern); color: var(--ink); border:none; font-size:20px; font-weight:700; }
.pos-upload-pill{ background: rgba(15,25,18,0.55); border:1px solid rgba(255,255,255,0.12); color:var(--sand-100); border-radius:20px; padding:7px 12px; font-family:var(--font-mono); font-size:10px; display:flex; align-items:center; gap:5px; cursor:pointer; margin-right:auto; }
.pos-banner-gallery-actions{ position:absolute; top:60px; right:24px; z-index:3; display:flex; align-items:center; gap:6px; }
.pos-banner-gal-btn{ border:1px solid rgba(242,234,217,0.3); border-radius:12px; padding:10px 14px; background: rgba(6,10,7,0.7); color: var(--sand-100); font-family:var(--font-body); font-weight:600; font-size:12.5px; letter-spacing:0.01em; cursor:pointer; white-space:nowrap; }
.pos-banner-gal-btn.upload{ padding:10px 12px; }
.pos-banner-gal-btn:active{ transform: scale(0.96); }
.pos-fab-add{ position:fixed; right:20px; bottom:24px; width:56px; height:56px; border-radius:50%; background: var(--lantern); color: var(--ink); border:none; font-size:26px; font-weight:700; box-shadow: 0 6px 18px rgba(0,0,0,0.45); z-index:100; cursor:pointer; }
.pos-fab-add:active{ transform: scale(0.94); }
@media (min-width: 780px){ .pos-fab-add{ right: calc(2.5% + 24px); } }
.pos-eyebrow{ display:flex; align-items:center; gap:9px; margin-bottom:10px; }
.pos-eyebrow-icon{ width:34px; height:34px; object-fit:contain; flex-shrink:0; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.4)); cursor:pointer; transform-origin: left center; position:relative; z-index:5; }
.pos-eyebrow-icon.pos-barking{ animation: pos-bark-pop 1.3s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes pos-bark-pop{
  0%   { transform: scale(1,1) rotate(0deg); }
  12%  { transform: scale(2.05, 1.7) rotate(-5deg); }
  22%  { transform: scale(1.85, 2.15) rotate(4deg); }
  34%  { transform: scale(2.05, 1.75) rotate(-4deg); }
  46%  { transform: scale(1.9, 2.05) rotate(2deg); }
  60%  { transform: scale(2,2) rotate(0deg); }
  100% { transform: scale(1,1) rotate(0deg); }
}
.pos-eyebrow-title{ font-family:var(--font-display); font-weight:700; font-size:14px; letter-spacing:0.02em; color: var(--sand-100); line-height:1.2; }
.pos-eyebrow-version{ font-family:var(--font-mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--leaf-bright); line-height:1.3; }
.pos-home-title{ font-family:var(--font-display); font-weight:700; font-size:32px; line-height:1.05; letter-spacing:-0.02em; color:var(--sand-100); }
.pos-home-sub{ margin-top:8px; font-size:13px; color: rgba(242,234,217,0.5); }

.pos-search-bar{ padding: 0 24px 14px; display:flex; gap:8px; }
.pos-search-bar input{ flex:1; min-width:0; padding:12px 14px; border-radius:16px; border:1px solid rgba(230,217,189,0.15); background:rgba(230,217,189,0.08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color:var(--sand-100); font-size:14px; font-family:var(--font-body); }
.pos-search-bar input::placeholder{ color: rgba(242,234,217,0.35); }
.pos-sort-select{ flex-shrink:0; padding:11px 10px; border-radius:14px; border:1px solid rgba(230,217,189,0.15); background:rgba(230,217,189,0.06); color:var(--sand-100); font-size:12px; font-family:var(--font-mono); max-width:118px; }

.pos-object-card.vencida{ border-color: rgba(224,122,95,0.5); }
.pos-object-card.vencida:not(.has-bg){ background: linear-gradient(155deg, rgba(224,122,95,0.16), rgba(224,122,95,0.04)); }
.pos-object-card.vencida .pos-object-meta{ color:#f0a58f; font-weight:600; }

.pos-section{ margin: 14px 16px 0; border-radius: 24px; padding-bottom: 4px; background: linear-gradient(160deg, rgba(255,255,255,0.08), rgba(200,225,190,0.03)); border:1px solid rgba(255,255,255,0.1); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12); }
.pos-section-label{ margin: 0; padding: 20px 24px 12px; font-family:var(--font-body); font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.14em; color: rgba(242,234,217,0.5); user-select:none; -webkit-user-select:none; touch-action: pan-y; cursor: grab; display:flex; align-items:center; gap:7px; }
.pos-drag-handle{ font-size:14px; opacity:0.5; letter-spacing:0; }
.pos-drag-jiggle{ animation: pos-jiggle 0.24s infinite ease-in-out alternate; }
.pos-drag-pressing{ transform: scale(0.97); transition: transform .2s ease; }
.pos-drag-active{ position:relative; z-index:60; box-shadow: 0 12px 30px rgba(0,0,0,0.55); border-radius: 18px; background-color: var(--moss-800); cursor: grabbing; pointer-events:none; }
.pos-drag-active .pos-section-label, .pos-drag-active .pos-object-card{ cursor: grabbing; }
.pos-object-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; padding: 4px 16px 20px; }
.pos-object-card-wrap{ position:relative; }

/* tintes muy leves por categoría */
.pos-section[data-cat="infraestructura"]{ background: rgba(224,178,95,0.09); }
.pos-section[data-cat="infraestructura"] .pos-section-label{ color: rgba(224,178,95,0.55); }
.pos-section[data-cat="equipamiento"]{ background: rgba(139,163,199,0.09); }
.pos-section[data-cat="equipamiento"] .pos-section-label{ color: rgba(139,163,199,0.55); }
.pos-section[data-cat="vegetacion"]{ background: rgba(129,178,111,0.09); }
.pos-section[data-cat="vegetacion"] .pos-section-label{ color: rgba(129,178,111,0.55); }
.pos-section[data-cat="animales"]{ background: rgba(199,146,95,0.09); }
.pos-section[data-cat="animales"] .pos-section-label{ color: rgba(199,146,95,0.55); }
.pos-section[data-cat="vehiculos"]{ background: rgba(95,178,199,0.09); }
.pos-section[data-cat="vehiculos"] .pos-section-label{ color: rgba(95,178,199,0.55); }
.pos-section[data-cat="otros"]{ background: rgba(180,150,199,0.09); }
.pos-section[data-cat="otros"] .pos-section-label{ color: rgba(180,150,199,0.55); }
.pos-object-card{ position:relative; overflow:hidden; width:100%; background: linear-gradient(155deg, rgba(255,255,255,0.22), rgba(220,240,210,0.08)); border:1px solid rgba(255,255,255,0.3); border-radius:20px; padding:0; cursor:pointer; text-align:left; color:inherit; font-family:inherit; display:flex; flex-direction:column; transition: transform .16s cubic-bezier(.34,1.4,.5,1), box-shadow .16s ease, border-color .16s ease; touch-action: pan-y; -webkit-user-select:none; user-select:none; box-shadow: 0 4px 16px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.35); }
.pos-object-card:active{ transform: scale(0.96); box-shadow: 0 3px 14px rgba(0,0,0,0.25); }
.pos-object-card:hover{ border-color: rgba(255,255,255,0.45); }
/* foto de banner de fondo — se ve bien, con velo claro por encima */
.pos-object-bg{ position:absolute; inset:0; background-size:cover; background-position:center; z-index:0; opacity:0.9; }
.pos-object-card.has-bg::after{ content:''; position:absolute; inset:0; z-index:1; background: linear-gradient(155deg, rgba(30,55,38,0.35) 0%, rgba(25,48,32,0.55) 70%, rgba(20,40,26,0.72) 100%); }
.pos-object-card-inner{ position:relative; z-index:2; padding:15px; display:flex; flex-direction:column; gap:10px; }
.pos-object-icon{ width:44px; height:44px; border-radius:12px; background: rgba(255,255,255,0.28); border:1px solid rgba(255,255,255,0.4); box-shadow: inset 0 1px 0 rgba(255,255,255,0.5); display:flex; align-items:center; justify-content:center; font-size:20px; }
.pos-object-name{ font-family:var(--font-display); font-weight:600; font-size:16px; letter-spacing:-0.01em; color:var(--sand-100); line-height:1.2; }
.pos-object-meta{ font-family:var(--font-body); font-size:12px; font-weight:500; color: rgba(242,234,217,0.55); letter-spacing:0.01em; }
.pos-empty-add{ border:1.5px dashed rgba(230,217,189,0.18); border-radius:18px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:22px 14px; color: rgba(242,234,217,0.35); font-family:var(--font-mono); font-size:11px; text-align:center; cursor:pointer; }

/* Detail */
.pos-detail-banner{ position:relative; height:210px; flex-shrink:0; display:flex; align-items:flex-end; overflow:hidden;
  background: linear-gradient(160deg, var(--moss-800) 0%, #396045 34%, #33583f 58%, var(--moss-900) 100%); }
/* grano finísimo: mata el banding que deja cualquier degradado grande en pantallas de 8 bits */
.pos-detail-banner::after{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0.35; mix-blend-mode:overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size:140px 140px; }
.pos-detail-banner img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0.9; }
/* El velo interpola siguiendo una curva ease-in en vez de una recta: un
   degradado lineal sobre un área así de grande produce bandas visibles. */
.pos-banner-gradient{ position:absolute; inset:0; z-index:2; background: linear-gradient(180deg,
  rgba(15,25,18,0.10) 0%,
  rgba(15,25,18,0.12) 28%,
  rgba(15,25,18,0.17) 44%,
  rgba(15,25,18,0.25) 56%,
  rgba(15,25,18,0.36) 66%,
  rgba(15,25,18,0.49) 75%,
  rgba(15,25,18,0.63) 83%,
  rgba(15,25,18,0.76) 90%,
  rgba(15,25,18,0.86) 96%,
  rgba(15,25,18,0.93) 100%); }
.pos-banner-top{ position:absolute; top:0; left:0; right:0; padding:16px 18px 0; display:flex; justify-content:space-between; z-index:4; }
.pos-back-btn{ height:44px; padding:0 18px 0 14px; border-radius:22px; background: rgba(15,25,18,0.65); border:1px solid rgba(255,255,255,0.15); color:var(--sand-100); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:15px; font-weight:600; gap:4px; }
.pos-upload-btn{ background: rgba(15,25,18,0.65); border:1px solid rgba(255,255,255,0.15); color:var(--sand-100); border-radius:22px; padding:11px 18px; font-family:var(--font-body); font-size:13px; font-weight:600; display:flex; align-items:center; gap:6px; cursor:pointer; }
.pos-detail-heading{ position:relative; z-index:3; padding:0 22px 18px; width:100%; display:flex; justify-content:space-between; align-items:flex-end; }
.pos-cat-tag{ font-family:var(--font-mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--lantern-soft); margin-bottom:4px; display:block; }
.pos-detail-title{ font-family:var(--font-display); font-weight:700; font-size:28px; line-height:1; letter-spacing:-0.02em; color:var(--sand-100); display:flex; align-items:center; gap:9px; }
.pos-info-toggle{ width:24px; height:24px; border-radius:50%; background: rgba(230,217,189,0.12); border:1px solid rgba(230,217,189,0.15); display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; transition: transform .25s ease; }
.pos-info-toggle.open{ transform: rotate(180deg); }

.pos-qr-tag{ position:relative; width:60px; height:60px; background: var(--sand-200); border-radius:8px 8px 8px 2px; display:flex; align-items:center; justify-content:center; cursor:pointer; transform: rotate(3deg); flex-shrink:0; border:1px solid rgba(0,0,0,0.15); }
.pos-qr-tag::before{ content:''; position:absolute; top:-11px; left:50%; width:2px; height:14px; background: var(--rope); transform: translateX(-50%) rotate(-8deg); }

.pos-detail-body{ padding: 20px 22px 140px; flex:1; }
.pos-info-card{ background: rgba(230,217,189,0.05); border:1px solid rgba(230,217,189,0.08); border-radius:16px; margin-bottom:22px; overflow:hidden; max-height:0; padding:0 16px; opacity:0; transition: max-height .3s ease, padding .3s ease, opacity .25s ease; }
.pos-info-card.open{ max-height:500px; padding:6px 16px; opacity:1; }
.pos-info-row{ display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px solid rgba(230,217,189,0.06); font-size:15px; }
.pos-info-row:last-child{ border-bottom:none; }
.pos-info-row .l{ color: rgba(242,234,217,0.45); }

.pos-datos-card{ background: rgba(230,217,189,0.05); border:1px solid rgba(230,217,189,0.08); border-radius:16px; padding: 4px 16px; margin-bottom:22px; }
.pos-dato-row{ position:relative; display:flex; flex-direction:column; padding:11px 34px 11px 0; border-bottom:1px solid rgba(230,217,189,0.06); }
.pos-dato-row:last-child{ border-bottom:none; }
.pos-dato-text .l{ font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:0.06em; color: rgba(242,234,217,0.4); display:block; margin-bottom:2px; }
.pos-dato-text .v{ font-size:15px; color:var(--sand-100); font-weight:600; white-space:pre-wrap; word-break:break-word; }
.pos-dato-row .pos-tl-pencil{ position:absolute; top:50%; right:6px; transform:translateY(-50%); }
.pos-info-row .v{ color: var(--sand-100); font-weight:500; text-align:right; }

.pos-section-title{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.pos-section-title h3{ font-family:var(--font-display); font-size:17px; font-weight:700; color:var(--sand-100); margin:0; }
.pos-mini-add{ font-family:var(--font-body); font-size:13px; font-weight:600; color:var(--lantern-soft); background: rgba(224,168,79,0.14); border:1px solid rgba(224,168,79,0.3); padding:10px 15px; border-radius:22px; cursor:pointer; }
.pos-mini-add.editing{ color:#e07a5f; background: rgba(224,122,95,0.14); border-color: rgba(224,122,95,0.3); }

.pos-timeline{ position:relative; padding-left:18px; margin-bottom:26px; }
.pos-timeline::before{ content:''; position:absolute; left:5px; top:6px; bottom:6px; width:1px; background: linear-gradient(180deg, rgba(143,191,114,0.5), rgba(143,191,114,0)); }
.pos-tl-item{ position:relative; padding-bottom:20px; padding-right:34px; transform-origin:50% 50%; }
.pos-tl-item:last-child{ padding-bottom:0; }
.pos-tl-dot{ position:absolute; left:-18px; top:3px; width:11px; height:11px; border-radius:50%; background: var(--leaf-bright); border:2px solid var(--moss-900); }
.pos-tl-item.hito .pos-tl-dot{ background: var(--lantern); width:13px; height:13px; left:-19px; top:3px; box-shadow: 0 0 0 4px rgba(224,168,79,0.18); }
.pos-tl-item.hito{ background: linear-gradient(135deg, rgba(224,168,79,0.14), rgba(224,168,79,0.03)); border:1px solid rgba(224,168,79,0.3); border-radius:14px; padding:12px 14px 24px 14px; }
.pos-hito-badge{ display:inline-block; font-family:var(--font-mono); font-size:9.5px; font-weight:700; letter-spacing:0.1em; color: var(--ink); background: var(--lantern-soft); padding:2px 8px; border-radius:6px; margin-bottom:6px; }
.pos-tl-item.hito .pos-tl-title{ font-size:17px; font-family:var(--font-display); }
.pos-tl-item.hito .pos-tl-date{ color: rgba(224,178,95,0.7); }
.pos-tl-date{ font-family:var(--font-mono); font-size:10.5px; color: rgba(242,234,217,0.4); margin-bottom:3px; }
.pos-tl-title{ font-size:14px; font-weight:700; color:var(--sand-100); margin-bottom:3px; }
.pos-tl-desc{ font-size:12.5px; color: rgba(242,234,217,0.55); line-height:1.4; margin-bottom:6px; }
.pos-empty-note{ font-family:var(--font-mono); font-size:11.5px; color: rgba(242,234,217,0.35); }

.pos-tl-photos{ display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.pos-tl-photo-wrap{ position:relative; width:44px; height:44px; }
.pos-tl-photos img{ width:44px; height:44px; object-fit:cover; border-radius:8px; border:1px solid rgba(230,217,189,0.15); cursor:pointer; display:block; }
.pos-photo-dl{ position:absolute; bottom:-5px; right:-5px; width:20px; height:20px; border-radius:50%; background: var(--lantern); color: var(--ink); display:flex; align-items:center; justify-content:center; font-size:10px; border:2px solid var(--moss-900); cursor:pointer; }

/* Modo eliminar: solo tiritan/ muestran la X cuando el timeline tiene .editing */
.pos-tl-x{ display:none; position:absolute; top:0; right:0; width:20px; height:20px; border-radius:50%; background: rgba(224,122,95,0.18); color: #e07a5f; border:none; font-size:11px; cursor:pointer; align-items:center; justify-content:center; }
.pos-tl-edit{ display:none; position:absolute; top:0; right:26px; width:20px; height:20px; border-radius:50%; background: rgba(224,178,95,0.18); color: #e0b25f; border:none; font-size:10px; cursor:pointer; align-items:center; justify-content:center; }
.pos-timeline.editing .pos-tl-edit{ display:flex; animation: pos-jiggle 0.22s infinite ease-in-out alternate; }
.pos-timeline.editing .pos-tl-x{ display:flex; animation: pos-jiggle 0.22s infinite ease-in-out alternate; }
.pos-timeline.editing .pos-tl-item{ animation: pos-jiggle 0.28s infinite ease-in-out alternate; }
.pos-timeline.editing .pos-tl-item:nth-child(even){ animation-delay: -0.14s; animation-duration: 0.24s; }
.pos-timeline.editing .pos-tl-item:nth-child(3n){ animation-duration: 0.32s; }
@keyframes pos-jiggle{ 0%{ transform: rotate(-0.6deg); } 100%{ transform: rotate(0.6deg); } }
@media (prefers-reduced-motion: reduce){ .pos-timeline.editing .pos-tl-item, .pos-timeline.editing .pos-tl-x{ animation:none; } }

.pos-fab-row{ position:absolute; bottom:18px; left:22px; right:22px; display:flex; gap:8px; z-index:5; }
.pos-fab{ flex:1; padding:13px 6px; border-radius:16px; border:none; font-family:var(--font-mono); font-size:10.5px; font-weight:700; cursor:pointer; text-align:center; display:flex; align-items:center; justify-content:center; }
.pos-fab.primary{ background: var(--leaf-bright); color: var(--ink); }
.pos-fab.secondary{ background: rgba(230,217,189,0.1); color: var(--sand-100); border:1px solid rgba(230,217,189,0.15); }
.pos-delete-object-row{ position:absolute; bottom:78px; left:22px; right:22px; text-align:center; z-index:5; }
.pos-delete-object-row button{ background:none; border:none; color:rgba(224,122,95,0.75); font-family:var(--font-mono); font-size:10.5px; cursor:pointer; padding:6px; }

/* Galería */
.pos-gallery-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:8px; margin-bottom: 10px; }
@media (min-width: 780px){ .pos-gallery-grid{ grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1100px){ .pos-gallery-grid{ grid-template-columns: repeat(7, 1fr); } }
.pos-gallery-item{ position:relative; aspect-ratio: 1; border-radius:12px; overflow:hidden; }
.pos-gallery-item img{ width:100%; height:100%; object-fit:cover; cursor:pointer; display:block; transition: transform .14s ease; }
.pos-gallery-item img:active{ transform: scale(0.94); }
.pos-gallery-item .pos-tl-x{ top:4px; right:4px; }
.pos-gallery-item.editing-item{ animation: pos-jiggle 0.26s infinite ease-in-out alternate; }

.pos-dropzone{ border:1.5px dashed rgba(230,217,189,0.2); border-radius:14px; padding:16px; text-align:center; cursor:pointer; font-family:var(--font-mono); font-size:11px; color: rgba(242,234,217,0.5); margin-bottom:12px; transition: background .15s ease, border-color .15s ease; position:relative; }
.pos-dropzone.dragover{ background: rgba(143,191,114,0.1); border-color: var(--leaf-bright); color: var(--leaf-bright); }
.pos-dropzone input{ position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; }

/* Modal */
.pos-modal-backdrop{ position:fixed; inset:0; background: rgba(6,10,7,0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display:flex; align-items:center; justify-content:center; z-index:9999; opacity:0; pointer-events:none; transition: opacity .25s ease; padding: 20px; }
.pos-modal-backdrop.open{ opacity:1; pointer-events:auto; }
.pos-modal{ width:100%; max-width:280px; background: var(--sand-100); color: var(--ink); border-radius:24px; padding:22px; text-align:center; max-height: 85vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.05); transform: scale(0.92) translateY(10px); opacity:0; transition: transform .3s cubic-bezier(.34,1.4,.5,1), opacity .25s ease; }
.pos-modal-backdrop.open .pos-modal{ transform: scale(1) translateY(0); opacity:1; }
@media (min-width: 780px){ .pos-modal{ max-width: 380px; padding: 28px; } .pos-modal h4{ font-size: 22px; } }
.pos-modal h4{ font-family:var(--font-display); font-size:22px; margin: 0 0 4px; }
.pos-modal.left{ text-align:left; }
.pos-qr-id{ font-family:var(--font-mono); font-size:11px; color:#6a5c40; margin-bottom:16px; }
.pos-qr-canvas-wrap{ background:#fff; border-radius:12px; padding:14px; display:inline-flex; margin-bottom:16px; }
.pos-modal-actions{ display:flex; gap:8px; margin-top: 10px; }
.pos-modal-actions button{ flex:1; padding:11px; border-radius:10px; border:none; font-family:var(--font-mono); font-size:12px; font-weight:700; cursor:pointer; }
.pos-modal-actions button:disabled{ opacity:0.6; cursor:not-allowed; }

.pos-photo-viewer{ max-width: 640px; padding: 14px; }
@media (min-width: 780px){ .pos-photo-viewer{ max-width: 720px; } }
.pos-photo-track-wrap{ position:relative; border-radius:14px; overflow:hidden; background: #050805; user-select:none; touch-action: pan-y; }
.pos-photo-track{ display:flex; width:100%; transition: transform .28s ease; }
.pos-photo-slide{ flex: 0 0 100%; display:flex; align-items:center; justify-content:center; position:relative; }
.pos-photo-slide img{ width:100%; max-height: 74vh; object-fit: contain; display:block; pointer-events:none; }
.pos-photo-date-overlay{ position:absolute; right:14px; bottom:14px; background: rgba(6,10,7,0.6); color:#f2ead9; font-family:var(--font-mono); font-weight:700; font-size:16px; padding:6px 12px; border-radius:10px; letter-spacing:0.02em; pointer-events:none; }
@media (min-width: 780px){ .pos-photo-date-overlay{ font-size:19px; padding:8px 14px; } }
.pos-photo-date-badge{ position:absolute; left:6px; bottom:6px; background: rgba(6,10,7,0.6); color:#f2ead9; font-family:var(--font-mono); font-size:9px; padding:2px 6px; border-radius:6px; }
.pos-photo-nav{ position:absolute; top:50%; transform:translateY(-50%); width:36px; height:36px; border-radius:50%; border:none; background:rgba(6,10,7,0.55); color:#f2ead9; font-size:22px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.pos-photo-nav.prev{ left:10px; }
.pos-photo-nav.next{ right:10px; }
.pos-photo-dots{ display:flex; justify-content:center; gap:6px; margin: 10px 0 4px; }
.pos-photo-dot{ width:6px; height:6px; border-radius:50%; background: rgba(242,234,217,0.25); }
.pos-photo-dot.active{ background: var(--leaf-bright); }
.pos-btn-dark{ background: var(--ink); color: var(--sand-100); }
.pos-btn-light{ background: rgba(12,19,14,0.08); color: var(--ink); }
.pos-btn-danger{ background: #e07a5f; color: #fff; }
.pos-qr-url{ margin-top:12px; font-family:var(--font-mono); font-size:9.5px; color:#8a7a56; word-break: break-all; }

.pos-field{ margin-bottom:12px; text-align:left; }
.pos-field label{ display:block; font-family:var(--font-mono); font-size:11.5px; text-transform:uppercase; letter-spacing:0.06em; color:#6a5c40; margin-bottom:6px; font-weight:700; }
.pos-field input, .pos-field select, .pos-field textarea{ width:100%; border:1px solid rgba(12,19,14,0.15); background: rgba(12,19,14,0.04); border-radius:10px; padding:11px 12px; font-family: var(--font-body); font-size:15px; color:var(--ink); resize:vertical; }

.pos-upload-progress{ font-family:var(--font-mono); font-size:10.5px; color:#6a5c40; margin-top:6px; display:flex; align-items:center; gap:6px; }
.pos-spinner{ width:12px; height:12px; border-radius:50%; border:2px solid rgba(12,19,14,0.15); border-top-color:#0c130e; animation: pos-spin 0.7s linear infinite; }
@keyframes pos-spin{ to{ transform: rotate(360deg); } }

.pos-recordatorio-label{ font-family:var(--font-mono); font-size:12px; font-weight:700; color:#0c130e; margin-bottom:8px; }
.pos-recordatorio-buttons{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.pos-recordatorio-btn{ border:1.5px solid rgba(12,19,14,0.18); border-radius:12px; padding:12px 8px; background: rgba(12,19,14,0.03); color:#0c130e; font-family:var(--font-mono); font-size:13px; font-weight:700; cursor:pointer; }
.pos-recordatorio-btn.active{ background: #c26a3f; border-color:#c26a3f; color:#fff; }
.pos-recordatorio-btn:active{ transform: scale(0.97); }
.pos-dial-value{ font-family:var(--font-mono); font-size:13px; font-weight:700; color:#0c130e; margin-top:8px; text-align:center; }

.pos-loading{ padding: 60px 24px; text-align:center; font-family: var(--font-mono); font-size: 12px; color: rgba(242,234,217,0.4); }

/* ---------------- micro-interacciones: feedback táctil transversal ---------------- */
.pos-mini-add, .pos-icon-btn, .pos-empty-add, .pos-tl-photo-wrap img, .pos-photo-dl,
.pos-btn-dark, .pos-btn-light, .pos-btn-danger, .pos-modal-actions button,
.pos-qr-canvas-wrap, .pos-dato-row .pos-tl-edit, .pos-dato-row .pos-tl-x{
  transition: transform .13s ease;
}
.pos-mini-add:active, .pos-icon-btn:active, .pos-empty-add:active, .pos-tl-photo-wrap img:active,
.pos-btn-dark:active, .pos-btn-light:active, .pos-btn-danger:active, .pos-modal-actions button:active{
  transform: scale(0.94);
}

/* ---------------- textura sutil de grano ---------------- */
#parcela-os-root::after{
  content:'';
  position:absolute; inset:0;
  pointer-events:none;
  z-index:9998;
  opacity:0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 120px 120px;
}

/* ---------------- luciérnagas nocturnas en el banner ---------------- */
.pos-home-header .pos-firefly{
  position:absolute; width:3px; height:3px; border-radius:50%;
  background: var(--lantern-soft);
  box-shadow: 0 0 6px 2px rgba(240,200,119,0.7);
  pointer-events:none; z-index:1;
  animation: pos-firefly-float 9s ease-in-out infinite;
  opacity:0;
}
.pos-home-header .pos-firefly:nth-child(1){ left:8%;  top:70%; animation-delay:0s;    animation-duration:10s; }
.pos-home-header .pos-firefly:nth-child(2){ left:22%; top:30%; animation-delay:1.4s;  animation-duration:8s; }
.pos-home-header .pos-firefly:nth-child(3){ left:38%; top:55%; animation-delay:2.6s;  animation-duration:11s; }
.pos-home-header .pos-firefly:nth-child(4){ left:55%; top:20%; animation-delay:0.6s;  animation-duration:9.5s; }
.pos-home-header .pos-firefly:nth-child(5){ left:68%; top:65%; animation-delay:3.2s;  animation-duration:8.5s; }
.pos-home-header .pos-firefly:nth-child(6){ left:80%; top:35%; animation-delay:1.8s;  animation-duration:10.5s; }
.pos-home-header .pos-firefly:nth-child(7){ left:90%; top:60%; animation-delay:2.2s;  animation-duration:9s; }
.pos-home-header .pos-firefly:nth-child(8){ left:15%; top:45%; animation-delay:4s;    animation-duration:12s; }
@keyframes pos-firefly-float{
  0%   { opacity:0; transform: translate(0,0) scale(0.8); }
  15%  { opacity:0.9; }
  50%  { opacity:0.5; transform: translate(14px,-22px) scale(1.15); }
  85%  { opacity:0.8; }
  100% { opacity:0; transform: translate(-8px,-38px) scale(0.8); }
}
@media (prefers-reduced-motion: reduce){ .pos-firefly{ animation:none !important; opacity:0 !important; } }

/* ---------------- deslizar para actualizar ---------------- */
.pos-ptr-indicator{
  position:absolute; top:8px; left:50%; margin-left:-15px;
  width:30px; height:30px; border-radius:50%;
  background: rgba(6,10,7,0.6); color: var(--leaf-bright);
  display:flex; align-items:center; justify-content:center;
  font-size:15px; opacity:0; z-index:60; pointer-events:none;
  transition: opacity .15s ease;
}
.pos-ptr-indicator.spinning{ animation: pos-spin 0.7s linear infinite; }
@keyframes pos-spin{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } }

/* ---------------- aviso de sin conexión ---------------- */
.pos-offline-banner{
  position:fixed; left:0; right:0; top:0; z-index:10001;
  background: #c26a3f; color:#fff; text-align:center;
  font-family:var(--font-mono); font-size:12px; font-weight:700;
  padding:10px 16px; transform: translateY(-100%);
  transition: transform .3s ease;
}
.pos-offline-banner.show{ transform: translateY(0); }

/* ---------------- banner de activar notificaciones ---------------- */
.pos-notif-banner{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:10000;
  background: var(--moss-800); border:1px solid rgba(230,217,189,0.15);
  border-radius:16px; padding:14px 16px; box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  display:flex; flex-direction:column; gap:10px;
  font-family:var(--font-body); font-size:13.5px; color:var(--sand-100);
  max-width:420px; margin:0 auto;
}
.pos-notif-banner-actions{ display:flex; gap:8px; }
.pos-notif-banner-actions button{ flex:1; padding:9px; border-radius:10px; border:none; font-family:var(--font-mono); font-size:11px; font-weight:700; cursor:pointer; }
.pos-notif-banner-actions #pos-notif-yes{ background: var(--lantern); color:var(--ink); }
.pos-notif-banner-actions #pos-notif-no{ background: rgba(230,217,189,0.1); color:var(--sand-100); }

.pos-inline-error{ background: rgba(224,122,95,0.12); border:1px solid rgba(224,122,95,0.3); color:#c0503a; font-size:12.5px; padding:9px 12px; border-radius:10px; margin: -4px 0 12px; }

/* ---------------- toast flotante (reemplaza al alert() del navegador) ---------------- */
.pos-toast{
  position:fixed; left:50%; bottom:26px; transform: translate(-50%, 20px);
  max-width: 90%; z-index: 10002;
  background: var(--moss-800); color: var(--sand-100);
  border:1px solid rgba(230,217,189,0.15); border-radius:14px;
  padding:12px 18px; font-family:var(--font-body); font-size:13.5px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  opacity:0; pointer-events:none;
  transition: opacity .25s ease, transform .25s ease;
  text-align:center;
}
.pos-toast.show{ opacity:1; transform: translate(-50%, 0); }

/* ---------------- barra de progreso de mantención en tarjeta (estilo videojuego) ---------------- */
.pos-obj-bar{ width:100%; height:5px; border-radius:3px; background: rgba(6,10,7,0.4); overflow:hidden; margin-top:2px; }
.pos-obj-bar-fill{ height:100%; border-radius:3px; transition: width .4s ease; }

/* ---------------- resumen "Pendientes de Atención" ---------------- */
.pos-pendientes{ margin: 4px 16px 8px; background: linear-gradient(135deg, rgba(224,122,95,0.16), rgba(224,122,95,0.05)); border:1px solid rgba(224,122,95,0.35); border-radius:16px; padding:14px 16px; }
.pos-pendientes-head{ font-family:var(--font-mono); font-size:12px; font-weight:700; color:#e07a5f; text-transform:uppercase; letter-spacing:0.05em; display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.pos-pendientes-count{ background:#e07a5f; color:#fff; border-radius:20px; min-width:20px; height:20px; padding:0 6px; display:inline-flex; align-items:center; justify-content:center; font-size:11px; }
.pos-pendientes-list{ display:flex; flex-wrap:wrap; gap:6px; }
.pos-pendiente-chip{ background: rgba(6,10,7,0.35); border:1px solid rgba(242,234,217,0.15); color:var(--sand-100); border-radius:10px; padding:7px 12px; font-family:var(--font-body); font-size:13px; cursor:pointer; transition: transform .13s ease; }
.pos-pendiente-chip:active{ transform: scale(0.95); }

/* ---------------- hint de fecha "Hoy" ---------------- */
.pos-fecha-hint{ margin-top:5px; font-family:var(--font-mono); font-size:11px; color:#6a5c40; }
.pos-fecha-hint.is-today{ color:#3d7a2f; font-weight:700; }

/* ---------------- botón "repetir última mantención" ---------------- */
.pos-repeat-btn{ width:100%; margin-bottom:12px; padding:10px; border-radius:12px; border:1px dashed rgba(12,19,14,0.25); background: rgba(12,19,14,0.03); color:var(--ink); font-family:var(--font-mono); font-size:12px; font-weight:700; cursor:pointer; }
.pos-repeat-btn:active{ transform: scale(0.98); }

/* ---------------- lápiz discreto para editar (ver = tocar el resto; editar = tocar el lápiz) ---------------- */
.pos-tl-pencil{ position:absolute; top:8px; right:6px; width:28px; height:28px; border-radius:50%; background: rgba(230,217,189,0.08); color: rgba(242,234,217,0.55); display:flex; align-items:center; justify-content:center; font-size:13px; cursor:pointer; transition: background .13s ease, transform .13s ease; z-index:3; }
.pos-tl-pencil:active{ transform: scale(0.88); background: rgba(230,217,189,0.18); }
.pos-tl-item.hito .pos-tl-pencil{ top:12px; }

/* ---------------- botón eliminar dentro de los modales de editar ---------------- */
.pos-modal-delete{ width:100%; margin-top:10px; padding:11px; border-radius:12px; border:1px solid rgba(224,122,95,0.35); background: rgba(224,122,95,0.1); color:#c0503a; font-family:var(--font-mono); font-size:12px; font-weight:700; cursor:pointer; }
.pos-modal-delete:active{ transform: scale(0.98); }

/* ---------------- selector de fotos (cámara + galería, con miniaturas) ---------------- */
.pos-photo-thumbs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.pos-photo-thumbs-empty{ width:100%; text-align:center; padding:16px; border:1.5px dashed rgba(12,19,14,0.18); border-radius:12px; color:#8a7f68; font-size:12.5px; }
.pos-photo-thumb{ position:relative; width:66px; height:66px; border-radius:10px; overflow:hidden; background:rgba(12,19,14,0.06); }
.pos-photo-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.pos-photo-thumb.existing::after{ content:'✓'; position:absolute; bottom:2px; left:4px; color:#fff; font-size:11px; text-shadow:0 1px 2px rgba(0,0,0,0.7); }
.pos-photo-thumb-x{ position:absolute; top:2px; right:2px; width:20px; height:20px; border-radius:50%; background:rgba(6,10,7,0.7); color:#fff; border:none; font-size:11px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.pos-photo-add-row{ display:flex; gap:8px; }
.pos-photo-add-btn{ flex:1; position:relative; display:flex; align-items:center; justify-content:center; gap:6px; padding:13px 8px; border-radius:12px; border:1.5px solid rgba(12,19,14,0.18); background:rgba(12,19,14,0.03); color:var(--ink); font-family:var(--font-body); font-size:13px; font-weight:600; cursor:pointer; text-align:center; }
.pos-photo-add-btn.camera{ background:rgba(143,191,114,0.14); border-color:rgba(143,191,114,0.4); }
.pos-photo-add-btn.full{ background:rgba(143,191,114,0.14); border-color:rgba(143,191,114,0.4); padding:15px 8px; font-size:14px; }
.pos-photo-add-btn:active{ transform:scale(0.97); }
.pos-photo-add-btn input{ position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; }

/* ---------------- selector de ícono (emoji) al lado del nombre ---------------- */
.pos-name-icon-row{ display:flex; gap:8px; }
.pos-icon-picker-btn{ flex-shrink:0; width:48px; height:48px; border-radius:12px; border:1.5px solid rgba(12,19,14,0.18); background:rgba(12,19,14,0.04); font-size:24px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.pos-icon-picker-btn:active{ transform:scale(0.95); }
.pos-name-icon-row input{ flex:1; min-width:0; }
.pos-emoji-panel{ display:grid; grid-template-columns: repeat(8, 1fr); gap:4px; margin-top:10px; max-height:180px; overflow-y:auto; padding:10px; background:rgba(12,19,14,0.04); border-radius:12px; border:1px solid rgba(12,19,14,0.1); }
.pos-emoji-opt{ aspect-ratio:1; border:none; background:transparent; font-size:22px; cursor:pointer; border-radius:8px; display:flex; align-items:center; justify-content:center; }
.pos-emoji-opt:active{ background:rgba(12,19,14,0.1); transform:scale(0.9); }

/* ---------------- selector de color del QR ---------------- */
.pos-qr-colors{ display:flex; gap:10px; justify-content:center; margin:14px 0; }
.pos-qr-color-btn{ width:32px; height:32px; border-radius:50%; border:2px solid rgba(12,19,14,0.15); cursor:pointer; transition: transform .13s ease; }
.pos-qr-color-btn.active{ border-color: var(--lantern); transform: scale(1.15); box-shadow: 0 0 0 2px rgba(224,168,79,0.3); }
.pos-qr-color-btn:active{ transform: scale(0.92); }

/* ---------------- animaciones de entrada escalonadas (tipo iOS) ---------------- */
@keyframes pos-rise{
  from{ opacity:0; transform: translateY(16px); }
  to{ opacity:1; transform: translateY(0); }
}
.pos-object-card-wrap{ animation: pos-rise .5s cubic-bezier(.22,.9,.32,1) backwards; contain: layout; }
.pos-object-grid .pos-object-card-wrap:nth-child(1){ animation-delay: .02s; }
.pos-object-grid .pos-object-card-wrap:nth-child(2){ animation-delay: .06s; }
.pos-object-grid .pos-object-card-wrap:nth-child(3){ animation-delay: .10s; }
.pos-object-grid .pos-object-card-wrap:nth-child(4){ animation-delay: .14s; }
.pos-object-grid .pos-object-card-wrap:nth-child(5){ animation-delay: .18s; }
.pos-object-grid .pos-object-card-wrap:nth-child(n+6){ animation-delay: .22s; }
.pos-section{ animation: pos-rise .55s cubic-bezier(.22,.9,.32,1) backwards; }
.pos-section:nth-of-type(1){ animation-delay: 0s; }
.pos-section:nth-of-type(2){ animation-delay: .08s; }
.pos-section:nth-of-type(3){ animation-delay: .16s; }
.pos-section:nth-of-type(n+4){ animation-delay: .24s; }

/* la barra de progreso se llena con animación al aparecer */
@keyframes pos-bar-grow{ from{ transform: scaleX(0); } to{ transform: scaleX(1); } }
.pos-obj-bar-fill{ transform-origin: left center; animation: pos-bar-grow .7s cubic-bezier(.22,.9,.32,1) .3s backwards; }

/* elementos del detalle entran escalonados */
.pos-detail-body > *{ animation: pos-rise .5s cubic-bezier(.22,.9,.32,1) backwards; }
.pos-detail-body > *:nth-child(1){ animation-delay: .04s; }
.pos-detail-body > *:nth-child(2){ animation-delay: .10s; }
.pos-detail-body > *:nth-child(3){ animation-delay: .16s; }
.pos-detail-body > *:nth-child(4){ animation-delay: .22s; }
.pos-detail-body > *:nth-child(n+5){ animation-delay: .28s; }

@media (prefers-reduced-motion: reduce){
  .pos-object-card-wrap, .pos-section, .pos-obj-bar-fill, .pos-detail-body > *{ animation:none !important; }
}

/* ---------------- ambiente según la hora del día (tinte sutil del fondo) ---------------- */
#parcela-os-root{ transition: background 1.5s ease; }
#parcela-os-root.pos-ambient-manana{ background: linear-gradient(180deg, #2c5038 0%, var(--moss-950) 60%); }
#parcela-os-root.pos-ambient-tarde{ background: linear-gradient(180deg, #345740 0%, var(--moss-950) 60%); }
#parcela-os-root.pos-ambient-atardecer{ background: linear-gradient(180deg, #46443a 0%, #33543e40 30%, var(--moss-950) 65%); }
#parcela-os-root.pos-ambient-noche{ background: linear-gradient(180deg, #223d44 0%, var(--moss-950) 55%); }

/* optimización móvil: desactivar animaciones de entrada para evitar parpadeos */
@media (max-width: 779px){
  .pos-object-card-wrap, .pos-section, .pos-detail-body > *{ animation: none !important; opacity: 1 !important; transform: none !important; }
  .pos-obj-bar-fill{ animation: none !important; transform: scaleX(1) !important; }
}

/* ---------------- pantalla de acceso 3.0: glass verde claro luminoso ---------------- */
.pos-gate-wrap{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:90vh; padding:24px; overflow:hidden; }
/* orbes de luz verde de fondo, dan profundidad sin costo */
.pos-gate-wrap::before{ content:''; position:absolute; top:-10%; left:15%; width:340px; height:340px; border-radius:50%; background: radial-gradient(circle, rgba(143,191,114,0.28) 0%, transparent 70%); filter: blur(30px); pointer-events:none; }
.pos-gate-wrap::after{ content:''; position:absolute; bottom:-5%; right:12%; width:300px; height:300px; border-radius:50%; background: radial-gradient(circle, rgba(111,154,90,0.22) 0%, transparent 70%); filter: blur(30px); pointer-events:none; }
.pos-gate-card{
  position:relative; z-index:2;
  width:100%; max-width:360px;
  padding:44px 34px 36px;
  text-align:center;
  border-radius:32px;
  background:
    linear-gradient(180deg, rgba(230,245,215,0.22) 0%, rgba(180,215,160,0.08) 30%, transparent 55%),
    linear-gradient(155deg, rgba(150,195,130,0.22) 0%, rgba(90,140,95,0.14) 50%, rgba(40,70,50,0.22) 100%);
  border:1px solid rgba(235,248,220,0.25);
  box-shadow:
    0 24px 60px rgba(0,0,0,0.35),
    0 0 0 1px rgba(255,255,255,0.04),
    inset 0 1px 0 rgba(255,255,255,0.25),
    inset 0 -2px 12px rgba(20,40,25,0.3);
  overflow:hidden;
}
/* destello de luz que cruza el vidrio */
.pos-gate-card::before{
  content:''; position:absolute; top:-50%; left:-40%; width:90%; height:150%;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%);
  transform: rotate(15deg); pointer-events:none;
}
.pos-gate-icon{ font-size:44px; margin-bottom:16px; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.35)); }
.pos-gate-title{ font-family:var(--font-display); font-size:27px; font-weight:700; letter-spacing:-0.02em; color:#f4fae8; margin-bottom:8px; text-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.pos-gate-sub{ font-family:var(--font-body); font-size:13.5px; font-weight:500; color:rgba(235,248,220,0.7); margin-bottom:28px; }
.pos-gate-input{
  width:100%; padding:15px 18px; margin-bottom:14px;
  border-radius:18px; text-align:center;
  border:1px solid rgba(235,248,220,0.2);
  background: rgba(240,250,225,0.1);
  box-shadow: inset 0 2px 8px rgba(20,40,25,0.25), inset 0 1px 0 rgba(255,255,255,0.1);
  color:#f4fae8; font-size:16px; font-family:var(--font-body);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.pos-gate-input:focus{
  outline:none;
  border-color: rgba(163,209,127,0.7);
  background: rgba(240,250,225,0.15);
  box-shadow: inset 0 2px 8px rgba(20,40,25,0.2), 0 0 0 4px rgba(143,191,114,0.2);
}
.pos-gate-input::placeholder{ color: rgba(235,248,220,0.45); }
.pos-gate-btn{
  width:100%; padding:16px; border-radius:18px; border:none; cursor:pointer;
  font-family:var(--font-body); font-size:16px; font-weight:700; color:#16290f;
  background: linear-gradient(180deg, #b8e096 0%, #8fbf72 55%, #74b05f 100%);
  box-shadow: 0 8px 22px rgba(143,191,114,0.4), inset 0 1px 0 rgba(255,255,255,0.4);
  transition: transform .13s ease, box-shadow .2s ease;
}
.pos-gate-btn:active{ transform: scale(0.98); box-shadow: 0 4px 12px rgba(143,191,114,0.35); }
.pos-gate-error{ color:#f5b8a8; font-family:var(--font-body); font-size:12.5px; margin-top:12px; min-height:14px; }

/* ---------------- X de cerrar en modales + optimización de espacio ---------------- */
.pos-modal{ position:relative; }
.pos-modal-x{ position:absolute; top:14px; right:14px; width:30px; height:30px; border-radius:50%; border:none; background:rgba(12,19,14,0.08); color:var(--ink); font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:5; line-height:1; }
.pos-modal-x:active{ transform:scale(0.9); background:rgba(12,19,14,0.16); }
/* dar aire al encabezado para que no choque con la X */
.pos-modal.left h4{ padding-right:34px; }
/* el hint de fecha ahora va inline junto al label, más compacto */
.pos-field label .pos-fecha-hint{ display:inline; margin:0 0 0 6px; font-size:11px; font-weight:600; }
/* dos botones de foto lado a lado */
.pos-photo-add-row.two{ display:flex; gap:8px; }
.pos-photo-add-row.two .pos-photo-add-btn{ flex:1; }
/* modal un poco más ancho y con menos padding vertical → menos scroll */
.pos-modal.left{ max-width:340px; padding:20px 20px 18px; }
.pos-modal.left .pos-field{ margin-bottom:12px; }

/* sello de versión en la pantalla de acceso */
.pos-gate-badge{ margin-top:18px; font-family:var(--font-body); font-size:10.5px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:rgba(235,248,220,0.4); }

/* ---------------- brillo que cruza la tarjeta al tocarla (puro CSS, 0 memoria) ---------------- */
.pos-object-card::before{
  content:''; position:absolute; top:0; left:-120%; width:60%; height:100%; z-index:3;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,0.18) 50%, transparent 100%);
  transform: skewX(-18deg); pointer-events:none; transition: none;
}
.pos-object-card:active::before{
  left:120%;
  transition: left .5s cubic-bezier(.22,.9,.32,1);
}
/* toque: la tarjeta reacciona con un leve hundimiento elástico */
.pos-object-card{ transition: transform .18s cubic-bezier(.34,1.5,.5,1), box-shadow .18s ease, border-color .16s ease; }

/* ---------------- Polito en la pantalla de bienvenida ---------------- */
.pos-gate-footer{ position:relative; z-index:2; display:flex; align-items:center; gap:12px; margin-top:24px; padding:12px 16px; border-radius:20px; background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); }
.pos-gate-polito{ width:48px; height:48px; object-fit:contain; flex-shrink:0; cursor:pointer; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35)); transform-origin: center bottom; animation: pos-polito-bob 3s ease-in-out infinite; }
.pos-gate-polito.pos-barking{ animation: pos-bark-jump 0.5s ease; }
@keyframes pos-bark-jump{ 0%{ transform: scale(1); } 30%{ transform: scale(1.25) rotate(-8deg); } 60%{ transform: scale(1.15) rotate(8deg); } 100%{ transform: scale(1); } }
@keyframes pos-polito-bob{ 0%,100%{ transform: translateY(0) rotate(-3deg); } 50%{ transform: translateY(-4px) rotate(3deg); } }
.pos-gate-footer-text{ text-align:left; }
.pos-gate-footer-title{ font-family:var(--font-display); font-size:15px; font-weight:700; color:#f4fae8; }
.pos-gate-footer-sub{ font-family:var(--font-body); font-size:11.5px; color:rgba(235,248,220,0.6); }


/* ---------------- respaldo: enlace al pie + pantalla dedicada ---------------- */
.pos-respaldo-row{ padding: 0 24px 40px; text-align:center; }
.pos-respaldo-link{ background:none; border:none; cursor:pointer; font-family:var(--font-body); font-size:12.5px; font-weight:600; color: rgba(242,234,217,0.45); padding:10px 14px; border-radius:12px; transition: color .16s ease, background .16s ease; }
.pos-respaldo-link:active{ color: var(--sand-100); background: rgba(255,255,255,0.06); }

.pos-respaldo-header{ padding: 20px 20px 0; }
.pos-respaldo-body{ padding: 18px 20px 50px; max-width: 620px; margin: 0 auto; }
.pos-respaldo-icon{ font-size:46px; text-align:center; margin-bottom:10px; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3)); }
.pos-respaldo-title{ font-family:var(--font-display); font-size:26px; font-weight:700; letter-spacing:-0.02em; text-align:center; color:var(--sand-100); margin:0 0 10px; }
.pos-respaldo-lead{ font-family:var(--font-body); font-size:14.5px; line-height:1.55; text-align:center; color: rgba(242,234,217,0.7); margin:0 0 26px; }

.pos-respaldo-card{ background: linear-gradient(155deg, rgba(255,255,255,0.09), rgba(220,240,210,0.03)); border:1px solid rgba(255,255,255,0.13); border-radius:20px; padding:18px 20px; margin-bottom:14px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.14); }
.pos-respaldo-card-title{ font-family:var(--font-display); font-size:15.5px; font-weight:700; color:var(--sand-100); margin-bottom:10px; }
.pos-respaldo-list{ margin:0; padding-left:20px; font-family:var(--font-body); font-size:13.5px; line-height:1.7; color: rgba(242,234,217,0.72); }
.pos-respaldo-p{ font-family:var(--font-body); font-size:13.5px; line-height:1.6; color: rgba(242,234,217,0.72); margin:0 0 10px; }
.pos-respaldo-p:last-child{ margin-bottom:0; }
.pos-respaldo-nota{ font-size:12.5px; color: rgba(224,168,79,0.8); background: rgba(224,168,79,0.08); border-radius:12px; padding:10px 12px; }

.pos-respaldo-stats{ text-align:center; font-family:var(--font-body); font-size:13px; color: rgba(242,234,217,0.65); margin:22px 0 14px; display:flex; align-items:center; justify-content:center; gap:8px; }
.pos-respaldo-download{ width:100%; padding:16px; border-radius:18px; border:none; cursor:pointer; font-family:var(--font-body); font-size:15.5px; font-weight:700; color:#16290f; background: linear-gradient(180deg, #b8e096 0%, #8fbf72 55%, #74b05f 100%); box-shadow: 0 8px 22px rgba(143,191,114,0.35), inset 0 1px 0 rgba(255,255,255,0.4); transition: transform .13s ease; }
.pos-respaldo-download:active{ transform: scale(0.98); }
.pos-respaldo-download:disabled{ opacity:0.6; cursor:default; }

.pos-respaldo-progress{ margin-top:16px; }
.pos-respaldo-bar{ height:10px; border-radius:6px; background: rgba(255,255,255,0.1); overflow:hidden; box-shadow: inset 0 1px 3px rgba(0,0,0,0.25); }
.pos-respaldo-bar-fill{ height:100%; width:100%; border-radius:6px; background: linear-gradient(90deg, #8fbf72, #b8e096); transform: scaleX(0); transform-origin:left center; transition: transform .35s ease; }
.pos-respaldo-progress-text{ margin-top:9px; text-align:center; font-family:var(--font-body); font-size:12.5px; color: rgba(242,234,217,0.65); }

.pos-respaldo-dev{ margin-top:28px; padding:14px 16px; border-radius:14px; background: rgba(12,19,14,0.28); border:1px dashed rgba(255,255,255,0.14); font-family:var(--font-body); font-size:11.5px; line-height:1.6; color: rgba(242,234,217,0.5); }

/* ---------------- contactos importantes (v3.4.0) ---------------- */
.pos-contactos-btn{ flex:0 0 auto; width:44px; height:44px; border-radius:14px; cursor:pointer; font-size:19px; line-height:1; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,0.16); border:1px solid rgba(255,255,255,0.22); box-shadow: inset 0 1px 0 rgba(255,255,255,0.2); transition: transform .13s ease, background .16s ease; }
.pos-contactos-btn:active{ transform: scale(0.94); background: rgba(255,255,255,0.26); }

.pos-loading-msg{ text-align:center; font-family:var(--font-body); font-size:13px; color: rgba(242,234,217,0.5); padding:24px 0; }
.pos-contactos-empty{ text-align:center; font-family:var(--font-body); font-size:13.5px; line-height:1.6; color: rgba(242,234,217,0.5); padding:28px 16px; border:1px dashed rgba(255,255,255,0.16); border-radius:18px; }

.pos-contacto-card{ position:relative; background: linear-gradient(155deg, rgba(255,255,255,0.14), rgba(220,240,210,0.04)); border:1px solid rgba(255,255,255,0.16); border-radius:20px; padding:16px 18px; margin-bottom:12px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 4px 14px rgba(0,0,0,0.14); }
.pos-contacto-edit{ position:absolute; top:12px; right:12px; width:30px; height:30px; border-radius:10px; border:none; cursor:pointer; font-size:13px; color: rgba(242,234,217,0.55); background: rgba(255,255,255,0.09); transition: background .15s ease, color .15s ease; }
.pos-contacto-edit:active{ background: rgba(255,255,255,0.2); color: var(--sand-100); }
.pos-contacto-head{ display:flex; align-items:center; gap:10px; margin-bottom:12px; padding-right:36px; }
.pos-contacto-emoji{ font-size:24px; line-height:1; }
.pos-contacto-nombre{ font-family:var(--font-display); font-size:17px; font-weight:700; color:var(--sand-100); letter-spacing:-0.01em; }
.pos-contacto-campo{ display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:12px; background: rgba(255,255,255,0.07); margin-bottom:6px; cursor:pointer; text-decoration:none; transition: background .15s ease, transform .1s ease; }
.pos-contacto-campo:active{ background: rgba(255,255,255,0.16); transform: scale(0.985); }
.pos-campo-et{ flex:0 0 auto; font-family:var(--font-body); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color: rgba(242,234,217,0.45); min-width:62px; }
.pos-campo-val{ flex:1; font-family:var(--font-body); font-size:14.5px; font-weight:600; color:var(--sand-100); word-break:break-word; }
.pos-campo-accion{ flex:0 0 auto; font-size:14px; opacity:0.55; }
.pos-contacto-tel .pos-campo-val{ color:#bfe3a4; }
.pos-contacto-nota{ margin-top:10px; padding:9px 12px; border-radius:12px; background: rgba(12,19,14,0.22); font-family:var(--font-body); font-size:12.5px; line-height:1.5; color: rgba(242,234,217,0.6); font-style:italic; }
.pos-contacto-add{ width:100%; margin-top:14px; padding:15px; border-radius:18px; border:1px dashed rgba(255,255,255,0.24); cursor:pointer; font-family:var(--font-body); font-size:14.5px; font-weight:700; color:var(--sand-100); background: rgba(255,255,255,0.07); transition: background .16s ease, transform .12s ease; }
.pos-contacto-add:active{ transform: scale(0.985); background: rgba(255,255,255,0.14); }

/* campos editables dentro del modal (tema claro, igual que el resto de los modales) */
.pos-campo-edit{ display:flex; gap:7px; align-items:center; margin-bottom:8px; }
.pos-campo-select{ flex:0 0 auto; width:118px; padding:11px 8px; border:1px solid rgba(12,19,14,0.15); background: rgba(12,19,14,0.04); border-radius:10px; font-family:var(--font-body); font-size:13px; font-weight:600; color:var(--ink); }
.pos-campo-input{ flex:1; min-width:0; width:100%; border:1px solid rgba(12,19,14,0.15); background: rgba(12,19,14,0.04); border-radius:10px; padding:11px 12px; font-family:var(--font-body); font-size:15px; color:var(--ink); }
.pos-campo-del{ flex:0 0 auto; width:36px; height:42px; border-radius:10px; border:none; cursor:pointer; font-size:13px; color:#a33; background: rgba(190,60,60,0.1); }
.pos-campo-del:active{ background: rgba(190,60,60,0.22); }
.pos-add-campo{ width:100%; padding:11px; margin-top:2px; border-radius:11px; border:1px dashed rgba(12,19,14,0.22); cursor:pointer; font-family:var(--font-body); font-size:13.5px; font-weight:600; color: rgba(12,19,14,0.62); background: rgba(12,19,14,0.03); }
.pos-add-campo:active{ background: rgba(12,19,14,0.09); }

/* ---------------- documentos PDF (v3.6.0) ---------------- */
/* Tarjetas con forma de hoja. El nivel baja con el plazo y una línea fina
   marca la superficie: se lee de un vistazo sin tener que leer nada. */
.pos-docs-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap:12px; margin-bottom:22px; }

.pos-doc-item{ position:relative; aspect-ratio: 3 / 4; border-radius:15px; overflow:hidden; cursor:pointer; background: rgba(255,255,255,0.075); border:1px solid rgba(255,255,255,0.14); transition: border-color .16s ease, transform .12s ease, background .16s ease; }
.pos-doc-item:active{ transform: scale(0.975); background: rgba(255,255,255,0.13); }
.pos-doc-item.por-vencer{ border-color: rgba(223,163,78,0.44); }
.pos-doc-item.vencido{ border-color: rgba(209,74,60,0.52); background: rgba(209,74,60,0.1); }

/* miniatura de la primera página: pixelada y tenue, solo para reconocer el papel */
.pos-doc-mini{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.pos-doc-mini img{ width:100%; height:100%; object-fit:cover; object-position:top center; opacity:0.30; image-rendering: pixelated; filter: grayscale(0.35) contrast(1.1); }
.pos-doc-mini::after{ content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(20,34,22,0.15) 0%, rgba(20,34,22,0.72) 62%, rgba(20,34,22,0.9) 100%); }
.pos-doc-mini.vacia{ background: repeating-linear-gradient(180deg, rgba(255,255,255,0.035) 0 2px, transparent 2px 9px); opacity:0.5; }
.pos-doc-item:active .pos-doc-mini img{ opacity:0.42; }

.pos-doc-nivel{ position:absolute; left:0; right:0; bottom:0; z-index:1; pointer-events:none; will-change:opacity; animation: pos-fade-in .5s ease backwards; }
.pos-doc-linea{ position:absolute; left:0; right:0; height:1px; z-index:2; pointer-events:none; animation: pos-fade-in .5s ease .08s backwards; }

.pos-doc-contenido{ position:relative; z-index:3; height:100%; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; padding:13px 13px 12px; }
.pos-doc-punto{ width:7px; height:7px; border-radius:50%; flex:0 0 auto; }
.pos-doc-punto.neutro{ background: rgba(242,234,217,0.3); }
.pos-doc-pie{ width:100%; }

.pos-doc-nombre{ font-family:var(--font-body); font-size:12.5px; font-weight:600; line-height:1.25; color:var(--sand-100); margin-bottom:9px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; word-break:break-word; }

.pos-doc-dato{ display:flex; align-items:baseline; gap:4px; }
.pos-doc-cifra{ font-family:var(--font-display); font-size:26px; font-weight:400; line-height:1; color:var(--sand-100); letter-spacing:-0.01em; }
.pos-doc-unidad{ font-family:var(--font-body); font-size:11.5px; color: rgba(242,234,217,0.5); }
.pos-doc-dato.alerta .pos-doc-cifra{ color:#f0c179; }
.pos-doc-dato.alerta .pos-doc-unidad{ color: rgba(240,193,121,0.72); }
.pos-doc-dato-sin{ font-family:var(--font-body); font-size:11px; color: rgba(242,234,217,0.38); }
.pos-doc-vencido-txt{ font-family:var(--font-body); font-size:13px; font-weight:700; color:#ffb4b4; }
.pos-doc-vencido-sub{ font-family:var(--font-body); font-size:11px; color: rgba(255,180,180,0.6); margin-top:2px; }

/* el lápiz aparece al acercarse, no compite con el contenido */
.pos-doc-edit{ position:absolute; z-index:4; top:8px; right:8px; width:26px; height:26px; border-radius:9px; border:none; cursor:pointer; font-size:11px; color: rgba(242,234,217,0.62); background: rgba(12,19,14,0.34); opacity:0; transition: opacity .18s ease, background .15s ease; }
.pos-doc-item:hover .pos-doc-edit{ opacity:1; }
.pos-doc-edit:active{ background: rgba(12,19,14,0.6); color:var(--sand-100); opacity:1; }
@media (hover: none){ .pos-doc-edit{ opacity:0.45; } }

.pos-doc-add-tile{ aspect-ratio: 3 / 4; border-radius:15px; cursor:pointer; border:1.5px dashed rgba(255,255,255,0.22); background:transparent; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:0; transition: background .16s ease, transform .12s ease, border-color .16s ease; }
.pos-doc-add-tile:active{ transform: scale(0.975); background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.42); }
.pos-doc-add-plus{ font-size:26px; font-weight:300; line-height:1; color: rgba(242,234,217,0.45); }
.pos-doc-add-txt{ font-family:var(--font-body); font-size:11.5px; font-weight:600; color: rgba(242,234,217,0.45); }

.pos-pendiente-chip.doc-vencido{ border-color: rgba(209,74,60,0.5); }
.pos-doc-elegido{ margin-top:10px; }
.pos-doc-elegido-row{ display:flex; align-items:center; gap:11px; }
.pos-doc-preview{ flex:0 0 auto; width:54px; height:72px; border-radius:8px; overflow:hidden; background: rgba(12,19,14,0.07); border:1px solid rgba(12,19,14,0.14); display:flex; align-items:center; justify-content:center; }
.pos-doc-preview img{ width:100%; height:100%; object-fit:cover; object-position:top center; image-rendering: pixelated; }
.pos-doc-preview-load{ font-family:var(--font-body); font-size:11px; font-weight:700; color: rgba(12,19,14,0.35); }
.pos-doc-chip-peso{ font-weight:500; opacity:0.6; font-size:11.5px; }
.pos-doc-chip{ display:inline-block; padding:8px 12px; border-radius:11px; background: rgba(12,19,14,0.06); border:1px solid rgba(12,19,14,0.12); font-family:var(--font-body); font-size:12.5px; font-weight:600; color:var(--ink); word-break:break-all; }
.pos-hint-inline{ font-weight:500; opacity:0.6; font-size:11.5px; }

/* elegir vencimiento: atajos + escribir + calendario */
.pos-vence-atajos{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:9px; }
.pos-vence-atajo{ flex:1 1 auto; min-width:66px; padding:10px 8px; border-radius:11px; cursor:pointer; border:1px solid rgba(12,19,14,0.15); background: rgba(12,19,14,0.04); font-family:var(--font-body); font-size:12.5px; font-weight:700; color:var(--ink); transition: background .14s ease, transform .1s ease; }
.pos-vence-atajo:active{ transform: scale(0.95); background: rgba(12,19,14,0.13); }
.pos-vence-row{ display:flex; gap:7px; align-items:center; position:relative; }
.pos-vence-row input[type="text"]{ flex:1; min-width:0; width:100%; border:1px solid rgba(12,19,14,0.15); background: rgba(12,19,14,0.04); border-radius:10px; padding:11px 12px; font-family:var(--font-body); font-size:16px; font-weight:600; letter-spacing:0.03em; color:var(--ink); }
.pos-vence-cal{ flex:0 0 auto; width:46px; height:44px; border-radius:11px; cursor:pointer; border:1px solid rgba(12,19,14,0.15); background: rgba(12,19,14,0.05); font-size:18px; line-height:1; transition: background .14s ease, transform .1s ease; }
.pos-vence-cal:active{ transform: scale(0.94); background: rgba(12,19,14,0.14); }
.pos-vence-picker-oculto{ position:absolute; right:8px; bottom:0; width:1px; height:1px; opacity:0; border:none; padding:0; pointer-events:none; }
.pos-vence-eco{ margin-top:7px; font-family:var(--font-body); font-size:12px; font-weight:600; color: rgba(12,19,14,0.5); }
.pos-vence-eco.ok{ color:#3d7a3d; }
.pos-vence-eco.por-vencer{ color:#a8701c; }
.pos-vence-eco.vencido{ color:#b23a3a; }

@media (max-width: 420px){
  .pos-docs-grid{ grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap:10px; }
  .pos-doc-cifra{ font-size:23px; }
  .pos-doc-contenido{ padding:11px 11px 10px; }
}

/* visor de documentos a pantalla completa */
.pos-doc-viewer{ position:fixed; inset:0; z-index:100000; display:none; flex-direction:column; background:#12180f; }
.pos-doc-viewer.open{ display:flex; }
.pos-doc-viewer-bar{ flex:0 0 auto; display:flex; align-items:center; gap:10px; padding:12px 14px; padding-top: calc(12px + env(safe-area-inset-top, 0px)); background: rgba(20,30,20,0.96); border-bottom:1px solid rgba(255,255,255,0.1); }
.pos-doc-viewer-btn{ flex:0 0 auto; width:38px; height:38px; border-radius:12px; border:none; cursor:pointer; font-size:15px; color:var(--sand-100); background: rgba(255,255,255,0.12); transition: background .14s ease, transform .1s ease; }
.pos-doc-viewer-btn:active{ background: rgba(255,255,255,0.26); transform: scale(0.94); }
.pos-doc-viewer-btn.del{ color:#ffb4b4; background: rgba(216,106,106,0.18); }
.pos-doc-viewer-btn.del:active{ background: rgba(216,106,106,0.34); }
.pos-doc-viewer-name{ flex:1; min-width:0; font-family:var(--font-body); font-size:14px; font-weight:700; color:var(--sand-100); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pos-doc-viewer-save{ flex:0 0 auto; padding:10px 15px; border-radius:12px; border:none; cursor:pointer; font-family:var(--font-body); font-size:13px; font-weight:700; color:#16290f; background: linear-gradient(180deg, #b8e096, #8fbf72); }
.pos-doc-viewer-save:active{ transform: scale(0.96); }
.pos-doc-viewer-body{ flex:1; min-height:0; position:relative; display:flex; flex-direction:column; background:#2a2a2a; touch-action: pinch-zoom; -webkit-overflow-scrolling: touch; }
.pos-doc-frame{ flex:1; width:100%; border:none; background:#fff; }
.pos-doc-fallback{ flex:0 0 auto; padding:11px 16px; text-align:center; font-family:var(--font-body); font-size:12px; line-height:1.5; color: rgba(242,234,217,0.55); background: rgba(20,30,20,0.94); }

/* ---------------- patente chilena (v3.7.0) ---------------- */
.pos-patente-btn{ position:absolute; z-index:3; right:108px; bottom:18px; width:238px; max-width:42vw; padding:0; border:none; background:none; cursor:pointer; line-height:0; filter: drop-shadow(0 4px 14px rgba(0,0,0,0.45)); transition: transform .14s ease, filter .16s ease; }
.pos-patente-btn:active{ transform: scale(0.96); filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5)); }
.pos-patente-svg{ width:100%; height:auto; display:block; }
.pos-pat-glifo{ font-family:'Poppins', var(--font-display), sans-serif; font-size:62px; font-weight:700; fill:#111111; letter-spacing:0; }
.pos-pat-chile{ font-family:'Inter', var(--font-body), sans-serif; font-size:17px; font-weight:600; fill:#111111; letter-spacing:0.36em; }
.pos-pat-vacia{ font-family:'Inter', var(--font-body), sans-serif; font-size:19px; font-weight:600; fill:#9a9a9a; }

.pos-pat-preview{ margin:4px 0 16px; padding:14px; border-radius:12px; background: rgba(12,19,14,0.05); display:flex; justify-content:center; }
.pos-pat-preview .pos-patente-svg{ width:280px; max-width:100%; }
.pos-pat-campos{ display:flex; align-items:center; justify-content:center; gap:8px; }
.pos-pat-input{ width:76px; text-align:center; border:1px solid rgba(12,19,14,0.16); background: rgba(12,19,14,0.04); border-radius:11px; padding:13px 6px; font-family:'Poppins', var(--font-display), sans-serif; font-size:26px; font-weight:700; letter-spacing:0.06em; color:var(--ink); text-transform:uppercase; }
.pos-pat-input:focus{ outline:none; border-color: rgba(12,19,14,0.42); background: rgba(12,19,14,0.07); }
.pos-pat-sep{ font-size:22px; font-weight:700; color: rgba(12,19,14,0.3); }
.pos-pat-hint{ margin-top:10px; text-align:center; font-family:var(--font-body); font-size:12px; color: rgba(12,19,14,0.48); }

@media (max-width: 620px){
  .pos-patente-btn{ right:auto; left:20px; bottom:auto; top:20px; width:170px; max-width:50vw; }
}

/* ================= refinamiento de superficies (v3.8.0) ================= */

/* Hairlines reales. Un borde de 1px translúcido se ve grueso y sucio en retina;
   con 0.5px queda la línea fina de las apps nativas. */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){
  .pos-object-card,
  .pos-doc-item,
  .pos-doc-add-tile,
  .pos-contacto-card,
  .pos-sub-card,
  .pos-back-btn,
  .pos-contactos-btn,
  .pos-info-toggle,
  .pos-modal{ border-width: 0.5px; }
}

/* Sombras de dos capas: una corta y opaca que ancla el objeto a la superficie,
   y una larga y tenue que da la profundidad. Una sola capa se ve plana. */
.pos-contacto-card{
  box-shadow:
    0 1px 2px rgba(0,0,0,0.14),
    0 6px 20px -6px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.15);
}
.pos-modal{
  box-shadow:
    0 2px 6px rgba(0,0,0,0.16),
    0 24px 60px -12px rgba(0,0,0,0.44);
}

/* Luz especular en el canto superior: las superficies de vidrio reciben más luz
   arriba que en los costados, y un borde parejo delata que es un rectángulo plano.
   Va como box-shadow inset para no chocar con el ::after que ya usa el velo de
   las tarjetas con foto. */
.pos-object-card{
  box-shadow:
    0 1px 2px rgba(0,0,0,0.16),
    0 8px 24px -6px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.20),
    inset 0 12px 20px -14px rgba(255,255,255,0.16);
}
.pos-doc-item{
  box-shadow:
    0 1px 2px rgba(0,0,0,0.14),
    0 6px 18px -6px rgba(0,0,0,0.24),
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 10px 16px -12px rgba(255,255,255,0.14);
}

/* El corte entre el banner y el cuerpo era una línea dura. Esta sombra lo funde. */
.pos-detail-body{ position:relative; }
.pos-detail-body::before{
  content:''; position:absolute; top:-24px; left:0; right:0; height:24px; pointer-events:none;
  background: linear-gradient(180deg, rgba(12,19,14,0) 0%, rgba(12,19,14,0.22) 70%, rgba(12,19,14,0.4) 100%);
}

/* Curva con desaceleración en vez de 'ease': el movimiento arranca decidido y
   frena suave, que es como se sienten las apps nativas. */
/* (la tarjeta de objeto queda fuera: ya tiene su propio rebote y es mejor) */
.pos-doc-item,
.pos-doc-add-tile,
.pos-contacto-card,
.pos-contactos-btn,
.pos-patente-btn,
.pos-respaldo-download{
  transition-timing-function: cubic-bezier(.32,.72,.28,1);
}

/* ================= 1. la ficha se tiñe con la foto (v3.9.0) ================= */
/* El color sale de la portada del objeto, así entrar a la Kia no se siente
   igual que entrar al limonero. Sin foto, queda el verde de siempre. */
.pos-screen.pos-tenida .pos-detail-banner{
  background: linear-gradient(160deg,
    rgb(var(--ficha-alto)) 0%,
    rgb(var(--ficha-alto)) 22%,
    rgb(var(--ficha-bajo)) 78%,
    rgb(var(--ficha-bajo)) 100%);
}
.pos-screen.pos-tenida .pos-detail-body{
  background: linear-gradient(180deg, rgba(var(--ficha-bajo), 0.5) 0%, rgba(var(--ficha-bajo), 0) 320px);
}
.pos-screen.pos-tenida .pos-cat-tag{ color: rgb(var(--ficha-acento)); }
.pos-screen.pos-tenida .pos-mini-add{
  border-color: rgba(var(--ficha-acento), 0.42);
  color: rgb(var(--ficha-acento));
  background: rgba(var(--ficha-acento), 0.1);
}
.pos-screen.pos-tenida .pos-tl-dot{ background: rgb(var(--ficha-acento)); }
.pos-screen.pos-tenida .pos-detail-barra{ background: rgba(var(--ficha-bajo), 0.94); }
.pos-detail-banner, .pos-detail-body{ transition: background .55s cubic-bezier(.32,.72,.28,1); }

/* ================= 2. el banner se encoge al bajar ================= */
.pos-detail-barra{
  position:fixed; top:0; left:0; right:0; z-index:60;
  height:60px; padding:0 14px; padding-top: env(safe-area-inset-top, 0px);
  display:flex; align-items:center; gap:11px;
  background: rgba(24,42,29,0.94);
  border-bottom: 0.5px solid rgba(255,255,255,0.12);
  box-shadow: 0 2px 14px rgba(0,0,0,0.3);
  transform: translateY(-101%);
  transition: transform .3s cubic-bezier(.32,.72,.28,1);
  pointer-events:none;
}
.pos-detail-barra.visible{ transform: translateY(0); pointer-events:auto; }
.pos-barra-back{ flex:0 0 auto; width:36px; height:36px; border-radius:12px; border:none; cursor:pointer; font-size:17px; color:var(--sand-100); background: rgba(255,255,255,0.12); }
.pos-barra-back:active{ background: rgba(255,255,255,0.24); }
.pos-barra-titulo{ flex:1; min-width:0; font-family:var(--font-display); font-size:16px; font-weight:700; letter-spacing:-0.01em; color:var(--sand-100); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pos-barra-patente{ flex:0 0 auto; padding:4px 8px; border-radius:4px; background:#fff; color:#111; font-family:'Poppins', var(--font-display), sans-serif; font-size:11px; font-weight:700; letter-spacing:0.03em; }
.pos-barra-icono{ flex:0 0 auto; font-size:19px; }

/* ================= 3. parrilla bento en el home ================= */
/* Lo que necesita atención pesa el doble: se ve antes de leer nada. */
.pos-object-card-wrap.destacada{ grid-column: span 2; }
.pos-object-card-wrap.destacada .pos-object-card{ min-height:172px; }
.pos-object-card-wrap.destacada .pos-object-name{ font-size:18px; }
.pos-object-card-wrap.destacada .pos-object-icon{ font-size:34px; }
@media (max-width: 380px){
  .pos-object-card-wrap.destacada{ grid-column: span 2; }
  .pos-object-card-wrap.destacada .pos-object-card{ min-height:148px; }
}

/* ---------------- insumos a la mano en el banner (v3.10.0) ---------------- */
/* Lo que se usa seguido en ese objeto: el cloro de la piscina, el aceite del
   motor. Con foto para reconocerlo en la ferretería sin dudar. */
.pos-insumos{
  position:absolute; z-index:3; right:22px; bottom:96px;
  display:flex; gap:9px; align-items:flex-end;
  max-width:56%; overflow-x:auto; padding-bottom:2px;
  scrollbar-width:none; -ms-overflow-style:none;
}
.pos-insumos::-webkit-scrollbar{ display:none; }

.pos-insumo{
  flex:0 0 auto; width:78px; padding:0; border:none; background:none; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:5px;
  transition: transform .14s cubic-bezier(.32,.72,.28,1);
}
.pos-insumo:active{ transform: scale(0.94); }

.pos-insumo-foto{
  width:64px; height:64px; border-radius:16px; overflow:hidden;
  background: rgba(20,34,22,0.55); border:0.5px solid rgba(255,255,255,0.28);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.24), 0 8px 20px -6px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.18);
}
.pos-insumo-foto img{ width:100%; height:100%; object-fit:cover; }
.pos-insumo-sinfoto{ font-size:26px; opacity:0.6; }
.pos-insumo-foto.vacia{
  border-style:dashed; border-width:1.5px; border-color: rgba(255,255,255,0.32);
  background: rgba(20,34,22,0.34); font-size:26px; font-weight:300; color: rgba(242,234,217,0.6);
  box-shadow:none;
}
.pos-insumo-add:active .pos-insumo-foto.vacia{ background: rgba(255,255,255,0.16); }

.pos-insumo-nombre{
  font-family:var(--font-body); font-size:10.5px; font-weight:700; line-height:1.2;
  color:var(--sand-100); text-align:center; width:100%;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}
.pos-insumo-nota{
  font-family:var(--font-body); font-size:9.5px; line-height:1.2;
  color: rgba(242,234,217,0.72); text-align:center; width:100%;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}

/* foto dentro del modal */
.pos-ins-foto-wrap{ display:flex; align-items:center; gap:13px; margin-bottom:14px; }
.pos-ins-foto{ flex:0 0 auto; width:84px; height:84px; border-radius:14px; overflow:hidden; background: rgba(12,19,14,0.06); border:1px solid rgba(12,19,14,0.14); display:flex; align-items:center; justify-content:center; }
.pos-ins-foto img{ width:100%; height:100%; object-fit:cover; }
.pos-ins-foto-vacia{ font-family:var(--font-body); font-size:11px; font-weight:600; color: rgba(12,19,14,0.35); }

@media (max-width: 620px){
  .pos-insumos{ right:14px; bottom:78px; max-width:64%; gap:7px; }
  .pos-insumo{ width:64px; }
  .pos-insumo-foto{ width:54px; height:54px; border-radius:14px; }
}

/* ---------------- arreglo del buscador (v3.12.1) ----------------
   El campo vive dentro de un contenedor con la lupa y la ✕ encima; sin estos
   estilos el contenedor no crecía y los dos íconos quedaban sueltos al lado. */
.pos-search-input-wrap{ position:relative; flex:1; min-width:0; display:flex; align-items:center; }
.pos-search-input-wrap input{ width:100%; padding-left:38px !important; padding-right:36px !important; }
.pos-search-icon{
  position:absolute; left:13px; top:50%; transform:translateY(-50%);
  font-size:13px; opacity:0.5; pointer-events:none; line-height:1;
}
.pos-search-clear{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:24px; height:24px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; color: rgba(242,234,217,0.6); background: rgba(255,255,255,0.1);
  transition: background .14s ease, color .14s ease;
}
.pos-search-clear:active{ background: rgba(255,255,255,0.24); color:var(--sand-100); }


/* ---------------- rendimiento (v3.13.0) ----------------
   El desenfoque de fondo repinta en cada cuadro del scroll y en móvil produce
   parpadeo con franjas. Se deja solo en pantallas grandes con puntero fino. */
@media (hover: hover) and (pointer: fine){
  @supports (backdrop-filter: blur(1px)){
    .pos-detail-barra{ backdrop-filter: blur(18px) saturate(1.5); background: rgba(24,42,29,0.72); }
  }
}
@keyframes pos-fade-in{ from{ opacity:0; } to{ opacity:1; } }

/* Avisar al navegador qué va a moverse, para que lo suba a su propia capa
   y no repinte la tarjeta entera en cada cuadro. */
.pos-detail-barra{ will-change: transform; }
.pos-doc-item, .pos-object-card, .pos-insumo{ will-change: transform; }

/* ---------------- fin de las franjas negras (v3.13.1) ----------------
   El desenfoque de fondo obliga al navegador a releer y difuminar todo lo que
   hay debajo en cada cuadro. Mientras se comprime y sube una foto el aparato ya
   va al límite, el efecto no alcanza a resolverse y deja las bandas negras.
   En móvil se reemplaza por un fondo sólido: se ve igual de bien y no cuesta nada. */
@media (hover: none), (pointer: coarse), (max-width: 900px){
  .pos-modal-backdrop{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(6,10,7,0.78);
  }
  .pos-search-bar input{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(230,217,189,0.12);
  }
  .pos-detail-barra{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(24,42,29,0.97);
  }
}

/* teléfono al borde derecho: queda donde el pulgar llega sin estirarse (v3.13.2) */
.pos-contactos-btn{ margin-left:auto; }

/* ---------------- repetir mantención (v3.14.0) ----------------
   Va junto al lápiz, discreto: el historial se lee, no se opera. Pero cuando
   toca hacer de nuevo lo mismo (el veneno cada 14 días), está a un toque. */
.pos-tl-repetir{
  position:absolute; top:8px; right:42px; z-index:3;
  height:28px; padding:0 11px; border-radius:14px; cursor:pointer;
  border:0.5px solid rgba(242,234,217,0.18);
  background: rgba(230,217,189,0.08);
  color: rgba(242,234,217,0.62);
  font-family:var(--font-body); font-size:11.5px; font-weight:600; line-height:1;
  display:flex; align-items:center; gap:4px;
  transition: background .14s ease, color .14s ease, transform .12s ease;
}
.pos-tl-repetir:active{
  transform: scale(0.94);
  background: rgba(184,224,150,0.22);
  color: var(--sand-100);
}
@media (max-width: 420px){
  .pos-tl-repetir{ right:40px; padding:0 9px; font-size:11px; }
}

/* ---------------- aviso de sin conexión (v3.15.0) ----------------
   Barra fija abajo: se ve siempre, no tapa el contenido y no se confunde con
   el encabezado. Ámbar, no rojo: no es un error, es un estado. */
.pos-aviso-offline{
  position:fixed; left:0; right:0; bottom:0; z-index:9998;
  display:flex; align-items:center; gap:10px;
  padding:11px 16px; padding-bottom: calc(11px + env(safe-area-inset-bottom, 0px));
  background: rgba(96,66,20,0.96);
  border-top: 0.5px solid rgba(240,193,121,0.35);
  box-shadow: 0 -4px 18px rgba(0,0,0,0.35);
  font-family:var(--font-body); font-size:12.5px; font-weight:600; color:#f7e3c0;
  transform: translateY(101%);
  transition: transform .3s cubic-bezier(.32,.72,.28,1);
}
.pos-aviso-offline.visible{ transform: translateY(0); }
.pos-aviso-punto{
  flex:0 0 auto; width:8px; height:8px; border-radius:50%; background:#f0c179;
  animation: pos-latido 2s ease-in-out infinite;
}
@keyframes pos-latido{ 0%,100%{ opacity:1; } 50%{ opacity:0.35; } }
.pos-aviso-offline span:nth-child(2){ flex:1; min-width:0; line-height:1.35; }
.pos-aviso-btn{
  flex:0 0 auto; padding:7px 13px; border-radius:10px; cursor:pointer;
  border:0.5px solid rgba(247,227,192,0.4); background: rgba(247,227,192,0.14);
  color:#f7e3c0; font-family:var(--font-body); font-size:11.5px; font-weight:700;
}
.pos-aviso-btn:active{ background: rgba(247,227,192,0.3); }
.pos-aviso-btn:disabled{ opacity:0.55; }

/* ================= la app cambia con la hora (v3.16.0) =================
   De día despejada y verde; de noche azulada, con luna y estrellas quietas.
   Todo estático o animado por opacidad: cero costo mientras se usa. */

/* fondos por hora, más marcados que antes para que se note el cambio */
#parcela-os-root.pos-ambient-manana{ background: linear-gradient(180deg, #3d7050 0%, #2c5038 34%, var(--moss-950) 72%); }
#parcela-os-root.pos-ambient-tarde{ background: linear-gradient(180deg, #457a54 0%, #345740 32%, var(--moss-950) 70%); }
#parcela-os-root.pos-ambient-atardecer{ background: linear-gradient(180deg, #7a5a3a 0%, #4a4a44 22%, #2b4736 52%, var(--moss-950) 80%); }
#parcela-os-root.pos-ambient-noche{ background: linear-gradient(180deg, #16283a 0%, #16303a 26%, #14261f 58%, #0d1610 100%); }

/* saludo y reloj */
.pos-saludo-fila{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin:6px 0 2px; }
.pos-saludo{ display:flex; align-items:center; gap:7px; font-family:var(--font-body); font-size:14.5px; font-weight:600; color: rgba(242,234,217,0.78); }
.pos-saludo-icono{ font-size:16px; line-height:1; }
.pos-reloj{
  font-family:var(--font-display); font-size:30px; font-weight:300; line-height:1;
  letter-spacing:0.01em; color:var(--sand-100);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 10px rgba(0,0,0,0.4);
}
.pos-reloj-sep{ opacity:0.42; margin:0 1px; animation: pos-parpadeo 2s steps(1) infinite; }
@keyframes pos-parpadeo{ 0%,50%{ opacity:0.42; } 51%,100%{ opacity:0.12; } }

/* cielo nocturno: detrás de todo, sin interferir */
.pos-cielo{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0; transition: opacity 1.4s ease; overflow:hidden; }
#parcela-os-root.pos-es-noche .pos-cielo{ opacity:1; }
#parcela-os-root.pos-ambient-atardecer .pos-cielo{ opacity:0.45; }

.pos-estrella{
  position:absolute; border-radius:50%; background:#fdf6e0;
  opacity: var(--brillo, 0.5);
  box-shadow: 0 0 4px rgba(253,246,224,0.75);
  animation: pos-titilar 3.4s ease-in-out infinite;
}
@keyframes pos-titilar{
  0%,100%{ opacity: var(--brillo, 0.5); }
  50%{ opacity: calc(var(--brillo, 0.5) * 0.25); }
}

.pos-luna{
  position:absolute; top:42px; right:32px; width:52px; height:52px; border-radius:50%;
  background: radial-gradient(circle at 34% 32%, #fdf8e6 0%, #f0e7c8 52%, #d9cfa8 100%);
  box-shadow: 0 0 26px rgba(253,248,230,0.38), 0 0 62px rgba(253,248,230,0.16), inset -6px -5px 12px rgba(150,140,110,0.28);
}
.pos-luna-crater{ position:absolute; border-radius:50%; background: rgba(168,158,128,0.3); }
.pos-luna-crater.c1{ width:11px; height:11px; top:13px; left:10px; }
.pos-luna-crater.c2{ width:7px;  height:7px;  top:29px; left:24px; }
.pos-luna-crater.c3{ width:5px;  height:5px;  top:12px; left:31px; }

/* el contenido va por encima del cielo */
#parcela-os-root.pos-es-noche .pos-screen{ position:relative; z-index:1; }

@media (max-width: 480px){
  .pos-reloj{ font-size:26px; }
  .pos-luna{ width:42px; height:42px; top:34px; right:22px; }
}

/* el cielo se posiciona dentro del contenedor de la app, no de la página */
#parcela-os-root{ position: relative; }

/* ================= distribución del encabezado (v3.16.1) ================= */

/* 1. El bloque de título sube: el banner tenía 400px de alto con el texto
      pegado abajo y un tercio de foto vacío arriba. */
.pos-home-header{ height: 250px; padding: 28px 24px 18px; justify-content:flex-start; }
@media (min-width: 780px){
  #parcela-os-root .pos-home-header{ height: 290px; padding: 30px 28px 20px; }
}
@media (max-width: 779px){
  #parcela-os-root .pos-home-header{ height: 210px !important; padding: 24px 20px 16px !important; }
}

/* 2. El reloj tiene su propia esquina y se lee de lejos. Antes compartía fila
      con el saludo y en pantalla ancha quedaban en puntas opuestas. */
.pos-reloj{
  position:absolute; right:26px; bottom:20px; z-index:3;
  font-size:64px; font-weight:200; letter-spacing:-0.03em; line-height:0.85;
}
@media (min-width: 780px){ #parcela-os-root .pos-reloj{ font-size:88px; right:30px; bottom:22px; } }
@media (max-width: 480px){ #parcela-os-root .pos-reloj{ font-size:42px; right:18px; bottom:16px; } }
.pos-saludo{ font-size:15px; margin:8px 0 0; }
.pos-saludo-sep{ opacity:0.4; margin:0 2px; }
.pos-home-sub-inline{ opacity:0.62; }

/* 3. La barra de búsqueda dejaba de crecer nunca: ahora tiene tope y el
      selector y los contactos quedan pegados a ella, no en la otra punta. */
.pos-search-bar{ align-items:center; }
.pos-search-input-wrap{ flex:1 1 auto; max-width:340px; }
.pos-contactos-btn{ margin-left:0; }
.pos-sort-select{ flex:0 0 auto; }

/* ---------------- clima y buscador más corto (v3.17.0) ---------------- */

/* el reloj y el clima forman un bloque alineado a la derecha */
.pos-hora-bloque{ position:absolute; right:26px; bottom:18px; z-index:3; text-align:right; }
.pos-hora-bloque .pos-reloj{ position:static; }
@media (min-width: 780px){ #parcela-os-root .pos-hora-bloque{ right:30px; bottom:20px; } }
@media (max-width: 480px){ #parcela-os-root .pos-hora-bloque{ right:18px; bottom:14px; } }

.pos-clima{
  display:flex; align-items:center; justify-content:flex-end; gap:7px;
  margin-top:8px; font-family:var(--font-body);
  text-shadow: 0 1px 6px rgba(0,0,0,0.55);
}
.pos-clima:empty{ display:none; }
.pos-clima-icono{ font-size:19px; line-height:1; }
.pos-clima-temp{ font-family:var(--font-display); font-size:21px; font-weight:500; color:var(--sand-100); line-height:1; }
.pos-clima-detalle{ display:flex; flex-direction:column; align-items:flex-start; gap:1px; font-size:11px; line-height:1.25; color: rgba(242,234,217,0.62); }
.pos-clima-rango{ font-size:10px; opacity:0.72; font-variant-numeric: tabular-nums; }
@media (max-width: 480px){
  .pos-clima{ margin-top:6px; gap:5px; }
  .pos-clima-icono{ font-size:16px; }
  .pos-clima-temp{ font-size:17px; }
  .pos-clima-detalle{ font-size:10px; }
}

/* buscador más corto: no necesita medio ancho de pantalla */
.pos-search-input-wrap{ max-width:250px; }
.pos-search-icon{ font-size:11.5px; left:12px; }
.pos-search-bar input{ padding-left:33px !important; font-size:13.5px; }
@media (max-width: 620px){ #parcela-os-root .pos-search-input-wrap{ max-width:none; } }