:root{
    --stone:#F6F4F0; --stone-card:#FFFFFF;
    --ink:#211613; --ink-soft:#6E5F5A; --ink-faint:#A79A94;
    --oxblood:#58130E; --oxblood-deep:#3A0C08; --oxblood-soft:#F1E1DE;
    --gold:#BD9247; --gold-soft:#F8F1E2;
    --clay:#9C5A32; --clay-soft:#F2E1D2;
    --jade:#3E6B52; --jade-soft:#DEE9E2;
    --line:rgba(33,22,19,0.12); --line-strong:rgba(33,22,19,0.24);
    --shadow-card:0 1px 2px rgba(33,22,19,0.04), 0 8px 20px -12px rgba(33,22,19,0.12);
    --nav-h:64px;
  }
  *{box-sizing:border-box;}
  /* Armazón de aplicación de altura completa (como Stripe/Linear): la barra
     de arriba fija, el menú lateral ocupando TODO el alto de la pantalla, y
     solo el contenido de la derecha con scroll propio. Antes la página
     entera hacía scroll y el menú terminaba donde terminaban sus botones,
     dejando media columna vacía debajo. */
  html, body{margin:0; height:100%;}
  /* OJO con la altura: en el celular, 100vh mide la pantalla COMPLETA,
     incluyendo lo que tapa la barra de direcciones del navegador. Con el
     armazón de altura fija eso dejaba el final del contenido (y la barra
     inferior) fuera de la vista, y como la página en sí no hace scroll, no
     había manera de alcanzarlo. 100dvh sí se ajusta cuando la barra del
     navegador se encoge; 100vh queda antes como respaldo para navegadores
     viejos. */
  .app{background:var(--stone); color:var(--ink); font-family:'Inter',sans-serif; overflow:hidden;
    height:100vh; height:100dvh; display:flex; flex-direction:column;}
  .head-band{position:relative; background:var(--stone-card); color:var(--ink); padding:14px 28px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; border-bottom:1px solid var(--line); flex-shrink:0;}
  .brand-mark{display:flex; align-items:center; gap:12px;}
  .brand-mark svg{display:block; flex-shrink:0; width:28px; height:28px;}
  .navbar-wordmark{font-family:'Cormorant Garamond',serif; font-weight:700; font-size:19px; letter-spacing:1px; color:var(--oxblood-deep);}
  .navbar-wordmark i{font-style:normal; font-weight:400; color:var(--gold);}
  .navbar-divider{width:1px; height:22px; background:var(--line-strong);}
  .navbar-caption{font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint); font-weight:500;}
  .nav-actions{display:flex; align-items:center; gap:8px; margin-left:auto;}
  .seg{display:flex; background:var(--stone); border-radius:999px; padding:3px; gap:2px;}
  .seg .tab-btn.active{background:var(--stone-card); color:var(--ink); font-weight:600; box-shadow:0 1px 2px rgba(30,23,19,0.08);}
  .navbar-pill{border:1px solid var(--line-strong); background:var(--stone-card); color:var(--ink); padding:8px 14px; border-radius:999px; font-size:12.5px; font-weight:500; cursor:pointer; font-family:'Inter',sans-serif;}
  .navbar-pill:hover{background:var(--stone);}
  .icon-btn{width:34px; height:34px; border-radius:999px; border:1px solid var(--line-strong); background:var(--stone-card); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink-soft);}
  .icon-btn:hover{background:var(--stone); color:var(--oxblood);}
  /* Botón de menú en pantalla angosta: no un ícono suelto (que parece
     decorativo), sino una píldora que DICE en qué sección estás y que hay
     más — un cliente que entra por primera vez tiene que ver de inmediato
     que la primera pantalla no es todo. Va después de .icon-btn a propósito:
     comparte su estilo base pero le gana en tamaño y forma. */
  .icon-btn.menu-toggle{align-items:center; gap:7px; width:auto; height:auto; padding:7px 13px; border-radius:999px;
    font-family:inherit; font-size:13px; font-weight:600; color:var(--ink); max-width:52vw;}
  .icon-btn.menu-toggle .menu-label{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .icon-btn.menu-toggle .ti-chevron-down{font-size:14px; opacity:0.55; flex-shrink:0;}
  .icon-btn.menu-toggle:hover{border-color:var(--oxblood); color:var(--oxblood-deep);}
  .tabs{display:flex; gap:8px; align-items:center;}
  .tab-btn{background:none; border:none; color:var(--ink-soft); padding:7px 16px; border-radius:999px; font-size:12.5px; font-weight:500; cursor:pointer; font-family:'Inter',sans-serif; transition:all 0.15s;}
  /* Menú lateral fijo (como Stripe/Linear): todas las secciones a la vista,
     siempre en el mismo lugar, sin que nada de la página las empuje hacia
     abajo. Dentro de una operación, sus secciones cuelgan del menú como
     sub-elementos — no hay que bajar a buscar una barra de pestañas. */
  .app-body{flex:1; min-height:0; display:flex; align-items:stretch;}
  /* Columna completa de arriba abajo, con su propio scroll si la lista de
     secciones creciera. Nunca se corta a media pantalla. */
  .sidebar{width:236px; flex-shrink:0; background:var(--stone-card); border-right:1px solid var(--line);
    padding:18px 12px; display:flex; flex-direction:column; gap:2px; height:100%; overflow-y:auto;}
  .body-wrap{flex:1; min-width:0; padding:24px 26px; overflow-y:auto; height:100%;
    -webkit-overflow-scrolling:touch; overscroll-behavior:contain;}
  .side-group{font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint);
    font-weight:600; margin:20px 0 7px; padding:0 12px;}
  .side-group:first-child{margin-top:2px;}
  /* La barrita tinta de la izquierda marca la sección activa sin gritar —
     el fondo tenue solo no se distinguía de un simple hover. */
  .side-item{position:relative; display:flex; align-items:center; gap:10px; width:100%; padding:9px 11px; border:0;
    border-radius:9px; background:none; color:var(--ink-soft); font-size:13.5px; font-family:inherit; text-align:left;
    cursor:pointer; line-height:1.25; transition:background 0.14s ease, color 0.14s ease;}
  .side-item:hover{background:var(--stone); color:var(--ink);}
  .side-item.active{background:var(--oxblood-soft); color:var(--oxblood-deep); font-weight:600;}
  .side-item.active::before{content:''; position:absolute; left:0; top:7px; bottom:7px; width:3px;
    border-radius:0 3px 3px 0; background:var(--oxblood-deep);}
  .side-item i{font-size:16px; flex-shrink:0; opacity:0.8;}
  .side-item.active i{opacity:1;}
  .side-item span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .side-item .side-count{margin-left:auto; background:var(--oxblood-deep); color:#F6F4F0; border-radius:9px;
    font-size:10.5px; font-weight:600; min-width:18px; height:18px; display:inline-flex; align-items:center;
    justify-content:center; padding:0 5px;}
  .side-item.active .side-count{background:var(--oxblood);}
  .side-sub{padding-left:20px; font-size:13px;}
  .side-divider{height:1px; background:var(--line); margin:14px 4px;}
  /* Pegado al fondo de la columna, separado por su línea — el espaciador
     flexible que lo empuja lo pone buildSidebarAccount. */
  .side-account{border-top:1px solid var(--line); padding:14px 10px 4px; margin-top:10px; flex-shrink:0;}
  /* Ventana angosta: el menú se guarda detrás del botón de hamburguesa y
     entra deslizándose por la izquierda, como Stripe — el contenido se
     queda con todo el ancho y la navegación sigue completa (con sus
     títulos de grupo), en vez de una tira de chips a la que hay que
     hacerle scroll horizontal para encontrar la sección. */
  .menu-toggle{display:none;}
  .sidebar-scrim{display:none;}
  @media (max-width:900px){
    /* El botón de menú desaparece en celular: la barra inferior ya trae las
       secciones a la vista y su propio "Más" abre el cajón. Dejarlo era
       repetir la misma puerta dos veces y apretar la barra de arriba. */
    .menu-toggle{display:none;}
    /* Una sola fila compacta: marca y acciones. El descriptivo
       "COORDINACIÓN DE CIERRES" es decorativo y en el celular empujaba
       todo a tres renglones. */
    .head-band{padding:10px 12px; gap:8px; flex-wrap:nowrap;}
    /* "Portal cliente / agente" no cabe; en celular basta "Portal". */
    .seg .tab-btn{padding:6px 12px; font-size:12px;}
    #tab-portal{font-size:0;}
    #tab-portal::after{content:'Portal'; font-size:12px;}
    /* Idioma y cerrar sesión bajan al menú "Más" (ver buildSidebarAccount):
       arriba solo quedan la marca, el selector de vista y la campana. */
    #lang-toggle, #header-logout{display:none;}
    /* El emblema como cuadrito de marca, igual que en el mockup. */
    .brand-mark svg{width:26px; height:26px; background:var(--oxblood-deep); border-radius:7px; padding:4px;}
    .brand-mark svg polygon{fill:#F6F4F0;}
    .navbar-caption, .navbar-divider{display:none;}
    .brand-mark{gap:8px; min-width:0;}
    .brand-mark svg{width:22px; height:22px;}
    .navbar-wordmark{font-size:15px; letter-spacing:0.5px;}
    .nav-actions{gap:6px;}
    .navbar-pill{padding:7px 11px; font-size:12px;}
    /* Hueco para la barra inferior (y para la barra de inicio del iPhone) */
    .body-wrap{padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 12px);}
    .sidebar{padding-bottom:calc(18px + env(safe-area-inset-bottom));}
  }
  /* ---- Barra inferior de navegación (solo celular) ----
     Lo que un ícono de hamburguesa nunca logra: que las secciones estén a
     la vista y al alcance del pulgar. Quien entra por primera vez ve de
     inmediato que hay más que la pantalla en la que cayó. */
  .bottom-nav{display:none;}
  @media (max-width:900px){
    .bottom-nav{display:block; position:fixed; left:0; right:0; bottom:0; z-index:70;
      background:var(--stone-card); border-top:0.5px solid var(--line);
      padding-bottom:env(safe-area-inset-bottom); box-shadow:0 -2px 12px rgba(33,22,19,0.05);}
    .bottom-nav-inner{height:var(--nav-h); display:flex; justify-content:space-around; align-items:center;}
    .bottom-nav button{flex:1; min-width:0; border:0; background:none; cursor:pointer; font-family:inherit;
      display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 4px;
      font-size:10.5px; color:var(--ink-faint); position:relative;}
    .bottom-nav button i{font-size:21px;}
    .bottom-nav button span{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
    .bottom-nav button.active{color:var(--oxblood-deep); font-weight:600;}
    .bottom-nav .nav-count{position:absolute; top:2px; left:50%; margin-left:6px; background:var(--oxblood-deep);
      color:#F6F4F0; border-radius:9px; font-size:9.5px; font-weight:600; min-width:16px; height:16px;
      display:inline-flex; align-items:center; justify-content:center; padding:0 4px;}
  }
  /* ---- Pestañas horizontales de la operación (solo celular) ----
     Dentro de una operación hay ocho secciones: demasiadas para la barra
     inferior, así que van en un carrusel de píldoras arriba del contenido,
     con su contador de pendientes. */
  .section-pills{display:none;}
  @media (max-width:900px){
    .section-pills{display:flex; gap:8px; overflow-x:auto; padding:2px 0 12px; margin:0 0 4px;
      scrollbar-width:none; -webkit-overflow-scrolling:touch;}
    .section-pills::-webkit-scrollbar{display:none;}
    .section-pills button{flex:0 0 auto; display:inline-flex; align-items:center; gap:6px;
      border:0.5px solid var(--line); background:var(--stone-card); color:var(--ink-soft);
      font-size:13px; padding:8px 14px; border-radius:999px; white-space:nowrap; cursor:pointer;
      font-family:inherit;}
    .section-pills button.active{border-color:var(--oxblood); background:var(--oxblood-soft);
      color:var(--oxblood-deep); font-weight:600;}
    .section-pills .pill-count{background:var(--oxblood-deep); color:#F6F4F0; border-radius:9px;
      font-size:10px; font-weight:600; min-width:16px; height:16px; display:inline-flex;
      align-items:center; justify-content:center; padding:0 4px;}
  }
  /* En celular de verdad ya no cabe la marca escrita junto al botón de menú
     y las acciones — se queda solo el emblema, que igual identifica. */
  @media (max-width:520px){
    .navbar-wordmark{display:none;}
    .icon-btn.menu-toggle{max-width:46vw;}
    .sidebar{position:fixed; top:0; left:0; bottom:0; height:auto; z-index:80; width:min(280px, 84vw);
      transform:translateX(-100%); transition:transform 0.22s ease; box-shadow:0 0 40px rgba(33,22,19,0.22);}
    .sidebar.open{transform:translateX(0);}
    .sidebar-scrim.open{display:block; position:fixed; inset:0; background:rgba(33,22,19,0.35); z-index:79;}
    .body-wrap{padding:18px 16px;}
  }
  .banner{background:var(--gold-soft); color:#5B4620; font-size:12px; padding:10px 14px; border-radius:10px; margin-bottom:18px; line-height:1.5;}
  .section-title{font-family:'Cormorant Garamond',serif; font-weight:600; font-size:19px; margin:0 0 12px; color:var(--oxblood-deep);}
  .section-label{font-size:11.5px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 10px;}
  .card{background:var(--stone-card); border:0.5px solid var(--line); border-radius:14px; padding:18px 20px; margin-bottom:16px; box-shadow:var(--shadow-card);}
  .grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
  .form-row{display:flex; gap:10px; margin-bottom:10px; flex-wrap:wrap;}
  .form-row label{display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--ink-soft); flex:1; min-width:160px;}
  input, select, textarea{font-size:13px; padding:8px 10px; border:0.5px solid var(--line); border-radius:8px; background:var(--stone-card); color:var(--ink); font-family:'Inter',sans-serif; transition:border-color 0.15s;}
  input:focus, select:focus, textarea:focus{outline:none; border-color:var(--oxblood); box-shadow:0 0 0 3px var(--oxblood-soft);}
  textarea{width:100%; resize:vertical; min-height:36px;}
  .btn{padding:8px 16px; border-radius:24px; font-size:12.5px; cursor:pointer; border:1px solid var(--line-strong); background:var(--stone-card); color:var(--ink-soft); transition:all 0.15s; font-family:'Inter',sans-serif;}
  .btn:hover{border-color:var(--oxblood); color:var(--oxblood);}
  .btn.primary{background:var(--oxblood); color:#fff; border-color:var(--oxblood);}
  .btn.primary:hover{background:var(--oxblood-deep); color:#fff;}
  .btn.gold{background:var(--gold); color:#fff; border-color:var(--gold);}
  .btn.gold:hover{color:#fff; opacity:0.9;}
  .deal-card{position:relative; border:0.5px solid var(--line); border-radius:14px; padding:16px; margin-bottom:12px; background:var(--stone-card); cursor:pointer; transition:all 0.15s; box-shadow:var(--shadow-card);}
  .deal-card-menu-btn{position:absolute; top:10px; right:10px; width:28px; height:28px; border-radius:50%; border:none; background:transparent; color:var(--ink-faint); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:16px;}
  .deal-card-menu-btn:hover{background:var(--stone); color:var(--ink);}
  .deal-card-menu{position:absolute; top:40px; right:10px; background:var(--stone-card); border:0.5px solid var(--line); border-radius:10px; box-shadow:0 4px 16px rgba(33,22,19,0.14); z-index:5; min-width:170px; overflow:hidden;}
  .deal-card-menu button{display:flex; align-items:center; gap:8px; width:100%; text-align:left; padding:9px 12px; font-size:12.5px; background:none; border:none; cursor:pointer; color:var(--ink);}
  .deal-card-menu button:hover{background:var(--stone);}
  .deal-card-menu button.danger{color:var(--oxblood);}
  .deal-card:hover{border-color:var(--oxblood); transform:translateY(-1px);}
  .deal-card.active{border-color:var(--oxblood); box-shadow:0 0 0 3px var(--oxblood-soft);}
  .deal-title{font-weight:600; font-size:14.5px;}
  .deal-sub{font-size:12px; color:var(--ink-soft); margin-top:2px;}
  .badge{display:inline-block; font-size:10.5px; padding:3px 10px; border-radius:20px; background:var(--jade-soft); color:var(--jade); margin-top:6px; font-weight:500;}
  .data-table{width:100%; border-collapse:collapse; font-size:13px;}
  .data-table th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:0.4px; color:var(--ink-faint); font-weight:600; padding:0 10px 8px; border-bottom:1px solid var(--line-strong);}
  .data-table td{padding:9px 10px; border-bottom:0.5px solid var(--line); vertical-align:middle;}
  .data-table tr:last-child td{border-bottom:none;}
  .role-badge{font-size:10.5px; padding:2px 9px; border-radius:20px; font-weight:500; white-space:nowrap;}
  .role-badge.buyer{background:var(--gold-soft); color:#6B4E1E;}
  .role-badge.seller{background:var(--oxblood-soft); color:var(--oxblood);}
  .badge.scn-trust{background:var(--gold-soft); color:#6B4E1E;}
  .badge.scn-transfer{background:var(--clay-soft); color:#7A3417;}
  .badge.scn-trust-termination{background:var(--oxblood-soft); color:var(--oxblood);}
  .doc-list{list-style:none; padding:0; margin:0;}
  .doc-item{display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding:9px 0; border-bottom:0.5px solid var(--line); font-size:13px;}
  .doc-item-actions{margin-left:auto; display:flex; align-items:center; flex-wrap:wrap; gap:8px;}
  .review-badge{font-size:10.5px; padding:3px 10px; border-radius:20px; font-weight:500; white-space:nowrap;}
  .review-badge.pending{background:var(--stone); border:0.5px solid var(--line); color:var(--ink-soft);}
  .review-badge.approved{background:var(--jade-soft); color:var(--jade);}
  .review-badge.rejected{background:var(--oxblood-soft); color:var(--oxblood);}
  .doc-review-note{flex-basis:100%; font-size:11.5px; color:var(--oxblood); margin-top:-2px;}
  .btn.success{background:var(--jade-soft); color:var(--jade); border-color:var(--jade-soft);}
  .btn.success:hover{background:#DFEEE0; color:var(--jade);}
  .btn.danger{background:var(--oxblood-soft); color:var(--oxblood); border-color:var(--oxblood-soft);}
  .btn.danger:hover{background:#F7DDD6; color:var(--oxblood);}
  .crumb{font-size:13px; color:var(--ink-soft); margin-bottom:14px; display:inline-flex; align-items:center; gap:4px; cursor:pointer; background:none; border:none; padding:0; font-family:'Inter',sans-serif;}
  .crumb:hover{color:var(--ink);}
  .deal-head-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px;}
  .parties-line{font-size:14px; color:var(--ink); margin:0 0 4px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
  .parties-line .muted{color:var(--ink-faint); font-size:12.5px;}
  .location-line{font-size:12.5px; color:var(--ink-soft); margin:0 0 10px; display:flex; align-items:center; gap:5px;}
  /* Cada parte en su renglón, con su tipo — con nombres de empresa largos,
     la línea única "vendedor → comprador" se rompía sin poder leerse. */
  .party-stack{display:flex; flex-direction:column; gap:3px; margin:0 0 8px;}
  .party-line{font-size:14.5px; display:flex; align-items:center; gap:7px; flex-wrap:wrap; line-height:1.4;}
  .party-line b{font-weight:500;}
  .party-line i{color:var(--ink-faint); font-size:13px;}
  .party-line .tag{font-size:12px; color:var(--ink-faint);}
  /* Agentes agrupados por despacho: de qué firma es cada quien importa. */
  .agents-block{margin:8px 0 0; font-size:12.5px; color:var(--ink-soft); line-height:1.7;}
  .agents-block .firm{color:var(--ink); font-weight:500;}
  .head-divider{height:0.5px; background:var(--line); margin:14px 0;}
  .escrow-block .k{font-size:11px; letter-spacing:0.05em; text-transform:uppercase; color:var(--ink-faint); font-weight:600;}
  .escrow-block .v{font-size:16px; font-weight:600; margin-top:2px;}
  .stat-tile .value.value-empty{color:var(--ink-faint); font-weight:500;}
  .stat-row{display:flex; gap:32px; padding:14px 0; border-top:0.5px solid var(--line); border-bottom:0.5px solid var(--line); margin-bottom:16px; flex-wrap:wrap;}
  .stat{display:flex; flex-direction:column; gap:3px;}
  .stat-label{font-size:11px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:0.06em; font-weight:500;}
  .stat-value{font-size:15px; font-weight:600;}
  .field-editable{cursor:pointer; border-bottom:1px dashed transparent; border-radius:2px;}
  .field-editable:hover{border-bottom-color:var(--line-strong); background:var(--stone);}
  .inline-edit-input{border:1px solid var(--line-strong); border-radius:6px; padding:3px 7px; background:var(--stone-card); color:var(--ink);}
  /* Toasts — confirmaciones y errores sin popups nativos del navegador */
  #toast-stack{position:fixed; bottom:18px; right:18px; z-index:2000; display:flex; flex-direction:column; gap:8px; max-width:min(380px, calc(100vw - 36px));}
  .toast{display:flex; align-items:flex-start; gap:9px; padding:11px 14px; border-radius:10px; font-size:13px; line-height:1.4;
    background:var(--oxblood-deep); color:#F6F4F0; box-shadow:0 6px 24px rgba(33,22,19,0.28);
    animation:toast-in .18s ease-out;}
  .toast.error{background:#7A1E16;}
  .toast.success{background:#2F5D46;}
  .toast i{flex-shrink:0; margin-top:1px;}
  @keyframes toast-in{from{opacity:0; transform:translateY(8px);}to{opacity:1; transform:none;}}
  .toast.leaving{opacity:0; transform:translateY(6px); transition:opacity .25s, transform .25s;}
  /* Diálogo de confirmación propio (reemplaza confirm() nativo) */
  .dialog-overlay{position:fixed; inset:0; background:rgba(33,22,19,0.55); display:flex; align-items:center; justify-content:center; z-index:1500; padding:20px;}
  .dialog-box{background:var(--stone-card); border-radius:14px; width:min(420px, 94vw); padding:20px; box-shadow:0 12px 40px rgba(33,22,19,0.3);}
  .dialog-box p{margin:0 0 16px; font-size:13.5px; line-height:1.5; white-space:pre-line;}
  .dialog-actions{display:flex; gap:8px; justify-content:flex-end;}
  /* Spinner en botones de acciones lentas */
  .btn-spinner{display:inline-block; width:12px; height:12px; border:2px solid currentColor; border-top-color:transparent; border-radius:50%; animation:spin .7s linear infinite; vertical-align:-2px;}
  @keyframes spin{to{transform:rotate(360deg);}}
  /* Barra fija de secciones dentro del detalle de la operación */
  /* Panel de la campana de notificaciones — en pantalla ancha cuelga de la
     campana; en angosta ocupa casi todo el ancho, pegado abajo de la barra. */
  #notif-panel{position:fixed; top:62px; right:16px; width:min(430px, calc(100vw - 24px)); max-height:72dvh; overflow-y:auto;
    background:var(--stone-card); border:0.5px solid var(--line); border-radius:14px;
    box-shadow:0 10px 34px rgba(33,22,19,0.2); z-index:90; padding:16px;}
  .notif-chip{border:1px solid var(--line-strong); background:var(--stone-card); color:var(--ink-soft); font-size:12.5px;
    padding:8px 13px; border-radius:10px; cursor:pointer; font-family:inherit; display:inline-flex; align-items:center;
    gap:6px; line-height:1.1;}
  .notif-chip:hover{border-color:var(--oxblood); color:var(--oxblood);}
  .notif-chip.active{border:2px solid var(--oxblood-deep); background:var(--oxblood-soft); color:var(--oxblood-deep);
    font-weight:600; padding:7px 12px;}
  .notif-chip .tab-count{background:var(--oxblood-deep); color:#F6F4F0; border-radius:9px; font-size:10.5px; font-weight:600;
    min-width:17px; height:17px; display:inline-flex; align-items:center; justify-content:center; padding:0 4px;}
  .notif-item{display:flex; gap:10px; padding:9px 6px; border-bottom:0.5px solid var(--line); cursor:pointer;
    align-items:flex-start; border-radius:8px;}
  .notif-item:hover{background:var(--stone);}
  .notif-item:last-child{border-bottom:0;}
  @media (max-width:900px){
    #notif-panel{left:12px; right:12px; width:auto; max-height:70dvh;}
  }
  /* Menú "···" de acciones por documento del checklist (vista staff) */
  .doc-action-menu{position:absolute; top:32px; right:0; background:var(--stone-card); border:0.5px solid var(--line); border-radius:10px; box-shadow:0 4px 16px rgba(33,22,19,0.14); z-index:6; min-width:220px; overflow:hidden;}
  .doc-action-menu button{display:flex; align-items:center; gap:8px; width:100%; background:none; border:0; padding:9px 14px; font-size:12.5px; font-family:inherit; color:var(--ink); cursor:pointer; text-align:left;}
  .doc-action-menu button:hover{background:var(--stone);}
  .doc-action-menu button.danger{color:var(--oxblood);}
  .progress-row{display:flex; gap:28px; margin-bottom:16px; flex-wrap:wrap;}
  .progress-block{flex:1; min-width:160px;}
  .progress-top{display:flex; justify-content:space-between; font-size:12px; margin-bottom:5px;}
  .progress-top .progress-name{color:var(--ink-soft); font-weight:500;}
  .progress-top .progress-pct{font-weight:600;}
  .field-row-clean{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:16px;}
  .field-row-clean label{flex:1; min-width:160px; display:flex; flex-direction:column; gap:5px; font-size:12px; color:var(--ink-soft); font-weight:500;}
  .party-card-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;}
  .party-name{font-size:14px; font-weight:600; margin:0;}
  .party-name span{font-weight:400; color:var(--ink-faint); font-size:12.5px;}
  .party-card-row{display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:16px; padding:10px 0; border-bottom:0.5px solid var(--line);}
  .party-card-row:last-child{border-bottom:none;}
  .party-meta{font-size:12.5px; color:var(--ink-soft); margin:3px 0 0;}
  .session-avatar{width:44px; height:44px; border-radius:50%; background:var(--oxblood-deep); color:var(--gold-soft); display:flex; align-items:center; justify-content:center; font-weight:600; font-size:14px; flex-shrink:0;}
  .doc-item:last-child{border-bottom:none;}
  .doc-check{width:20px; height:20px; border-radius:6px; border:1.5px solid var(--line-strong); cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:12px; color:var(--jade); transition:all 0.15s;}
  .doc-check.done{background:var(--jade); border-color:var(--jade); color:#fff;}
  .doc-owner{font-size:10.5px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:0.4px; margin-right:6px;}
  .task-row{display:flex; gap:12px; padding:10px 0; border-bottom:0.5px solid var(--line); align-items:flex-start;}
  .progress-track{height:8px; border-radius:5px; background:var(--stone); overflow:hidden; margin:4px 0 14px;}
  .progress-fill{height:100%; border-radius:5px; background:var(--jade); transition:width 0.2s;}
  .task-row:last-child{border-bottom:none;}
  .task-stamp{flex-shrink:0; width:30px; height:30px; border-radius:50%; border:2px solid var(--line-strong); display:flex; align-items:center; justify-content:center; font-size:11px; cursor:pointer; background:var(--stone-card); color:var(--ink-faint);}
  .task-stamp.progress{border-color:var(--clay); color:var(--clay);}
  .task-stamp.done{border-color:var(--gold); color:var(--gold); background:var(--gold-soft);}

  /* ---- Portal: dashboard de operaciones + resumen enriquecido de la operación abierta ---- */
  .op-scroller{display:flex; gap:12px; overflow-x:auto; padding:2px 2px 8px;}
  .op-card{flex:0 0 220px; background:var(--stone-card); border:1.5px solid var(--line); border-radius:14px; padding:14px 16px; cursor:pointer; transition:border-color 0.15s ease, background 0.15s ease;}
  .op-card:hover{border-color:var(--gold);}
  .op-card.active{border-color:var(--oxblood); background:var(--gold-soft);}
  .op-card-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;}
  .op-role{font-size:10.5px; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; color:var(--oxblood);}
  .op-check{width:18px; height:18px; border-radius:50%; background:var(--oxblood); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--gold-soft);}
  .op-check svg{width:11px; height:11px;}
  .op-title{font-size:14.5px; font-weight:600; margin:0 0 3px;}
  .op-addr{font-size:12px; color:var(--ink-soft); margin:0 0 10px;}
  .op-bar{height:4px; background:var(--line); border-radius:999px; overflow:hidden; margin-bottom:5px;}
  .op-bar-fill{height:100%; background:var(--oxblood); border-radius:999px;}
  .op-pct{font-size:11px; color:var(--ink-faint);}

  .stepper{display:flex; align-items:flex-start; margin:18px 0 20px;}
  .step{flex:1; display:flex; flex-direction:column; align-items:center; position:relative; text-align:center;}
  .step:not(:last-child)::after{content:""; position:absolute; top:13px; left:calc(50% + 20px); width:calc(100% - 40px); height:2px; background:var(--line);}
  .step.done:not(:last-child)::after{background:var(--oxblood);}
  .step-dot{width:26px; height:26px; border-radius:50%; background:var(--stone-card); border:2px solid var(--line-strong); display:flex; align-items:center; justify-content:center; z-index:1; margin-bottom:7px; color:var(--ink-faint); font-size:11px; font-weight:600;}
  .step.done .step-dot{background:var(--oxblood); border-color:var(--oxblood); color:var(--gold-soft);}
  .step.current .step-dot{border-color:var(--oxblood); color:var(--oxblood);}
  .step-label{font-size:11px; font-weight:500; color:var(--ink-soft); max-width:92px; line-height:1.3;}
  .step.current .step-label{color:var(--oxblood); font-weight:600;}

  /* Cajas de resumen — cada dato en su propia tarjeta con borde (más
     legible que bloques grises pegados) y el número grande al frente. */
  .stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:18px;}
  .stat-tile{background:var(--stone-card); border:1px solid var(--line); border-radius:12px; padding:14px 16px;}
  .stat-tile .label{font-size:10.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.05em; font-weight:600; margin:0 0 6px;}
  .stat-tile .value{font-size:21px; font-weight:600; margin:0; letter-spacing:-0.01em; line-height:1.15;}
  .stat-tile .sub{font-size:11.5px; color:var(--ink-faint); margin-top:3px;}
  /* Va aquí, después de la definición base, para ganarle por orden: con dos
     columnas en celular, 21px parte "2026-07-29" en dos renglones. */
  @media (max-width:900px){
    .stat-tile{padding:11px 12px;}
    .stat-tile .label{font-size:10px;}
    .stat-tile .value{font-size:16px;}
  }

  .callout{display:flex; align-items:center; justify-content:space-between; gap:16px; background:var(--gold-soft); border-left:3px solid var(--oxblood); border-radius:12px; padding:14px 16px;}
  .callout-text{font-size:13px; color:var(--oxblood-deep); line-height:1.5;}
  .callout-text b{font-weight:600;}

  @media (max-width:640px){
    .stat-grid{grid-template-columns:repeat(2,1fr);}
    .stepper{flex-direction:column; align-items:stretch; gap:12px;}
    .step{flex-direction:row; align-items:center; text-align:left; gap:10px;}
    .step:not(:last-child)::after{display:none;}
    .step-label{max-width:none; text-align:left;}
    .callout{flex-direction:column; align-items:flex-start;}
    .doc-item-actions{margin-left:0; flex-basis:100%; justify-content:flex-start;}
  }
  .task-en{font-weight:500; font-size:13.5px;}
  .task-es{font-size:12px; color:var(--ink-soft); font-style:italic;}
  .sign-tag{font-size:10.5px; padding:2px 8px; border-radius:10px; background:var(--oxblood-soft); color:var(--oxblood); margin-left:6px; font-weight:500;}
  select.role-select{font-weight:500;}
  .empty{display:flex; flex-direction:column; align-items:center; justify-content:center; height:280px; color:var(--ink-faint); text-align:center; gap:8px;}
  .sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0);}
  .field-hint{font-size:11px; color:var(--ink-faint); margin-top:-4px; margin-bottom:8px;}
  a{color:var(--oxblood); text-decoration:none;}
  a:hover{text-decoration:underline; color:var(--oxblood-deep);}
  .gate-stage{min-height:100vh; min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:32px 20px; background:radial-gradient(120% 100% at 15% -10%, var(--oxblood-soft) 0%, var(--stone) 55%);}
  .gate-shell{width:100%; max-width:1040px; min-height:600px; display:flex; background:var(--stone-card); border-radius:20px; overflow:hidden; border:0.5px solid var(--line); box-shadow:0 2px 4px rgba(33,22,19,0.05), 0 32px 64px -28px rgba(58,12,8,0.28);}
  .gate-brand{flex:0 0 42%; position:relative; overflow:hidden; background:radial-gradient(140% 180% at 12% -20%, #4E1610 0%, var(--oxblood-deep) 55%); color:var(--stone); display:flex; flex-direction:column; justify-content:space-between; padding:44px 40px;}
  .gate-brand-watermark{position:absolute; right:-72px; bottom:-64px; width:340px; height:340px; opacity:0.08; pointer-events:none;}
  .gate-brand-mark{position:relative; z-index:1; display:block;}
  .gnar-logo-mark{display:block; width:148px; height:148px; margin-left:-4px;}
  .gate-brand-mid{position:relative; z-index:1; margin:auto 0; padding:48px 0;}
  .gate-eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:11px; letter-spacing:2px; color:var(--gold); text-transform:uppercase; margin:0 0 18px; font-weight:600;}
  .gate-eyebrow::before{content:""; width:18px; height:1px; background:var(--gold);}
  .gate-brand-mid h1{font-family:'Fraunces',serif; font-weight:500; font-size:30px; line-height:1.3; letter-spacing:-0.01em; margin:0 0 16px; max-width:320px;}
  .gate-brand-mid p{font-size:13.5px; line-height:1.7; color:rgba(246,244,240,0.68); max-width:300px; margin:0;}
  .gate-brand-footer{position:relative; z-index:1; display:flex; align-items:center; gap:14px; font-size:12px; color:rgba(246,244,240,0.42);}
  .gate-brand-footer a{color:rgba(246,244,240,0.42); text-decoration:none;}
  .gate-brand-footer a:hover{color:rgba(246,244,240,0.72);}
  .gate-panel{flex:1; display:flex; align-items:center; justify-content:center; padding:44px 40px;}
  .gate-panel-inner{width:100%; max-width:340px;}
  .gate-eyebrow-small{font-size:11px; letter-spacing:2px; color:var(--gold); text-transform:uppercase; margin:0 0 10px; font-weight:600;}
  .gate-title{font-family:'Fraunces',serif; font-weight:600; font-size:26px; margin:0 0 6px; color:var(--oxblood-deep);}
  .gate-sub{font-size:13px; color:var(--ink-soft); margin-bottom:24px; line-height:1.55;}
  .gate-field-label{display:block; font-size:12px; font-weight:600; color:var(--ink); margin:0 0 6px;}
  .gate-panel-inner input, .gate-panel-inner select{width:100%; margin-bottom:14px; text-align:left; padding:11px 14px; border-radius:10px; background:var(--stone);}
  .gate-panel-inner input:focus, .gate-panel-inner select:focus{background:var(--stone-card);}
  .pw-wrap{position:relative;}
  .pw-wrap input{padding-right:66px;}
  .pw-toggle{position:absolute; right:4px; top:0; height:100%; padding:0 10px; background:none; border:none; color:var(--ink-faint); font-size:11.5px; font-weight:600; cursor:pointer; font-family:'Inter',sans-serif;}
  .pw-toggle:hover{color:var(--oxblood);}
  .gate-panel-inner .btn.primary{width:100%; padding:12px 16px; font-size:13.5px; font-weight:600; letter-spacing:0.2px; margin-top:2px; box-shadow:0 10px 20px -10px rgba(88,19,14,0.55);}
  .gate-panel-inner .field-hint{font-size:12px;}
  .gate-panel-inner .field-hint a{font-weight:600;}
  .gate-note{font-size:11px; color:var(--ink-faint); margin-top:16px; line-height:1.5; text-align:left; background:var(--stone); border:0.5px solid var(--line); border-radius:8px; padding:10px 12px;}
  .gate-error{color:var(--clay); font-size:12px; margin-bottom:8px; min-height:14px;}
  @media (max-width:860px){
    .gate-stage{padding:0;}
    .gate-shell{flex-direction:column; border-radius:0; border:none; min-height:100vh; min-height:100dvh;}
    .gate-brand{flex:0 0 auto; padding:32px 28px;}
    .gate-brand-mid{padding:24px 0;}
    .gate-brand-mid h1{font-size:22px;}
    .gate-panel{padding:32px 28px;}
  }
  @media (max-width:600px){ .grid2{grid-template-columns:1fr;} }