/* Diseño de los dashboards de los fondos. ES EL MISMO ARCHIVO en los dos repos
   (pedido de Tomi, 14/10: "que los 3 dash sean iguales"):
   - dascapital-fondos: static/vista_fondo.css (LPP2: dashboard.html y publico.html)
   - axis31: static/dashboard.css (AXIS31 y Renta Pesos: templates/dashboard.html)
   Si se cambia uno, copiar el otro tal cual y subir el ?v= de las páginas.
   Desde el 15/10 el dashboard es la ficha del fondo (static/ficha_pdf.js) pero
   interactiva: la página la arma static/ficha_vista.js y estos son sus estilos
   (la misma franja azul, tarjetas, columna de características y tablas). */
  /* Las letras de la ficha, para la dona (el SVG de ficha_pdf.js las nombra así). */
  @font-face{font-family:'Ficha';src:url('fuentes/FichaSans-Regular.ttf') format('truetype');font-weight:400;font-display:swap;}
  @font-face{font-family:'FichaMedium';src:url('fuentes/FichaSans-Medium.ttf') format('truetype');font-weight:400;font-display:swap;}

  :root{
    --bg:#ffffff; --panel:#ffffff; --panel2:#f7fafc; --panel-azul:#f3f8fc; --border:#dde5ec; --border-soft:#eef3f7;
    --text:#12232f; --muted:#5b7183; --azul:#0b5fa5; --azul-claro:#00a3e0; --navy:#0b3c5d;
    --celeste:#8cc0ec; --blanco-suave:#c9dced;
    --ok:#0f7a52; --mal:#b42318;
    --display:'Outfit', system-ui, sans-serif;
    --sans:'IBM Plex Sans', system-ui, -apple-system, Segoe UI, sans-serif;
  }
  *{box-sizing:border-box;}
  body{margin:0;font-family:var(--sans);background:var(--bg);color:var(--text);
       -webkit-font-feature-settings:'tnum';font-feature-settings:'tnum';}
  .oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

  /* ---------- Membrete: logo de CGB, links (vista interna) y el botón de la ficha */
  .membrete{max-width:1180px;margin:0 auto;padding:14px 40px;display:flex;align-items:center;gap:22px;}
  .membrete .logo-cg{height:42px;width:auto;display:block;}
  .membrete .nav{margin-left:auto;display:flex;gap:18px;}
  .membrete .nav a{color:var(--azul);font-size:13px;text-decoration:none;}
  .membrete .nav a:hover{text-decoration:underline;}
  .membrete .btn-ficha{margin-left:auto;}
  .membrete .nav + .btn-ficha{margin-left:8px;}
  .btn-ficha{display:inline-flex;align-items:center;gap:8px;background:var(--azul);color:#fff;
       border:1px solid var(--azul);border-radius:6px;padding:9px 16px;font-family:var(--sans);
       font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap;
       transition:background .15s ease, box-shadow .15s ease, transform .15s ease;}
  .btn-ficha:hover{background:#094f8a;box-shadow:0 8px 18px -10px rgba(11,60,93,.6);transform:translateY(-1px);}
  .btn-ficha:focus-visible{outline:2px solid var(--azul-claro);outline-offset:2px;}
  .btn-ficha:disabled{opacity:.55;cursor:default;transform:none;box-shadow:none;}
  .btn-ficha svg{width:15px;height:15px;flex:none;}

  /* ---------- Franja azul: el fondo, la clase y la fecha; a la derecha, la descripción */
  .franja{background:var(--navy);border-bottom:3px solid var(--azul-claro);color:#fff;}
  .franja-in{max-width:1180px;margin:0 auto;padding:30px 40px 30px;display:flex;gap:44px;align-items:flex-start;}
  .franja-izq{flex:1;min-width:0;}
  .franja-der{flex:0 0 470px;}
  .franja-der:empty{display:none;}
  .rotulo{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--celeste);font-weight:500;}
  .franja-logo img{height:36px;width:auto;max-width:260px;display:block;object-fit:contain;object-position:left center;}
  .franja-nombre{font-family:var(--display);font-weight:300;font-size:42px;line-height:1.05;letter-spacing:-0.015em;margin:10px 0 0;}
  .franja-nombre.largo{font-size:34px;}
  .franja-linea{display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px;margin-top:14px;font-size:14px;color:var(--blanco-suave);}
  .franja-linea .moneda::before{content:'·';margin-right:18px;color:var(--celeste);}
  .franja-linea .valores-al{display:inline-flex;align-items:baseline;gap:8px;margin-left:12px;}
  .franja-linea .valores-al #fecha_dato_header{color:#fff;font-weight:500;}
  .franja-der p{margin:8px 0 0;font-size:13.5px;line-height:1.6;color:var(--blanco-suave);text-align:justify;}
  /* El selector de clase, sobre el azul: tiene que notarse que se elige. */
  .sel-clase select{background:rgba(255,255,255,.08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238cc0ec' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 11px center;
       border:1px solid rgba(140,192,236,.45);border-radius:6px;color:#fff;font-family:var(--sans);font-size:14px;font-weight:500;
       padding:7px 34px 7px 12px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;
       transition:border-color .15s ease, background-color .15s ease;}
  .sel-clase select:hover{border-color:var(--azul-claro);background-color:rgba(255,255,255,.14);}
  .sel-clase select:focus-visible{outline:2px solid var(--azul-claro);outline-offset:2px;}
  .sel-clase select option{color:var(--text);background:#fff;}
  .sel-clase select.unica{background:none;border-color:transparent;padding:0;cursor:default;opacity:1;color:var(--blanco-suave);font-weight:400;}

  .wrap{max-width:1180px;margin:0 auto;padding:28px 40px 70px;}
  select{font-family:var(--sans);}

  /* ---------- Tarjetas */
  .tarjetas{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:30px;}
  .kpi{padding:18px 20px;border:1px solid var(--border);border-radius:8px;background:#fff;
       position:relative;overflow:hidden;
       transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease, border-color .22s ease;}
  /* Fondo dinámico: un velo azul muy suave que entra al pasar el mouse. */
  .kpi::before{content:'';position:absolute;inset:0;
       background:linear-gradient(160deg, rgba(0,163,224,.07) 0%, rgba(11,95,165,.10) 100%);
       opacity:0;transition:opacity .22s ease;pointer-events:none;}
  .kpi::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
       background:linear-gradient(90deg, var(--azul-claro), var(--azul));
       transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.2,.7,.3,1);}
  .kpi:hover{transform:translateY(-4px);box-shadow:0 10px 26px -12px rgba(11,60,93,.38);border-color:#c3d8e8;}
  .kpi:hover::before{opacity:1;}
  .kpi:hover::after{transform:scaleX(1);}
  .kpi > *{position:relative;}
  .kpi .label{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.14em;font-weight:500;}
  .kpi .value{font-family:var(--display);font-size:32px;line-height:1.05;font-weight:300;margin-top:9px;
              letter-spacing:-0.015em;font-variant-numeric:tabular-nums;white-space:nowrap;}
  .kpi .sub{font-size:12px;color:var(--muted);margin-top:6px;min-height:1em;}
  .up{color:var(--ok);} .down{color:var(--mal);}

  /* ---------- Cuerpo: la columna de características a la izquierda, lo demás a la derecha */
  .cuerpo{display:grid;grid-template-columns:236px minmax(0,1fr);gap:30px;align-items:start;}
  .cuerpo.sin-columna{grid-template-columns:minmax(0,1fr);}
  .cuerpo.sin-columna .columna{display:none;}
  .columna{background:var(--panel2);border-radius:8px;padding:20px 18px 22px;}
  .subtitulo{font-family:var(--display);font-size:17px;font-weight:400;line-height:1.2;margin-bottom:10px;}
  .subtitulo .raya, .titulo .raya{display:block;width:26px;height:2px;background:var(--azul-claro);margin-bottom:9px;}
  .caract{margin:0;}
  .caract > div{padding:9px 0;border-bottom:1px solid var(--border-soft);}
  .caract > div:last-child{border-bottom:none;}
  .caract dt{font-size:11.5px;color:var(--muted);}
  .caract dd{margin:3px 0 0;font-size:14px;font-weight:500;}
  /* Recuadrado (Pedro, 15/10): blanco con borde celeste dentro del panel. */
  .estimado{margin-top:18px;background:#fff;border:1.5px solid var(--azul-claro);border-radius:8px;padding:16px 14px;}
  .estimado .dato{margin-top:10px;}
  .estimado .dt{font-size:11.5px;color:var(--muted);}
  .estimado .dd.grande{font-family:var(--display);font-size:27px;font-weight:300;color:var(--navy);margin-top:2px;}
  .estimado .dd .cargando{font-family:var(--sans);font-size:13px;}
  .nota-estimado{font-size:11px;color:var(--muted);margin-top:12px;line-height:1.45;}

  .titulo{margin-bottom:12px;}
  .titulo h2{font-family:var(--display);font-size:21px;font-weight:400;margin:0;letter-spacing:-0.01em;}
  .titulo-fila{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;}
  .titulo-fila .note{margin:0 0 12px;}
  .bloque{margin-top:34px;}
  .note{font-size:11.5px;color:var(--muted);margin-top:10px;}
  .note:empty{display:none;}

  /* ---------- Rendimientos (tabla + período) y el gráfico */
  .fila-rend{display:grid;grid-template-columns:minmax(290px,330px) minmax(0,1fr);gap:28px;align-items:start;}
  .rend-der{min-width:0;}
  .chart-box{height:350px;position:relative;}
  .nota-grafico{font-size:11px;color:var(--muted);margin-top:10px;}
  .nota-grafico:empty{display:none;}
  .nota-grafico .punto{display:inline-block;width:8px;height:8px;border-radius:50%;
       border:2px solid var(--azul-claro);background:#fff;vertical-align:-1px;margin-right:4px;}

  .rend-caja{border:1px solid var(--border);border-radius:8px;padding:15px 16px;background:#fff;margin-top:16px;
       transition:box-shadow .22s ease, border-color .22s ease;}
  .rend-caja:hover{box-shadow:0 8px 20px -12px rgba(11,60,93,.35);border-color:#c3d8e8;}
  .rend-caja .label{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.13em;font-weight:500;}
  .value-triple{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:9px;}
  .valor-chico{font-family:var(--display);font-size:23px;font-weight:300;letter-spacing:-0.01em;
               font-variant-numeric:tabular-nums;white-space:nowrap;}
  .etiqueta-chica{display:block;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;margin-top:2px;}
  .rend-caja .sub{font-size:11px;color:var(--muted);margin-top:9px;line-height:1.45;}
  /* "Desde" del rendimiento en el período: tiene que notarse que se puede
     elegir (pedido de Tomi, 14/10). Etiqueta arriba y un selector de ancho
     completo, azul, con su flecha. */
  .rend-caja .desde{display:block;margin-top:12px;cursor:pointer;}
  .rend-caja .desde span{display:block;font-size:10px;color:var(--muted);text-transform:uppercase;
       letter-spacing:.12em;font-weight:500;margin-bottom:5px;}
  #sel_desde_periodo{width:100%;padding:8px 32px 8px 11px;font-size:14px;font-weight:500;color:var(--azul);
       background:#f3f8fc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230b5fa5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 11px center;
       border:1px solid #c3d8e8;border-radius:6px;cursor:pointer;
       -webkit-appearance:none;-moz-appearance:none;appearance:none;
       transition:border-color .15s ease, box-shadow .15s ease;}
  #sel_desde_periodo:hover{border-color:var(--azul-claro);box-shadow:0 0 0 3px rgba(0,163,224,.12);}

  /* ---------- Tablas con el encabezado azul de la ficha */
  .tabla-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  table{width:100%;border-collapse:collapse;font-size:13px;}
  th,td{padding:8px 10px;text-align:right;white-space:nowrap;}
  th:first-child,td:first-child{text-align:left;}
  .tabla-ficha th{background:var(--navy);color:#fff;font-weight:500;font-size:11.5px;}
  .tabla-ficha td{border-bottom:1px solid var(--border-soft);}
  .tabla-ficha tbody tr:nth-child(even) td{background:var(--panel2);}
  .tabla-ficha tbody tr:last-child td{border-bottom:1px solid var(--border);}
  .tabla-ficha tbody tr:hover td{background:#eaf3fa;}
    /* La de rendimientos, angosta: el período puede ir en dos renglones
     ("Desde el 16/04/2026") y los números siempre entran. */
  #tabla_rend th, #tabla_rend td{padding:8px 7px;}
  #tabla_rend td:first-child{white-space:normal;}
  .fuerte{font-weight:600;}
  .apagado{color:var(--muted);}
  .tabla-meses{min-width:860px;font-size:12.5px;}
  .tabla-meses th,.tabla-meses td{padding:8px 7px;}
  .tabla-meses .corte{border-left:1.5px solid var(--celeste);}
  /* Al deslizarla (celular, tablet) "Directo" y "TNA" quedan a la vista. */
  .tabla-meses th:first-child, .tabla-meses td:first-child{position:sticky;left:0;z-index:1;}
  .tabla-meses td:first-child{background:#fff;}
  .tabla-meses tbody tr:nth-child(even) td:first-child{background:var(--panel2);}
  .tabla-meses td.total{background:var(--panel-azul) !important;}
  .tabla-meses th.total{background:#0e4a73;}

  /* Composición de la cartera: la dona de la ficha y su tabla, que se
     resaltan juntas al pasar el mouse. */
  .cat-fila{display:grid;grid-template-columns:minmax(260px,330px) minmax(0,1fr);gap:28px;align-items:center;}
  .dona-box{position:relative;}
  .dona-box svg.dona{width:100%;height:auto;display:block;overflow:visible;}
  .dona-box [data-i]{cursor:pointer;transition:opacity .15s ease;}
  .dona-box [data-i].apagada{opacity:.28;}
  .dona-tip{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;text-align:center;
       font-size:12px;line-height:1.35;color:var(--text);background:rgba(255,255,255,.94);border-radius:6px;padding:5px 8px;
       opacity:0;transition:opacity .15s ease;max-width:58%;}
  .dona-tip .monto{font-size:11px;color:var(--muted);white-space:nowrap;}
  .dona-tip.visible{opacity:1;}
  .tabla-cats{min-width:420px;}
  .tabla-cats th:nth-child(2), .tabla-cats td:nth-child(2){text-align:left;}
  .tabla-cats th:first-child, .tabla-cats td:first-child{width:22px;padding-right:0;}
  .tabla-cats tr[data-i]{cursor:pointer;}
  .tabla-cats tbody tr.activa td{background:#e3f0f9 !important;}
  .cuadrito{display:inline-block;width:11px;height:11px;border-radius:2px;vertical-align:-1px;}
  .cargando{color:var(--muted);}

  /* Todos los meses, año por año (plegado). */
  .historial{margin-top:16px;}
  .historial summary{cursor:pointer;color:var(--azul);font-size:13px;font-weight:500;padding:6px 0;list-style:none;}
  .historial summary::-webkit-details-marker{display:none;}
  .historial summary::before{content:'';display:inline-block;width:7px;height:7px;border-right:1.8px solid var(--azul);
       border-bottom:1.8px solid var(--azul);transform:rotate(-45deg);margin-right:9px;vertical-align:1px;transition:transform .15s ease;}
  .historial[open] summary::before{transform:rotate(45deg);vertical-align:3px;}
  .historial summary:hover{text-decoration:underline;}
  .tabla-anios{min-width:780px;font-size:12.5px;margin-top:8px;}
  .tabla-anios th{color:var(--muted);font-weight:600;font-size:10px;text-transform:uppercase;letter-spacing:.1em;
       border-bottom:1px solid var(--border);}
  .tabla-anios td{border-bottom:1px solid var(--border-soft);}
  .tabla-anios tbody tr:hover{background:var(--panel2);}
  td.periodo{font-weight:600;background:var(--panel2);}
  .empty{color:var(--muted);font-size:13px;padding:24px;text-align:center;}

  .pie{max-width:1100px;width:calc(100% - 80px);margin:0 auto;padding:20px 0 40px;border-top:1px solid var(--border);font-size:11px;color:var(--muted);}
  .pie .leyenda{margin-top:8px;font-size:10.5px;line-height:1.5;text-align:justify;}
  .pie .leyenda:empty{display:none;}

  /* ---------- Responsive ----------
     Tablet: la descripción baja, tarjetas de a 2 y la columna de
     características arriba, en dos columnas. Celular: todo a una columna. */
  @media(max-width:1060px){
    .franja-in{flex-direction:column;gap:20px;}
    .franja-der{flex:none;max-width:760px;}
    .tarjetas{grid-template-columns:repeat(2,1fr);}
    .cuerpo{grid-template-columns:minmax(0,1fr);}
    .columna{display:grid;grid-template-columns:1fr 1fr;gap:0 26px;}
    .columna .caract{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;}
    .columna .caract > div:last-child{border-bottom:1px solid var(--border-soft);}
    .estimado{margin-top:0;align-self:start;}
    .columna #caracteristicas:empty + .estimado{grid-column:1 / -1;}
  }
  @media(max-width:860px){
    .fila-rend{grid-template-columns:minmax(0,1fr);}
    .cat-fila{grid-template-columns:minmax(0,1fr);}
    .dona-box{max-width:340px;margin:0 auto;width:100%;}
    .columna{grid-template-columns:minmax(0,1fr);}
    .estimado{margin-top:18px;}
  }
  @media(max-width:760px){
    .membrete{padding:12px 18px;gap:14px;flex-wrap:wrap;}
    .membrete .logo-cg{height:34px;}
    .membrete .nav{gap:14px;}
    .membrete .btn-ficha{margin-left:0;width:100%;justify-content:center;padding:12px 16px;font-size:15px;order:3;}
    .franja-in{padding:22px 18px 24px;}
    .franja-nombre{font-size:31px;}
    .franja-nombre.largo{font-size:26px;}
    .franja-linea .valores-al{margin-left:0;width:100%;}
    .franja-der p{font-size:13px;text-align:left;}
    .wrap{padding:20px 18px 50px;}
    .tarjetas{gap:10px;margin-bottom:22px;}
    .kpi{padding:14px 14px;}
    .kpi .value{font-size:25px;}
    .kpi .sub{font-size:11px;}
    /* Sin transform en táctil: el :hover queda "pegado" después de tocar. */
    .kpi:hover{transform:none;}
    .kpi:active{background:var(--panel2);}
    .columna .caract{gap:0 14px;}
    .caract dd{font-size:13px;}
    .tabla-cats{min-width:0;font-size:12px;}
    .tabla-cats th,.tabla-cats td{padding:7px 5px;}
    .chart-box{height:260px;}
    .titulo h2{font-size:19px;}
    .bloque{margin-top:28px;}
    /* Con 16px el iPhone no hace zoom al tocar los selectores. */
    #sel_desde_periodo, .sel-clase select{font-size:16px;}
    #sel_desde_periodo{padding:11px 34px 11px 12px;}
    .pie{width:calc(100% - 36px);padding:18px 0 32px;}
  }
  @media(max-width:380px){
    .kpi .value{font-size:22px;}
    .valor-chico{font-size:20px;}
    .tarjetas{grid-template-columns:1fr 1fr;}
    .columna .caract{grid-template-columns:1fr;}
  }