/* ═══════════════════════════════════════════════════════════════
   maX Valuations · estilos base
   ───────────────────────────────────────────────────────────────
   Extraído del bloque <style> de index.html en la Fase 0. El color
   ya no se escribe aquí: vive en css/tokens.css. Si necesitas un
   color que no tenga token, añádelo allí antes de usarlo.
   ═══════════════════════════════════════════════════════════════ */

    * { box-sizing: border-box; margin: 0; padding: 0; }
    /* Alto exacto de la ventana: la columna es cabecera + layout + faldón, y el
       layout se queda con lo que sobre. Nada de alturas calculadas a mano. */
    body { font-family: var(--font-ui); background: var(--paper); color: var(--ink-900); height: 100vh; overflow: hidden; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; }

    /* ── LOGIN ── */
    #login-screen { display:none; position:fixed; inset:0; background:var(--paper); z-index:2000; align-items:center; justify-content:center; }
    #login-screen.visible { display:flex; }
    .login-card { background:var(--surface); border-radius:16px; border:1px solid var(--line); padding:2.5rem 2rem; width:100%; max-width:380px; text-align:center; }
    .login-logo { font-size:32px; margin-bottom:1rem; }
    .login-card h1 { font-size:20px; font-weight:600; margin-bottom:.5rem; }
    .login-card p { font-size:13px; color:var(--ink-400); margin-bottom:2rem; }
    .btn-google { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:11px; background:var(--surface); border:1px solid var(--line-3); border-radius:8px; font-size:14px; font-weight:500; cursor:pointer; transition:background .15s; }
    .btn-google:hover { background:var(--surface-5); }
    .btn-google svg { width:18px; height:18px; }
    .login-error { font-size:12px; color:var(--neg); margin-top:1rem; display:none; }

    /* ── HEADER usuario ── */
    .user-info { display:flex; align-items:center; gap:8px; }
    .user-avatar { width:26px; height:26px; border-radius:50%; object-fit:cover; }
    .user-avatar-placeholder { width:26px; height:26px; border-radius:50%; background:var(--ink-800); display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--surface); font-weight:600; }
    .user-name { font-size:12px; color:var(--ink-300); }
    .user-role { font-size:10px; padding:1px 6px; border-radius:10px; background:var(--ink-800); color:var(--ink-300); }
    .btn-logout { font-size:11px; padding:3px 8px; background:transparent; border:1px solid var(--ink-800); border-radius:5px; color:var(--ink-400); cursor:pointer; }
    .btn-logout:hover { border-color:var(--ink-500); color:var(--surface); }
    .btn-agente { display:flex; align-items:center; gap:6px; padding:5px 12px; background:var(--on-navy-12); border:1px solid var(--on-navy-20); border-radius:7px; color:var(--surface); font-size:12px; font-weight:500; cursor:pointer; transition:background .15s; }
    .btn-agente:hover { background:var(--on-navy-22); }
    .btn-icono { display:flex; align-items:center; justify-content:center; gap:5px; padding:5px 9px; background:transparent; border:1px solid var(--on-navy-20); border-radius:7px; color:var(--navy-200); font-size:12px; line-height:1; cursor:pointer; font-family:inherit; }
    .btn-icono:hover { background:var(--on-navy-12); color:var(--surface); }
    /* El botón de instalar solo aparece si el navegador lo permite (pwa.js pone
       la clase .instalable) y nunca dentro de la ventana de la app ya instalada. */
    .btn-instalar { display:none !important; }
    html.instalable .btn-instalar { display:flex !important; }
    html.modo-app .btn-instalar { display:none !important; }

    /* ── HEADER ── */
    header { background: var(--navy-700); color: var(--surface); padding: .75rem 1.5rem; display: flex; align-items: center; gap: 16px; flex-shrink: 0; height: 44px; }
    header h1 { font-size: 15px; font-weight: 600; }
    header .powered { font-size: 12px; color: var(--navy-300); border-left: 1px solid var(--navy-600); padding-left: 16px; }
    .header-right { margin-left: auto; font-size: 12px; color: var(--navy-300); }

    /* ── LAYOUT ── */
    /* `flex:1` + `min-height:0` = ocupa el hueco real entre cabecera y faldón,
       midan lo que midan. Con `height: calc(100vh - 44px - 34px)` bastaba con
       que la cabecera no midiese justo 44px —en la ventana PWA, con la barra de
       título superpuesta, no los mide— para que sobrara una franja muerta
       debajo del faldón. */
    .layout { display: flex; flex: 1 1 auto; min-height: 0; overflow: hidden; }
    .main { flex: 1; overflow-y: auto; overflow-x: hidden; min-width: 0; }
    .main-inner { padding: 1.25rem 1.5rem; max-width: 1920px; }
    .panel-media { width: 260px; background: var(--surface); border-left: 1px solid var(--line); flex-shrink: 0; overflow-y: auto; }
    /* Ocultar por ancho 0 solo funciona como item de una FILA. Si el panel acaba
       en otro contexto, el ancho 0 lo hace invisible pero sigue reservando su
       alto. `display:none` no depende de la dirección del contenedor. */
    .panel-media.hidden { display: none; }
    .media-block { padding: 1rem; border-bottom: 1px solid var(--paper); }
    .media-lbl { font-size: 10px; font-weight: 700; color: var(--ink-250); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .6rem; }
    .media-block img { width: 100%; border-radius: 8px; display: block; }
    .media-placeholder { background: var(--surface-5); border-radius: 8px; padding: 2.5rem 1rem; text-align: center; font-size: 12px; color: var(--ink-200); }
    .sidebar { width: 260px; background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; flex-shrink: 0; position: relative; transition: width .16s ease; }

    /* ── Banda de carteras plegada ──
       Se pliega a una franja de 34px que conserva el botón para volver a abrirla.
       Se ocultan todos los hijos menos la cabecera —y de ella, todo menos el
       botón—, así que el buscador, el árbol y el tirador de redimensionar dejan
       de estar accesibles mientras está plegada. */
    .sidebar.plegado { width: 34px; }
    .sidebar.plegado > *:not(.sidebar-header) { display: none; }
    .sidebar.plegado .sidebar-header { padding: .6rem .3rem; justify-content: center; border-bottom: none; }
    .sidebar.plegado .sidebar-title,
    .sidebar.plegado .sidebar-header .btn-nuevo,
    .sidebar.plegado .sidebar-header .btn-arbol { display: none; }
    /* La franja sigue diciendo qué es. Pseudoelemento del <aside>, así que no le
       afecta la regla que oculta a los hijos. */
    .sidebar.plegado::after { content: 'CARTERAS'; position: absolute; top: 46px; left: 50%;
      transform: translateX(-50%); writing-mode: vertical-rl; font-size: 10px; font-weight: 700;
      letter-spacing: .14em; color: var(--line-5); pointer-events: none; user-select: none; }

    .btn-plegar { font-size: 13px; line-height: 1; width: 22px; height: 22px; padding: 0; color: var(--ink-400);
      background: transparent; border: 1px solid var(--line-3); border-radius: 4px; cursor: pointer;
      font-family: inherit; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .btn-plegar:hover { color: var(--navy-700); border-color: var(--ink-250); }
    @media (prefers-reduced-motion: reduce) { .sidebar { transition: none; } }
    .sidebar-header { padding: .6rem .75rem; border-bottom: 1px solid var(--paper); display: flex; align-items: center; justify-content: space-between; }
    .sidebar-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-350); }
    .btn-nuevo { font-size: 11px; padding: 3px 7px; background: var(--ink-900); color: var(--surface); border: none; border-radius: 5px; cursor: pointer; }
    .activos-list { flex: 1; overflow-y: auto; }
    .activos-empty { padding: 2rem 1rem; text-align: center; font-size: 12px; color: var(--ink-200); line-height: 1.6; }

    /* Árbol sidebar */
    .sb-empresa { border-bottom: 1px solid var(--paper); }
    .sb-empresa-hdr { display:flex; align-items:center; gap:5px; padding:.55rem .75rem; cursor:pointer; font-size:12px; font-weight:600; color:var(--ink-800); user-select:none; }
    .sb-empresa-hdr:hover { background:var(--surface-3); }
    .sb-toggle { font-size:9px; color:var(--ink-250); display:inline-block; transition:transform .15s; }
    .sb-collapsed .sb-toggle { transform:rotate(-90deg); }
    .sb-promo-hdr { display:flex; align-items:center; gap:5px; padding:.45rem .75rem .45rem 1.25rem; cursor:pointer; font-size:12px; color:var(--ink-600); border-top:1px solid var(--surface-5); }
    .sb-promo-hdr:hover { background:var(--surface-3); }
    .sb-promo-hdr.active { background:var(--paper); border-left:3px solid var(--ink-500); padding-left:calc(1.25rem - 3px); }
    .sb-activo-item { display:flex; align-items:center; gap:4px; padding:.38rem .75rem .38rem 1.75rem; cursor:pointer; font-size:11px; color:var(--ink-450); border-top:1px solid var(--surface-5); }
    .sb-activo-item:hover { background:var(--surface-3); }
    .sb-activo-item.active { background:var(--paper); border-left:3px solid var(--ink-900); padding-left:calc(1.75rem - 3px); color:var(--ink-900); font-weight:600; }
    .sb-count { font-size:9px; padding:1px 5px; border-radius:8px; background:var(--paper); color:var(--ink-350); margin-left:auto; }
    /* Cada nivel lleva los contadores que tienen sentido en el: la empresa
       cuenta carteras y activos, la cartera promociones y activos, y la
       promocion solo activos. El contador de agrupacion (carteras/promociones)
       va en azul y el de activos en gris, que es el de siempre. */
    .sb-counts { margin-left:auto; display:flex; gap:3px; align-items:center; }
    .sb-counts .sb-count { margin-left:0; }
    .sb-count.sb-count-sub { background:var(--navy-100); color:var(--navy-400); }

    /* ── DASHBOARD KPIs ── */
    .kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin-bottom:1.25rem; }
    /* Fachada y plano del Catastro: el recuadro partido en dos mitades exactas,
       foto a la izquierda y plano a la derecha. `minmax(0,1fr)` y no `1fr` a
       secas: si no, una imagen ancha puede estirar su columna y comerse la otra. */
    /* --cat-media-alto es el techo: el marco nunca pasa de ahí, pero por debajo
       manda la proporción real de la imagen (la fija catMediaAjustar al cargar). */
    .cat-media { --cat-media-alto: clamp(240px, 42vh, 520px);
                 display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; align-items:start; }
    .cat-media-tit { font-size:11px; color:var(--ink-350); margin-bottom:4px; }
    /* 4/3 es solo el hueco de partida mientras la imagen no ha cargado: evita el
       salto de maquetación. Al cargar se sustituye por su proporción exacta, así
       que la imagen llena el marco sin recortarse ni estirarse. */
    .cat-media-marco { position:relative; width:100%; aspect-ratio:4/3; max-height:var(--cat-media-alto, 420px);
                       margin-inline:auto; border-radius:8px; overflow:hidden;
                       background:var(--surface-4); display:flex; align-items:center; justify-content:center; }
    /* `contain` es la red de seguridad: aunque el marco no cuadre (imagen que no
       carga, tope de alto), la foto nunca se deforma. */
    .cat-media-marco img { width:100%; height:100%; object-fit:contain; display:block; }
    .cat-media-vacio { color:var(--ink-250); font-size:12px; text-align:center; padding:1rem; }
    /* La parcela queda centrada por construcción; este círculo la señala. */
    .cat-media-cruz { position:absolute; inset:0; pointer-events:none;
                      display:flex; align-items:center; justify-content:center; }
    .cat-media-cruz > div { width:26px; height:26px; border:2px solid var(--info); border-radius:50%;
                            box-shadow:0 0 0 2px var(--on-navy-90); opacity:.9; }

    /* Zoom del plano. Tamaño, posición y color van EN LÍNEA desde app.js, que es
       donde se genera el marcado: así no pueden desincronizarse si un fichero se
       sirve de caché y el otro no. Aquí solo lo que no tiene equivalente en
       línea, y su ausencia no rompe nada. */
    .cat-plano-zoom button:hover:not(:disabled) { color:var(--info) !important; border-color:var(--navy-250) !important; }
    .cat-plano-zoom button:active:not(:disabled) { transform:translateY(1px); }

    @media (max-width: 620px) { .cat-media { grid-template-columns:minmax(0,1fr); } }
    .kpi-card { background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:.875rem 1rem; }
    .kpi-lbl { font-size:10px; color:var(--ink-350); text-transform:uppercase; letter-spacing:.05em; margin-bottom:3px; }
    .kpi-val { font-size:22px; font-weight:600; }
    .kpi-sub { font-size:11px; color:var(--ink-300); margin-top:2px; }

    /* ── FICHA TABS ── */
    .ficha-tabs { display:flex; gap:3px; background:var(--paper); padding:3px; border-radius:8px; margin-bottom:1.25rem; overflow-x:auto; }
    .ficha-tab { padding:6px 12px; font-size:12px; font-weight:500; border-radius:6px; cursor:pointer; border:none; background:transparent; color:var(--ink-450); white-space:nowrap; }
    .ficha-tab.active { background:var(--surface); color:var(--ink-900); box-shadow:0 1px 3px var(--shadow-soft); }
    .ficha-panel { display:none; }
    .ficha-panel.active { display:block; }

    /* ── LAYOUT ── (la regla de .layout está más arriba; estaba duplicada) */
    .card { background: var(--surface); border-radius: 10px; border: 1px solid var(--line); padding: 1.25rem; margin-bottom: 1.25rem; }
    .card h2 { font-size: 13px; font-weight: 700; margin-bottom: 1rem; color: var(--ink-800); text-transform: uppercase; letter-spacing: .04em; }

    /* ── FIELDS ── */
    .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
    .field { display: flex; flex-direction: column; gap: 4px; }
    .field label { font-size: 11px; color: var(--ink-400); font-weight: 500; }
    .field input, .field select, .field textarea { padding: 7px 9px; border: 1px solid var(--line-2); border-radius: 7px; font-size: 13px; font-family: inherit; background: var(--surface-2); transition: border-color .15s; width: 100%; }
    .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink-900); background: var(--surface); }
    .field textarea { min-height: 64px; resize: vertical; }

    /* ── BOTONES ── */
    .btn { width: 100%; padding: 10px; background: var(--ink-900); color: var(--surface); border: none; border-radius: 7px; font-size: 13px; font-weight: 600; cursor: pointer; transition: opacity .15s; }
    .btn:hover { opacity: .85; }
    .btn:disabled { opacity: .35; cursor: not-allowed; }

    /* ── RESULTADO VALORACIÓN ── */
    .price-main { font-size: 30px; font-weight: 700; margin: .25rem 0; }
    .price-sub { font-size: 13px; color: var(--ink-400); }
    .range-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 1rem; }
    .range-box { background: var(--surface-5); border-radius: 8px; padding: .875rem; text-align: center; }
    .range-box .val { font-size: 17px; font-weight: 700; }
    .range-box .lbl { font-size: 11px; color: var(--ink-350); margin-top: 3px; }
    .badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; margin-top: .5rem; }
    .badge-alta { background: var(--warn-bg); color: var(--warn); }
    .badge-media { background: var(--pos-bg); color: var(--pos); }
    .badge-baja { background: var(--info-bg); color: var(--info-strong); }
    .divider { border: none; border-top: 1px solid var(--paper-2); margin: 1.25rem 0; }
    .analysis { font-size: 13px; line-height: 1.8; color: var(--ink-600); }

    /* ── DATA GRID (catastro) ── */
    .data-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
    .data-cell { background: var(--surface-5); border-radius: 7px; padding: .6rem .875rem; }
    .data-cell .lbl { font-size: 10px; color: var(--ink-250); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 3px; }
    .data-cell .val { font-size: 13px; font-weight: 600; }

    /* ── DROP ZONE ── */
    .drop-zone { border: 2px dashed var(--line-3); border-radius: 9px; padding: 1.25rem; text-align: center; cursor: pointer; transition: all .15s; margin-bottom: 10px; }
    .drop-zone:hover, .drop-zone.over { border-color: var(--ink-900); background: var(--surface-2); }
    .drop-zone p { font-size: 12px; color: var(--ink-300); margin: 0; }
    .drop-zone strong { font-size: 13px; color: var(--ink-700); display: block; margin-bottom: 3px; }
    .file-ok { font-size: 12px; color: var(--pos); background: var(--pos-bg); border-radius: 6px; padding: 5px 10px; margin-bottom: 10px; display: none; }
    .sep { display: flex; align-items: center; gap: 8px; margin: 10px 0; color: var(--ink-200); font-size: 11px; }
    .sep::before, .sep::after { content: ''; flex: 1; border-top: 1px solid var(--line-4); }

    .loading { text-align: center; padding: 2rem; color: var(--ink-300); font-size: 13px; }
    .tag-oficial { font-size: 11px; background: var(--pos-bg); color: var(--pos); padding: 3px 9px; border-radius: 20px; }
    .rc-mono { font-size: 11px; font-family: var(--font-num); font-variant-numeric: tabular-nums; color: var(--ink-300); margin-bottom: .75rem; }

    /* Tabla comparables */
    #comp-table tr:not(:last-child) td { border-bottom: 1px solid var(--surface-5); }
    #comp-table td { padding: 8px 12px; vertical-align: middle; }
    #comp-table tr:hover td { background: var(--surface-2); }
    #comp-table tr.excluido td { opacity: .4; }
    .peso-input { width: 56px; padding: 4px 6px; border: 1px solid var(--line-3); border-radius: 6px; font-size: 12px; text-align: center; font-family: inherit; }
    .peso-input:focus { outline: none; border-color: var(--ink-900); }
    .badge-suma-ok { background: var(--pos-bg); color: var(--pos); }
    .badge-suma-warn { background: var(--warn-bg); color: var(--warn); }

    .tab-solo-admin { display: none !important; }
    .es-admin .tab-solo-admin { display: none; }
    .es-admin .tab-solo-admin.active { display: block !important; }

    /* ── FOOTER LEGAL ── */
    .app-footer { flex-shrink:0; height:34px; background:var(--surface); border-top:1px solid var(--line); display:flex; align-items:center; justify-content:center; gap:12px; font-size:11px; color:var(--ink-350); padding:0 1rem; flex-wrap:wrap; }
    .app-footer a { color:var(--ink-500); text-decoration:none; }
    .app-footer a:hover { color:var(--navy-700); text-decoration:underline; }
    .app-footer .fsep { color:var(--line-3); }
    .app-footer .fcpy { color:var(--ink-250); }

    /* ── MODO VENTANA (window-controls-overlay) ──────────────────────────────
       Con la app instalada, el header pasa a ocupar la propia barra de título:
       ya no hay franja del navegador encima. env(titlebar-area-*) delimita el
       espacio libre; a su derecha están minimizar/maximizar/cerrar, que dibuja
       el navegador sobre el theme_color (var(--navy-700)), así que empalma con el header.
       app-region:drag marca la zona por la que se arrastra la ventana. */
    @media (display-mode: window-controls-overlay) {
      header {
        height: env(titlebar-area-height, 44px);
        width: env(titlebar-area-width, 100%);
        margin-left: env(titlebar-area-x, 0);
        padding: 0 10px 0 16px;
        gap: 12px;
        -webkit-app-region: drag; app-region: drag;
      }
      header h1 { font-size: 13px; }
      /* Todo lo interactivo debe excluirse del arrastre o deja de responder */
      header button, header a, header input, header select,
      header .user-avatar, header .user-avatar-placeholder {
        -webkit-app-region: no-drag; app-region: no-drag;
      }
      /* Ya no hace falta descontar nada: el layout mide por flex. */
      /* Sin esto la ventana no se puede mover mientras se ve el login */
      #boot-overlay, #login-screen { -webkit-app-region: drag; app-region: drag; }
      .login-card { -webkit-app-region: no-drag; app-region: no-drag; }
    }

    @media (max-width: 960px) { .sidebar { display: none; } .panel-media { display: none !important; } .grid3 { grid-template-columns: 1fr 1fr; } }