/* ==========================================================================
   PROPITAE · Estilos de marca  (v1.1 · 14/11/2026)
   Una sola fuente para la web y todas las herramientas (CRM, Folio, valorador,
   informes). Se carga desde https://propitae.es/assets/css/marca.css
   Las reglas de uso están en el «Manual de marca» del proyecto.
   Cambiar un valor aquí lo cambia en todas partes: no copiar valores a mano.
   ========================================================================== */

/* ---------- Tipografías (alojadas, licencia OFL) ---------- */
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/assets/fonts/inter-tight-latin-wght-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/assets/fonts/inter-tight-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;
  src:url('/assets/fonts/instrument-serif-latin-400-italic.woff2') format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/instrument-serif-latin-400-normal.woff2') format('woff2')}

:root{
  /* ---------- Color ---------- */
  --p-negro:#0B0B0C;          /* texto principal, fondos oscuros */
  --p-grafito:#25262A;        /* solo logotipo e icono */
  --p-azul:#00A0DC;           /* acento: botón principal, cifras, la A */
  --p-azul-texto:#007DB0;     /* texto y enlaces azules sobre blanco */
  --p-azul-suave:#E6F5FB;     /* resaltado suave, retratos */
  --p-blanco:#FFFFFF;
  --p-fondo:#F2F4F5;          /* secciones alternas, fondo de herramientas */
  --p-linea:#D5D9DD;          /* bordes y divisores */
  --p-texto-2:#44474C;        /* texto secundario sobre claro */
  --p-texto-2-oscuro:#BFC3C7; /* texto secundario sobre negro */
  --p-whatsapp:#25D366;       /* solo botón de WhatsApp */
  /* Estados (herramientas): texto · fondo */
  --p-ok:#1A6B45;     --p-ok-fondo:#E5F4EC;
  --p-aviso:#8A5300;  --p-aviso-fondo:#FFF3D6;
  --p-error:#B42A24;  --p-error-fondo:#FBE9E8;
  --p-info:var(--p-azul-texto); --p-info-fondo:var(--p-azul-suave);
  /* Gráficos: el dato principal en azul; el resto en negro y grises */
  --p-graf-1:#00A0DC; --p-graf-2:#0B0B0C; --p-graf-3:#7FCFEE; --p-graf-4:#8A8F96; --p-graf-5:#D5D9DD;

  /* ---------- Tipografía ---------- */
  --p-sans:'Inter Tight','Helvetica Neue',Arial,sans-serif;
  --p-serif:'Instrument Serif',Georgia,serif;
  --p-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  /* Escala web (titulares en mayúsculas, peso 800) */
  --p-t-portada:clamp(44px,6.6vw,96px);
  --p-t-1:clamp(36px,4.8vw,64px);
  --p-t-2:clamp(28px,3.2vw,44px);
  --p-t-3:clamp(21px,1.8vw,26px);
  --p-t-entrada:clamp(18px,1.6vw,21px);   /* párrafo destacado */
  --p-t-texto:17px;                        /* texto normal en la web */
  /* Escala herramientas (CRM, Folio, valorador) */
  --p-h-1:28px; --p-h-2:20px; --p-h-3:17px;
  --p-h-texto:16px;                        /* texto normal en herramientas (nunca menos de 15) */
  /* Comunes */
  --p-t-pequeno:15px;   /* texto secundario */
  --p-t-etiqueta:13px;  /* etiquetas de campo, notas */
  --p-t-ceja:12.5px;    /* «ceja» en mayúsculas sobre los títulos */
  --p-tracking-titular:-.035em;
  --p-tracking-ceja:.16em;
  --p-interlineado:1.5;

  /* ---------- Espacio (escala de 4) ---------- */
  --p-1:4px; --p-2:8px; --p-3:12px; --p-4:16px; --p-5:24px; --p-6:32px; --p-7:48px; --p-8:64px; --p-9:96px;
  --p-seccion:clamp(64px,8vw,112px);        /* espacio entre dos bloques de la web: siempre este */
  --p-seccion-media:calc(var(--p-seccion) / 2);
  --p-hueco-bloque:48px;                    /* entre título de sección y su contenido */
  --p-margen:clamp(20px,4vw,56px);          /* margen lateral */
  --p-ancho:1280px;                         /* ancho máximo de TODO bloque, también los oscuros */
  --p-ancho-texto:720px;                    /* ancho máximo de un párrafo */

  /* ---------- Formas ---------- */
  --p-r-campo:10px;     /* campos, etiquetas cuadradas */
  --p-r-panel:16px;     /* paneles de herramientas */
  --p-r-tarjeta:26px;   /* tarjetas de la web */
  --p-r-bloque:32px;    /* bloques oscuros o azules */
  --p-r-pildora:999px;  /* botones, etiquetas */
  --p-r-arco:999px 999px 32px 32px; /* fotos en arco de puerta */
  --p-borde:1.5px;
  --p-sombra:0 1px 2px rgba(11,11,12,.06),0 8px 24px rgba(11,11,12,.06);
  --p-foco:0 0 0 3px rgba(0,160,220,.35);
  --p-alto-boton:48px;  /* web */
  --p-alto-control:44px;/* herramientas: botones y campos */
}

