/**
 * @author    PDS Mundial
 * @email     ing@pdsmundial.com
 * @web       www.pdsmundial.com
 * @copyright 2026 PDS Mundial
 * @license   Confidencial
 */
/* ==========================================================================
   Grid de Herramientas
   ========================================================================== */
.tools-grid {
    display: grid;
    /* min(300px, 100%) y no 300px a secas: el track no bajaba de 300px aunque el
       contenedor midiera menos, y por debajo de 316px de ventana (Galaxy Fold
       cerrado) la tarjeta se salia y aparecia scroll horizontal. */
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: var(--space-6);
    margin-top: var(--space-8);
    /* Sin esto, al abrir el detalle de UNA tarjeta las demas de su fila se
       estiraban igual (stretch es el valor por defecto) y quedaban con un hueco
       vacio del mismo alto que el panel que nadie habia abierto. */
    align-items: start;
}

.tool-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    background-color: var(--clr-bg-alt);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
    /* Propiedades explicitas en vez de 'all': con el detalle desplegandose en
       flujo, un 'transition: all' animaba tambien la altura y se peleaba con la
       transicion del propio panel. */
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    /* La tarjeta entera es la zona pulsable (ver .tool-toggle::after). */
    position: relative;
}

.tool-card:hover {
    transform: translateY(-4px);
    border-color: var(--clr-border-dark);
    box-shadow: var(--shadow-hover);
}

.tool-card.is-open {
    border-color: var(--clr-primary);
    box-shadow: var(--shadow-lg);
}

/* ==========================================================================
   Tarjeta desplegable
   --------------------------------------------------------------------------
   Toda la superficie abre y cierra el detalle. El control real sigue siendo UN
   solo <button> dentro del <h3>: el area se agranda con un pseudo-elemento, no
   envolviendo la tarjeta en un enlace. Envolverla romperia el HTML en cuanto el
   detalle lleva su propio CTA (un <a> dentro de otro <a>) y ningun lector de
   pantalla sabria anunciar dos controles superpuestos.
   ========================================================================== */
.tool-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    width: 100%;
    padding: 0;
    background: none;
    border: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

/* Este pseudo-elemento es el que convierte la tarjeta entera en zona pulsable. */
.tool-toggle::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-md);
}

/* base.css quita el outline a todos los <button>, asi que el foco de teclado hay
   que devolverlo a mano o esta tarjeta seria invisible para quien navega con Tab.
   Color literal a proposito: --clr-primary-rgb no existe en el proyecto y toda
   declaracion que la use se descarta en silencio. */
.tool-toggle:focus-visible::after {
    outline: 3px solid var(--clr-primary);
    outline-offset: 3px;
}

.tool-chevron {
    flex-shrink: 0;
    color: var(--clr-text-muted);
    transition: transform 0.28s ease;
}

.tool-card.is-open .tool-chevron {
    transform: rotate(180deg);
    color: var(--clr-primary);
}

/* El panel crece con grid-template-rows de 0fr a 1fr, que es lo que permite
   llegar a la altura real del contenido sin numeros magicos. El cambio es
   INSTANTANEO a proposito: ninguna propiedad de las que deciden si el contenido
   se ve puede depender de que una transicion llegue a su fin.

   El porque, aprendido midiendo el 1-sep-2026: con la altura puesta en un
   'transition', el panel se quedaba clavado en 0px y no abria NUNCA. La causa no
   era el CSS sino el navegador, que tenia el documento en visibilityState
   'hidden' y ahi congela el reloj de animaciones — la transicion figuraba como
   'running' con currentTime 0, es decir lanzada y parada para siempre. Cualquier
   pestana en segundo plano reproduce ese estado. Una tarjeta que no abre segun
   si su pestana estaba al frente es un fallo mudo, asi que la apertura no se
   confia a una animacion.

   Se probo tambien a hacer el fundido con @keyframes en vez de transition, por si
   al no ejecutarse dejaba el elemento en su estado natural: tampoco. Una
   animacion congelada se queda clavada en su PRIMER fotograma, o sea en
   'opacity: 0', y el contenido no se ve aunque el panel este abierto. Conclusion
   que conviene no volver a aprender: el contenido del panel no lleva animacion
   ninguna. Lo unico animado de la tarjeta es el giro del chevron y el hover, que
   son adorno puro: si se congelan, no se mueven y ya esta, pero nada deja de
   verse ni de funcionar.

   visibility (y no el atributo hidden ni un simple height:0) es lo que saca al
   CTA del orden de tabulacion mientras esta cerrado: con overflow oculto a secas
   seguiria siendo enfocable y quien navega con teclado caeria en un enlace que
   no ve. */
