/* ══════════════════════════════════════════════════════════════════════════
   Proyectos ESG — cartera y ficha.

   Misma gramática que sst.css y personas.css: banda de color que codifica
   estado, contadores que filtran, cifras tabulares.

   El color dice cómo va el proyecto contra su plazo, no de qué trata:
   verde en rumbo, ámbar retrasado, rojo vencido, gris sin nada medible.
   El tema —ambiental, social, gobernanza— va en la pastilla, que es
   información distinta y no debe competir por el mismo canal visual.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
    --py-tinta: #0f172a;
    --py-suave: #64748b;
    --py-tenue: #94a3b8;
    --py-linea: #e2e8f0;
    --py-acento: #4c3cc9;
    --py-acento-tenue: #eef2ff;
    --py-ok: #047857;
    --py-aviso: #b45309;
    --py-mal: #b91c1c;

    /* Dominios ESG. Verde ambiental, azul social, violeta gobernanza: es el
       código que usa el propio sector y no conviene reinventarlo. */
    --py-amb: #0f766e;
    --py-soc: #0369a1;
    --py-gob: #7c3aed;
}

/* ── Cabecera ─────────────────────────────────────────────────────────── */
.py-head { display: flex; justify-content: space-between; align-items: flex-start;
           gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.py-head h1 { font-size: 1.5rem; font-weight: 700; color: var(--py-tinta);
              margin: 0; letter-spacing: -.02em; }
.py-head p { font-size: .84rem; color: var(--py-suave); margin: .35rem 0 0;
             max-width: 66ch; line-height: 1.55; }
.py-head__acc { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

/* ── Indicadores: cada uno filtra ─────────────────────────────────────── */
.py-kpis { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
           gap: .6rem; margin-bottom: .9rem; }
.py-kpi { display: flex; align-items: center; gap: .7rem; padding: .65rem .85rem;
          border: 1px solid var(--py-linea); border-left: 4px solid var(--c, var(--py-acento));
          border-radius: 10px; background: #fff; cursor: pointer; text-align: left;
          width: 100%; min-width: 0; transition: box-shadow .15s; }
.py-kpi:hover { box-shadow: 0 3px 14px rgba(15,23,42,.10); }
.py-kpi.on { box-shadow: 0 0 0 2px color-mix(in srgb, var(--c, var(--py-acento)) 32%, transparent); }
.py-kpi__ico { display: inline-flex; align-items: center; justify-content: center;
               width: 34px; height: 34px; border-radius: 9px; flex: none;
               background: color-mix(in srgb, var(--c, var(--py-acento)) 12%, #fff);
               color: var(--c, var(--py-acento)); }
.py-kpi__t { display: flex; flex-direction: column; min-width: 0; }
.py-kpi__v { font-size: 1.4rem; font-weight: 750; line-height: 1.05; color: var(--py-tinta);
             font-variant-numeric: tabular-nums; }
.py-kpi__l { font-size: .72rem; font-weight: 600; color: var(--py-suave); line-height: 1.3; }

/* ── Filtros y lentes ─────────────────────────────────────────────────── */
.py-filtros { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: .9rem; }
.py-lente { display: inline-flex; border: 1px solid var(--py-linea); border-radius: 9px;
            overflow: hidden; background: #fff; }
.py-lente button { border: 0; background: transparent; padding: .38rem .7rem; font-size: .78rem;
                   font-weight: 600; color: var(--py-suave); cursor: pointer;
                   display: inline-flex; align-items: center; gap: .3rem; }
.py-lente button + button { border-left: 1px solid var(--py-linea); }
.py-lente button.on { background: var(--py-acento-tenue); color: var(--py-acento); }
.py-cnt { font-size: .78rem; color: var(--py-suave); font-variant-numeric: tabular-nums; }

/* ── Rejilla de fichas ────────────────────────────────────────────────── */
.py-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); gap: .8rem; }

/* Columna flexible, no rejilla de dos filas. Con `grid-template-rows: 4px 1fr` y el cuerpo a
   `height:100%`, la altura se resolvia contra un contenedor indefinido y el `overflow:hidden`
   recortaba la ultima linea: las pastillas de verificacion salian cortadas por la mitad. */
.py-ficha { display: flex; flex-direction: column; border: 1px solid var(--py-linea);
            border-radius: 12px; background: #fff; overflow: hidden;
            transition: box-shadow .15s; }
.py-ficha:hover { box-shadow: 0 6px 22px rgba(15,23,42,.10); }
.py-ficha__banda { background: var(--c, var(--py-acento)); height: 4px; flex: none; }
.py-ficha__cu { padding: .8rem .9rem .7rem; display: flex; flex-direction: column;
                gap: .6rem; flex: 1; min-width: 0; }

.py-ficha__cab { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.py-cod { font-size: .72rem; font-weight: 700; letter-spacing: .04em;
          color: var(--py-suave); background: #f1f5f9; border-radius: 6px; padding: .1rem .4rem;
          font-variant-numeric: tabular-nums; }
.py-ficha__nom { font-weight: 650; font-size: .96rem; color: var(--py-tinta); line-height: 1.35;
                 display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
                 overflow: hidden; text-align: left; }
.py-ficha__nom:hover { color: var(--py-acento); }

.py-meta { display: flex; flex-wrap: wrap; gap: .25rem .7rem; font-size: .75rem; color: var(--py-suave); }
.py-meta span { display: inline-flex; align-items: center; gap: .28rem; min-width: 0;
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.py-meta .rzi { font-size: .95rem; color: var(--py-tenue); }

/* Avance: la barra es el dato principal de la ficha, así que va con su cifra
   grande y debajo de dónde sale. Un porcentaje sin origen no se discute. */
.py-avance { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.py-avance__v { font-size: 1.15rem; font-weight: 750; color: var(--c, var(--py-acento));
                font-variant-numeric: tabular-nums; line-height: 1; }
.py-avance__l { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
                color: var(--py-tenue); font-weight: 700; }
.py-barra { height: 7px; border-radius: 999px; background: rgba(15,23,42,.07); overflow: hidden; }
.py-barra__f { height: 100%; border-radius: 999px; background: var(--c, var(--py-acento));
               transition: width .35s ease; }
.py-origen { font-size: .71rem; color: var(--py-tenue); }

.py-datos { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .7rem; }
.py-dato__l { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em;
              color: var(--py-tenue); font-weight: 700; }
.py-dato__v { font-size: .82rem; color: var(--py-tinta); font-variant-numeric: tabular-nums; }

.py-ficha__acc { display: flex; gap: .3rem; align-items: center; justify-content: flex-end;
                 border-top: 1px dashed var(--py-linea); padding-top: .5rem; margin-top: auto; }
/* El estado de verificacion no se encoge: recortado a «sin verific…» no dice nada. */
.py-ficha__acc .py-chip { flex: none; }

/* ── Pastillas ────────────────────────────────────────────────────────── */
.py-chip { display: inline-flex; align-items: center; gap: .25rem; font-size: .7rem;
           font-weight: 600; padding: .12rem .45rem; border-radius: 999px;
           border: 1px solid var(--py-linea); color: var(--py-suave); background: #fff;
           white-space: nowrap; max-width: 100%; min-width: 0; flex: 0 1 auto;
           overflow: hidden; text-overflow: ellipsis; }
.py-chip > .rzi { flex: none; font-size: .85rem; }
.py-chips { display: flex; flex-wrap: wrap; gap: .3rem; align-items: flex-start; min-width: 0; }
.py-chip--ok { background: #ecfdf5; border-color: #a7f3d0; color: var(--py-ok); }
.py-chip--aviso { background: #fffbeb; border-color: #fde68a; color: var(--py-aviso); }
.py-chip--mal { background: #fef2f2; border-color: #fecaca; color: var(--py-mal); }
.py-chip--amb { background: #f0fdfa; border-color: #99f6e4; color: var(--py-amb); }
.py-chip--soc { background: #f0f9ff; border-color: #bae6fd; color: var(--py-soc); }
.py-chip--gob { background: #f5f3ff; border-color: #ddd6fe; color: var(--py-gob); }
.py-chip--estado { background: var(--py-acento-tenue); border-color: #c7d2fe; color: var(--py-acento); }

/* ── Tablero por estado ───────────────────────────────────────────────── */
.py-tablero { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(16rem, 1fr);
              gap: .7rem; overflow-x: auto; padding-bottom: .5rem; align-items: start; }
.py-col { background: #f8fafc; border: 1px solid var(--py-linea); border-radius: 12px;
          display: flex; flex-direction: column; min-width: 0; }
.py-col__t { position: sticky; top: 0; background: #f8fafc; border-bottom: 1px solid var(--py-linea);
             padding: .5rem .7rem; font-size: .72rem; font-weight: 700; text-transform: uppercase;
             letter-spacing: .05em; color: var(--py-suave); border-radius: 12px 12px 0 0;
             display: flex; justify-content: space-between; gap: .5rem; }
.py-col__n { color: var(--py-tinta); font-variant-numeric: tabular-nums; }
.py-col__c { padding: .5rem; display: flex; flex-direction: column; gap: .5rem; }

.py-mini { border: 1px solid var(--py-linea); border-left: 3px solid var(--c, var(--py-acento));
           border-radius: 9px; background: #fff; padding: .55rem .65rem; cursor: pointer;
           text-align: left; width: 100%; display: flex; flex-direction: column; gap: .35rem; }
.py-mini:hover { box-shadow: 0 3px 12px rgba(15,23,42,.09); }
.py-mini__n { font-size: .82rem; font-weight: 620; color: var(--py-tinta); line-height: 1.3;
              display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.py-mini__p { display: flex; align-items: center; gap: .4rem; font-size: .7rem; color: var(--py-suave); }
.py-mini .py-barra { flex: 1; height: 5px; }

/* ── Vacío ────────────────────────────────────────────────────────────── */
.py-vacio { display: flex; flex-direction: column; align-items: center; justify-content: center;
            gap: .5rem; padding: 3rem 1rem; color: var(--py-tenue); text-align: center; }
.py-vacio__t { font-size: .95rem; font-weight: 600; color: var(--py-suave); }

@media (max-width: 1000px) {
    .py-kpis { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ══ Ficha de proyecto (diálogo) ════════════════════════════════════════ */
.py-fcab { display: grid; grid-template-columns: 1fr minmax(15rem, 20rem); gap: 1.2rem;
           align-items: start; padding: .85rem 1rem; margin-bottom: .8rem;
           background: #fff; border: 1px solid var(--py-linea);
           border-left: 4px solid var(--c, var(--py-acento)); border-radius: 12px; }
.py-fcab__i { min-width: 0; display: flex; flex-direction: column; gap: .45rem; }
.py-fcab__n { font-size: 1.15rem; font-weight: 700; color: var(--py-tinta); margin: 0;
              line-height: 1.3; letter-spacing: -.01em; }
.py-fcab__a { display: flex; flex-direction: column; gap: .3rem; }
.py-fcab__b { display: flex; gap: .35rem; flex-wrap: wrap; justify-content: flex-end;
              margin-top: .4rem; }

/* Separador de sección dentro del formulario. Sin él, veinte campos seguidos
   se leen como una lista de la compra y no como tres asuntos distintos. */
.py-sep { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
          color: var(--py-suave); border-bottom: 1px solid var(--py-linea);
          padding-bottom: .3rem; margin: .9rem 0 .2rem; }

/* Pestañas con subrayado, como en seguridad y salud. Las de serie son cajas
   con borde que a diez pestañas parecen una barra de herramientas. */
.py-tabs .rz-tabview-nav { border-bottom: 1px solid var(--py-linea); gap: .1rem;
                           background: transparent; padding: 0; flex-wrap: wrap; }
.py-tabs .rz-tabview-nav li { background: transparent; border: 0; margin: 0; }
.py-tabs .rz-tabview-nav li a, .py-tabs .rz-tabview-nav li .rz-tabview-title {
    background: transparent; border: 0; border-bottom: 2px solid transparent;
    border-radius: 0; color: var(--py-suave); font-weight: 600; font-size: .84rem;
    padding: .55rem .8rem; }
.py-tabs .rz-tabview-nav li.rz-state-active a,
.py-tabs .rz-tabview-nav li.rz-tabview-selected a {
    color: var(--py-acento); border-bottom-color: var(--py-acento); background: transparent; }
.py-tabs .rz-tabview-panels { padding: .9rem 0 0; background: transparent; border: 0; }

/* ══ Paneles de la ficha ════════════════════════════════════════════════ */

/* Barra de alta: el formulario para añadir va arriba y en línea, no en un
   diálogo. Añadir una meta o un centro son gestos de un campo y un botón. */
.py-alta { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
           padding: .6rem .7rem; margin-bottom: .7rem;
           background: #f8fafc; border: 1px solid var(--py-linea); border-radius: 10px; }

/* Metas, indicadores, centros, casos y tareas comparten fila: banda de color a
   la izquierda con su estado, contenido en medio, acciones a la derecha. Que
   cinco listas distintas se lean igual es lo que hace que no haya que aprender
   la pantalla cinco veces. */
.py-medidas { display: flex; flex-direction: column; gap: .5rem; }
.py-medida { display: grid; grid-template-columns: 1fr auto auto; gap: .9rem; align-items: center;
             padding: .6rem .75rem; background: #fff; border: 1px solid var(--py-linea);
             border-left: 3px solid var(--c, var(--py-tenue)); border-radius: 10px; }
.py-medida__c { min-width: 0; display: flex; flex-direction: column; gap: .25rem; }
.py-medida__n { font-size: .88rem; font-weight: 650; color: var(--py-tinta);
                display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.py-medida__a { width: 11rem; flex: none; }
.py-medida__b { display: flex; gap: .25rem; align-items: center; }

/* Recorrido de una medida: de dónde se partía, dónde se está, adónde se va.
   Tres columnas sueltas con «actual», «meta» y «%» obligan a hacer la resta. */
.py-recorrido { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
                font-size: .8rem; color: var(--py-suave); font-variant-numeric: tabular-nums; }
.py-recorrido b { color: var(--py-tinta); font-size: .9rem; }
.py-recorrido .rzi { font-size: .95rem; color: var(--py-tenue); }

/* ── Hilo de estados ──────────────────────────────────────────────────── */
.py-hilo { display: flex; flex-direction: column; gap: .1rem; }
.py-hito { display: grid; grid-template-columns: auto 1fr; gap: .8rem; }
.py-hito__p { width: 2rem; height: 2rem; border-radius: 50%; flex: none;
              display: inline-flex; align-items: center; justify-content: center;
              background: var(--py-acento-tenue); color: var(--py-acento);
              position: relative; }
/* La línea la dibuja el propio punto: un pseudo-elemento evita tener que
   saber cuál es el último elemento para no dejarle rabo. */
.py-hito:not(:last-child) .py-hito__p::after {
    content: ""; position: absolute; top: 2rem; left: 50%; width: 2px;
    height: calc(100% + .6rem); background: var(--py-linea); transform: translateX(-50%); }
.py-hito__c { padding-bottom: 1rem; min-width: 0; }
.py-hito__t { font-size: .88rem; font-weight: 650; color: var(--py-tinta);
              display: flex; align-items: center; gap: .4rem; }
.py-hito__x { font-size: .82rem; color: var(--py-tinta); margin-top: .25rem;
              background: #f8fafc; border-radius: 8px; padding: .4rem .55rem; }

/* ── Notas ────────────────────────────────────────────────────────────── */
.py-nota-alta { border: 1px solid var(--py-linea); border-radius: 10px; padding: .6rem;
                background: #fff; margin-bottom: .8rem; }
.py-nota-alta__b { display: flex; align-items: center; gap: .5rem; margin-top: .5rem;
                   flex-wrap: wrap; }

.py-notas { display: flex; flex-direction: column; gap: .5rem; }
/* La nota interna se distingue por el fondo y no solo por una etiqueta: quien
   escribe tiene que ver de un vistazo si lo que dice sale de la organización. */
.py-nota { border: 1px solid var(--py-linea); border-radius: 10px; padding: .6rem .75rem;
           background: #fff; }
.py-nota.priv { background: #fffdf5; border-color: #fde68a; }
.py-nota__c { display: flex; align-items: center; gap: .5rem; }
.py-nota__q { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.py-nota__q b { font-size: .84rem; color: var(--py-tinta); }
.py-nota__t { font-size: .86rem; color: var(--py-tinta); margin-top: .45rem;
              white-space: pre-wrap; line-height: 1.55; }

.py-avatar { width: 2rem; height: 2rem; border-radius: 50%; flex: none;
             background: var(--py-acento-tenue); color: var(--py-acento);
             display: inline-flex; align-items: center; justify-content: center;
             font-weight: 700; font-size: .72rem; }

@media (max-width: 820px) {
    .py-medida { grid-template-columns: 1fr; }
    .py-medida__a { width: 100%; }
}

/* ══ Formulario de la ficha ═════════════════════════════════════════════ */

/* Rejilla propia de doce columnas.
   Los `RadzenRow`/`RadzenColumn` anidados eran el problema: una columna dentro de otra
   columna deja de ser rejilla y cada campo pasa a ocupar el ancho entero. Con `grid` el
   ancho lo fija la clase del campo y no la profundidad a la que haya quedado. */
.py-form { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
           gap: .75rem .7rem; align-items: start; }
.py-form > * { min-width: 0; }
.py-form .rz-form-field, .py-form .rz-textbox, .py-form .rz-textarea,
.py-form .rz-dropdown, .py-form .rz-numeric, .py-form .rz-datepicker { width: 100%; }

.c2  { grid-column: span 2; }
.c3  { grid-column: span 3; }
.c4  { grid-column: span 4; }
.c5  { grid-column: span 5; }
.c6  { grid-column: span 6; }
.c8  { grid-column: span 8; }
.c12 { grid-column: 1 / -1; }

/* El separador siempre corta de lado a lado, esté donde esté en la rejilla. */
.py-form .py-sep { grid-column: 1 / -1; }

/* Interruptores y campos de sí/no: la etiqueta a la izquierda y el control a la derecha,
   no metidos en la rejilla de campos donde parecen uno más y se pulsan por error. */
.py-si { display: flex; align-items: center; justify-content: space-between; gap: .8rem;
         border: 1px solid var(--py-linea); border-radius: 8px; padding: .55rem .7rem;
         background: #fff; min-height: 3rem; }
.py-si__t { font-size: .8rem; color: var(--py-suave); }

@media (max-width: 1100px) {
    .c2, .c3, .c4, .c5 { grid-column: span 6; }
}
@media (max-width: 700px) {
    .py-form > * { grid-column: 1 / -1 !important; }
}

/* ══ Pestañas verticales ════════════════════════════════════════════════ */
/* Once pestañas en horizontal se parten en dos filas y el salto mueve el contenido de
   sitio al cambiar de una a otra. En vertical caben todas, se leen de un vistazo y el
   área de trabajo no se desplaza. */
.py-tabs.py-tabs--v .rz-tabview { display: grid; grid-template-columns: 13.5rem 1fr; gap: 1rem; }
.py-tabs.py-tabs--v .rz-tabview-nav { flex-direction: column; border-bottom: 0;
                                      border-right: 1px solid var(--py-linea);
                                      padding: 0 .4rem 0 0; gap: .1rem; align-items: stretch; }
.py-tabs.py-tabs--v .rz-tabview-nav li { width: 100%; }
.py-tabs.py-tabs--v .rz-tabview-nav li a,
.py-tabs.py-tabs--v .rz-tabview-nav li .rz-tabview-title {
    display: block; width: 100%; text-align: left; border-bottom: 0;
    border-left: 2px solid transparent; border-radius: 0 7px 7px 0;
    padding: .5rem .75rem; }
.py-tabs.py-tabs--v .rz-tabview-nav li.rz-state-active a,
.py-tabs.py-tabs--v .rz-tabview-nav li.rz-tabview-selected a {
    border-bottom: 0; border-left-color: var(--py-acento); background: var(--py-acento-tenue); }
.py-tabs.py-tabs--v .rz-tabview-panels { padding: 0; }

/* Se fija la celda de cada parte en vez de confiar en el orden del marcado: Radzen puede
   pintar la barra despues de los paneles segun la version y la rejilla no se entera. */
.py-tabs.py-tabs--v .rz-tabview-nav { grid-column: 1; grid-row: 1; }
.py-tabs.py-tabs--v .rz-tabview-panels { grid-column: 2; grid-row: 1; min-width: 0; }

@media (max-width: 900px) {
    .py-tabs.py-tabs--v .rz-tabview { grid-template-columns: 1fr; }
    .py-tabs.py-tabs--v .rz-tabview-nav { flex-direction: row; flex-wrap: wrap;
                                          border-right: 0; border-bottom: 1px solid var(--py-linea); }
    .py-tabs.py-tabs--v .rz-tabview-nav li { width: auto; }
}