/* ==========================================================================
   Componentes (clases con prefijo p-). Úsalos en vez de estilos sueltos.
   ========================================================================== */
.p-base{font-family:var(--p-sans);color:var(--p-negro);font-size:var(--p-h-texto);line-height:var(--p-interlineado);-webkit-font-smoothing:antialiased}
.p-serif{font-family:var(--p-serif);font-style:italic;font-weight:400;letter-spacing:0;text-transform:none}
.p-ceja{margin:0;font-size:var(--p-t-ceja);font-weight:700;letter-spacing:var(--p-tracking-ceja);text-transform:uppercase;color:var(--p-azul-texto)}
.p-oscuro .p-ceja{color:var(--p-azul)}
.p-titular{margin:0;font-weight:800;letter-spacing:var(--p-tracking-titular);line-height:1.02;text-transform:uppercase}
.p-h1{margin:0;font-size:var(--p-h-1);font-weight:800;letter-spacing:-.02em;line-height:1.15}
.p-h2{margin:0;font-size:var(--p-h-2);font-weight:800;letter-spacing:-.01em;line-height:1.2}
.p-h3{margin:0;font-size:var(--p-h-3);font-weight:700;line-height:1.3}
.p-sub{margin:0;color:var(--p-texto-2);font-size:var(--p-t-pequeno)}
.p-nota{font-size:var(--p-t-etiqueta);color:var(--p-texto-2)}
.p-cifra{font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

/* Contenedores */
.p-ancho{max-width:var(--p-ancho);margin:0 auto;padding-left:var(--p-margen);padding-right:var(--p-margen)}
.p-seccion{padding-top:var(--p-seccion-media);padding-bottom:var(--p-seccion-media)}
.p-panel{background:var(--p-blanco);border-radius:var(--p-r-panel);padding:var(--p-5)}
.p-tarjeta{background:var(--p-blanco);border:var(--p-borde) solid var(--p-negro);border-radius:var(--p-r-tarjeta);padding:var(--p-6)}
.p-bloque{border-radius:var(--p-r-bloque);padding:clamp(32px,6vw,88px)}
.p-oscuro{background:var(--p-negro);color:var(--p-blanco)}
.p-azul{background:var(--p-azul);color:var(--p-negro)}

/* Cabecera y pie de herramientas */
.p-cabecera{background:var(--p-negro);color:var(--p-blanco);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--p-3) var(--p-4);padding:var(--p-3) var(--p-5);min-height:60px}
.p-cabecera .p-logo{height:24px;width:auto;display:block}
.p-cabecera .p-herramienta{border-left:1px solid #44474C;padding-left:var(--p-3);font-size:var(--p-t-pequeno);color:var(--p-linea)}
.p-pie{background:var(--p-negro);color:var(--p-texto-2-oscuro);font-size:var(--p-t-etiqueta);padding:var(--p-6) var(--p-margen)}

/* Botones */
.p-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--p-2);min-height:var(--p-alto-control);padding:0 20px;border-radius:var(--p-r-pildora);border:var(--p-borde) solid var(--p-negro);background:var(--p-negro);color:var(--p-blanco);font:inherit;font-weight:700;font-size:15px;line-height:1;text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform .2s,background-color .2s,color .2s}
.p-btn:hover{transform:translateY(-1px)}
.p-btn:focus-visible{outline:none;box-shadow:var(--p-foco)}
.p-btn--principal{background:var(--p-azul);border-color:var(--p-azul);color:var(--p-negro)}
.p-btn--borde{background:transparent;color:var(--p-negro)}
.p-oscuro .p-btn--borde{color:var(--p-blanco);border-color:var(--p-blanco)}
.p-btn--peligro{background:var(--p-blanco);color:var(--p-error);border-color:var(--p-error)}
.p-btn--peq{min-height:36px;padding:0 14px;font-size:13.5px}
.p-btn:disabled{opacity:.45;cursor:not-allowed;transform:none}