/* El panel va POR ENCIMA de la zona pulsable que cubre la tarjeta. Sin esto, el
   ::after del boton tapaba tambien el detalle abierto, y tocar el texto que acababas
   de desplegar —para frenar el desplazamiento con el dedo, o para seleccionar una
   linea con el raton— cerraba la tarjeta y el contenido desaparecia de golpe.
   Con el panel elevado, la cabecera abre y cierra, y el detalle se lee tranquilo.
   Cerrado no estorba: mide 0 de alto y esta en visibility:hidden. */
.tool-panel {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    position: relative;
    z-index: 1;
}

.tool-card.is-open .tool-panel {
    grid-template-rows: 1fr;
    visibility: visible;
}

.tool-panel-inner {
    min-height: 0;
    overflow: hidden;
}


.tool-list {
    margin: 0 0 var(--space-4);
    padding-left: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.tool-list li {
    color: var(--clr-text-muted);
    font-size: 0.875rem;
    line-height: 1.6;
}

.tool-tag {
    align-self: flex-start;
    margin: 0;
    padding: var(--space-1) var(--space-3);
    border-radius: 999px;
    background-color: var(--clr-bg);
    border: 1px solid var(--clr-border);
    color: var(--clr-text-muted);
    font-size: 0.75rem;
    font-weight: 500;
}

/* El CTA va POR ENCIMA del pseudo-elemento que cubre la tarjeta; si no, el clic
   lo interceptaria el boton de abrir/cerrar y el enlace no llevaria a ninguna
   parte: exactamente el fallo que este rediseno viene a corregir. */
.tool-cta {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
    /* --clr-primary (#3B82F6) con texto blanco da 3.68:1, que NO pasa el minimo AA de
       4.5:1 para texto normal. Se usa el tono hover (#2563EB, 5.17:1), que si pasa, y
       el hover baja un paso mas para que siga notandose el cambio. Medido, no estimado. */
    background-color: var(--clr-primary-hover);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.tool-cta:hover {
    background-color: #1D4ED8;
    color: #fff;
}

.tool-cta:focus-visible {
    outline: 3px solid var(--clr-primary);
    outline-offset: 3px;
}

/* Variante para quien tiene sesion pero todavia no tiene el modulo: no promete
   abrir algo que le rebotaria con "acceso denegado". */
.tool-cta-alt {
    background-color: transparent;
    border: 1px solid var(--clr-border-dark);
    color: var(--clr-text-main);
}

.tool-cta-alt:hover {
    background-color: var(--clr-bg);
    border-color: var(--clr-primary);
    color: var(--clr-primary);
}

@media (prefers-reduced-motion: reduce) {
    .tool-card,
    .tool-chevron,
    .tool-cta {
        transition: none;
    }


    .tool-card:hover {
        transform: none;
    }
}

.tool-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background-color: var(--clr-bg-alt);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    color: var(--clr-primary);
    margin-bottom: var(--space-2);
}

.tool-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--clr-text-main);
    letter-spacing: -0.01em;
}

.tool-desc {
    color: var(--clr-text-muted);
    font-size: 0.95rem;
    line-height: 1.5;
}