/* Campos */
.p-campo{display:flex;flex-direction:column;gap:6px;font-size:var(--p-t-etiqueta);font-weight:600;color:var(--p-texto-2);min-width:0}
.p-campo input,.p-campo select,.p-campo textarea{font:inherit;font-size:var(--p-h-texto);font-weight:500;color:var(--p-negro);background:var(--p-blanco);border:var(--p-borde) solid var(--p-linea);border-radius:var(--p-r-campo);padding:10px 12px;min-height:var(--p-alto-control);width:100%}
.p-campo textarea{min-height:96px;line-height:1.5;resize:vertical}
.p-campo input:focus,.p-campo select:focus,.p-campo textarea:focus{outline:none;border-color:var(--p-azul);box-shadow:var(--p-foco)}
.p-campo .p-ayuda{font-weight:500;font-size:12.5px;color:var(--p-texto-2)}

/* Etiquetas y avisos */
.p-etiqueta{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;padding:4px 10px;border-radius:var(--p-r-pildora);background:var(--p-fondo);color:var(--p-negro);white-space:nowrap}
.p-etiqueta--negra{background:var(--p-negro);color:var(--p-blanco)}
.p-etiqueta--azul{background:var(--p-azul-suave);color:var(--p-azul-texto)}
.p-etiqueta--ok{background:var(--p-ok-fondo);color:var(--p-ok)}
.p-etiqueta--aviso{background:var(--p-aviso-fondo);color:var(--p-aviso)}
.p-etiqueta--error{background:var(--p-error-fondo);color:var(--p-error)}
.p-aviso{border-radius:var(--p-r-campo);padding:var(--p-3) var(--p-4);font-size:var(--p-t-pequeno);background:var(--p-info-fondo);color:var(--p-negro)}
.p-aviso--aviso{background:var(--p-aviso-fondo)}.p-aviso--error{background:var(--p-error-fondo)}.p-aviso--ok{background:var(--p-ok-fondo)}

/* Tablas */
.p-tabla{overflow-x:auto;border-radius:var(--p-r-panel);background:var(--p-blanco)}
.p-tabla table{width:100%;border-collapse:collapse;font-size:var(--p-t-pequeno)}
.p-tabla th{text-align:left;font-size:var(--p-t-etiqueta);font-weight:600;color:var(--p-texto-2);padding:14px 16px;white-space:nowrap}
.p-tabla td{padding:14px 16px;border-top:1px solid var(--p-linea);vertical-align:middle}
.p-tabla td.p-num,.p-tabla th.p-num{text-align:right;font-variant-numeric:tabular-nums}

/* Barra de avance (como Folio): pasos en segmentos */
.p-avance{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:var(--p-2)}
.p-avance .p-paso{display:flex;flex-direction:column;gap:8px;font-size:var(--p-t-etiqueta);font-weight:600;color:var(--p-texto-2);background:none;border:0;padding:0;text-align:left;cursor:pointer;font-family:inherit}
.p-avance .p-paso::before{content:"";display:block;height:6px;border-radius:var(--p-r-pildora);background:var(--p-linea)}
.p-avance .p-paso.hecho{color:var(--p-negro)}.p-avance .p-paso.hecho::before{background:var(--p-ok)}
.p-avance .p-paso.actual{color:var(--p-negro);font-weight:800}.p-avance .p-paso.actual::before{background:var(--p-azul)}
.p-oscuro .p-avance .p-paso{color:var(--p-texto-2-oscuro)}.p-oscuro .p-avance .p-paso:not(.hecho):not(.actual)::before{background:#2A2C30}
.p-oscuro .p-avance .p-paso.hecho,.p-oscuro .p-avance .p-paso.actual{color:var(--p-blanco)}

/* Anillo de porcentaje (como Folio) */
.p-anillo{--v:0;width:72px;height:72px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:17px;
  background:radial-gradient(closest-side,var(--p-negro) 78%,transparent 79% 100%),conic-gradient(var(--p-ok) calc(var(--v)*1%),#2A2C30 0)}

/* ==========================================================================
   Herramientas · armazón común (v1.1 · 14/11/2026)
   CRM, Folio y valorador usan esta misma estructura: menú lateral blanco,
   fondo gris, cabecera de página con título y acciones, filtros en píldora,
   tablas y paneles blancos. Nada de colores ni tamaños propios en cada app.
   <div class="p-app">
     <aside class="p-lateral"> .p-lateral-marca · .p-nav (.p-nav-grupo, .p-nav-item) · .p-lateral-pie </aside>
     <div class="p-area"> <header class="p-barra">…</header> <main class="p-pagina">…</main> </div>
   </div>
   ========================================================================== */
.p-app{display:flex;height:100vh;overflow:hidden;background:var(--p-fondo);color:var(--p-negro);font-family:var(--p-sans);font-size:var(--p-h-texto);line-height:1.45;-webkit-font-smoothing:antialiased}
.p-lateral{width:248px;flex:none;display:flex;flex-direction:column;background:var(--p-blanco);border-right:1px solid var(--p-linea);min-height:0}
.p-lateral-marca{display:flex;align-items:center;gap:12px;padding:20px 20px 16px;color:var(--p-negro);text-decoration:none}
.p-lateral-marca img{width:40px;height:40px;flex:none;display:block}
.p-lateral-marca b{display:block;font-size:17px;font-weight:700;line-height:1.15;letter-spacing:-.01em}
.p-lateral-marca span{display:block;font-size:var(--p-t-etiqueta);font-weight:500;color:var(--p-texto-2);line-height:1.3}
.p-nav{flex:1;overflow:auto;padding:4px 12px 16px;display:flex;flex-direction:column;gap:2px}
.p-nav-grupo{padding:18px 12px 6px;font-size:var(--p-t-etiqueta);font-weight:600;color:var(--p-texto-2)}
.p-nav-item{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:0 12px;border:0;border-radius:12px;background:none;color:var(--p-negro);font:inherit;font-size:15px;font-weight:500;line-height:1.2;text-align:left;text-decoration:none;cursor:pointer;transition:background-color .15s}
.p-nav-item svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.p-nav-item:hover{background:var(--p-fondo)}
.p-nav-item.on,.p-nav-item[aria-current="page"]{background:var(--p-fondo);font-weight:700}
.p-nav-item:focus-visible{outline:none;box-shadow:var(--p-foco)}
.p-contador{margin-left:auto;min-width:22px;height:22px;padding:0 7px;border-radius:var(--p-r-pildora);background:var(--p-negro);color:var(--p-blanco);font-size:12.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.p-contador:empty{display:none}
.p-lateral-pie{display:flex;align-items:center;gap:10px;padding:14px 20px;border-top:1px solid var(--p-linea);font-size:var(--p-t-etiqueta);color:var(--p-texto-2);min-width:0}
.p-avatar{width:36px;height:36px;flex:none;border-radius:50%;background:var(--p-fondo);color:var(--p-negro);font-size:13px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;letter-spacing:.02em}
.p-avatar--peq{width:32px;height:32px;font-size:12.5px}
.p-sync{display:inline-flex;align-items:center;gap:6px;font-size:var(--p-t-etiqueta);color:var(--p-texto-2);min-width:0}
.p-sync i{width:8px;height:8px;border-radius:50%;flex:none;background:var(--p-texto-2-oscuro)}
.p-sync.ok i{background:var(--p-ok)}.p-sync.local i,.p-sync.aviso i{background:var(--p-aviso)}.p-sync.err i{background:var(--p-error)}
.p-area{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0}
.p-barra{flex:none;display:flex;align-items:center;gap:12px;min-height:68px;padding:12px 32px}
.p-pagina{flex:1;min-height:0;overflow:auto;padding:8px 32px 56px}
.p-area>.p-pagina:first-child{padding-top:32px}
.p-pagina-cab{display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px;margin:0 0 24px}
.p-pagina-cab h1{margin:0;font-size:32px;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.p-pagina-cab .p-cuenta{font-size:var(--p-t-pequeno);color:var(--p-texto-2)}
.p-pagina-cab .p-acciones{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.p-filtros{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.p-buscar{position:relative;flex:1 1 280px;max-width:440px}
.p-buscar svg{position:absolute;z-index:2;left:14px;top:50%;width:18px;height:18px;transform:translateY(-50%);color:var(--p-texto-2);pointer-events:none;fill:none;stroke:currentColor;stroke-width:1.7}
.p-buscar input{width:100%;min-height:44px;padding:0 16px 0 42px;border:1px solid var(--p-linea);border-radius:12px;background:var(--p-blanco);font:inherit;font-size:var(--p-t-pequeno);color:var(--p-negro)}
.p-buscar input:focus{outline:none;border-color:var(--p-azul);box-shadow:var(--p-foco)}
.p-filtro{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 16px;border:1px solid var(--p-linea);border-radius:var(--p-r-pildora);background:var(--p-blanco);color:var(--p-negro);font:inherit;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap}
.p-filtro b{font-weight:600;color:var(--p-texto-2)}
.p-filtro:hover{border-color:var(--p-texto-2-oscuro)}
.p-filtro.on{background:var(--p-negro);border-color:var(--p-negro);color:var(--p-blanco)}.p-filtro.on b{color:var(--p-texto-2-oscuro)}
.p-btn--blanco{background:var(--p-blanco);border-color:var(--p-linea);color:var(--p-negro)}
.p-btn--blanco:hover{border-color:var(--p-texto-2-oscuro)}
.p-btn--icono{width:var(--p-alto-control);padding:0}
.p-panel--lista{padding:0;overflow:hidden}
.p-panel-cab{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.p-panel-cab h2{margin:0;font-size:var(--p-h-3);font-weight:700;flex:1;min-width:0}
.p-vacio{padding:48px 24px;text-align:center;color:var(--p-texto-2)}
.p-vacio h2{margin:0 0 6px;font-family:var(--p-serif);font-style:italic;font-weight:400;font-size:30px;color:var(--p-negro)}
.p-modal-fondo{position:fixed;inset:0;z-index:100;background:rgba(11,11,12,.45);display:flex;align-items:flex-start;justify-content:center;padding:6vh 16px;overflow:auto}
.p-modal{width:100%;max-width:560px;background:var(--p-blanco);border-radius:20px;box-shadow:var(--p-sombra)}
@media (max-width:860px){
  .p-lateral{width:72px}.p-lateral-marca{justify-content:center;padding:16px 0}.p-lateral-marca div,.p-nav-grupo,.p-nav-item span:not(.p-contador),.p-lateral-pie>:not(.p-avatar):not(.p-sync),.p-lateral-pie .p-sync span{display:none}.p-lateral-pie{justify-content:center;padding:12px 0}
  .p-nav{padding:4px 8px}.p-nav-item{justify-content:center;padding:0}.p-contador{position:absolute;top:2px;right:2px;min-width:18px;height:18px;font-size:11px;padding:0 5px}
  .p-barra{padding:10px 16px}.p-pagina{padding:4px 16px 40px}.p-pagina-cab h1{font-size:26px}
}

/* Accesibilidad */
.p-solo-lector{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}