/* ==========================================================================
   INCODAP — Ciberseguridad
   Encima de /css/home.css. Mundo visual del sitio sin cambios; lo propio de
   esta página son las hojas de reporte (el reporte de hallazgos del hero y la
   ficha de un hallazgo) y la lista de revisiones con lo que incluye cada una.
   La página siempre es clara.
   ========================================================================== */

html { color-scheme: light; }

/* --------------------------------------------------------------------------
   Hero: texto a la izquierda, el reporte que recibes a la derecha
   -------------------------------------------------------------------------- */

.cs-hero { padding: clamp(3rem, 7vh, 5rem) 0 clamp(2.5rem, 6vh, 4rem); }

.cs-hero__rejilla {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}

.cs-hero h1 {
    font-size: clamp(2.3rem, 4.6vw, 3.5rem);
    font-weight: 800;
    line-height: 1.02;
    margin-bottom: 1.3rem;
}

.cs-hero h1 span { display: block; }
.cs-hero .entrada { margin-bottom: 2rem; }
.cs-hero .hero-acciones { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Hojas: el reporte de hallazgos y la ficha de un hallazgo
   -------------------------------------------------------------------------- */

.reporte,
.ficha {
    min-width: 0;
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: 16px;
    padding: 1.6rem 1.7rem 1.35rem;
    box-shadow: var(--sombra-2);
}

.reporte-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding-bottom: 1.1rem; }
.reporte-titulo { font-family: var(--display); font-weight: 700; font-size: 1.2rem; letter-spacing: -.022em; line-height: 1.15; }
.reporte-meta { font-size: .85rem; color: var(--tinta-2); margin-top: .3rem; }
.reporte-ejemplo { flex: none; font-size: .75rem; font-weight: 600; color: var(--tinta-3); background: var(--nieve); border-radius: 6px; padding: .32rem .6rem; }

.hallazgos { list-style: none; }

.hallazgo {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .95rem;
    align-items: start;
    padding: 1rem 0;
    border-top: 1px solid var(--linea-2);
}

.hallazgo-texto b { display: block; font-weight: 600; font-size: .95rem; line-height: 1.38; }
.hallazgo-texto span { display: block; font-size: .85rem; color: var(--tinta-2); line-height: 1.45; margin-top: .25rem; }

/* La gravedad va en texto, no solo en color: rojo lleno, rojo tenue, gris */
.gravedad {
    display: inline-block;
    min-width: 4.4rem;
    text-align: center;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1;
    padding: .42rem .55rem;
    border-radius: 6px;
    margin-top: .15rem;
}

.gravedad--critica { background: var(--rojo); color: #fff; }
.gravedad--alta { background: var(--rojo-piso); color: var(--rojo-alto); }
.gravedad--media { background: var(--nieve); color: var(--tinta-2); }

.reporte-pie { margin-top: .5rem; padding-top: 1rem; border-top: 1px solid var(--linea-2); font-size: .8rem; color: var(--tinta-3); line-height: 1.45; }

/* La ficha: un hallazgo abierto, campo por campo */
.ficha-cab { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.ficha-cab .gravedad { margin-top: 0; }

.ficha-titulo {
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -.022em;
    line-height: 1.15;
    padding-bottom: 1rem;
}

.ficha-campos > div { padding: .9rem 0; border-top: 1px solid var(--linea-2); }
.ficha-campos dt { font-size: .8rem; font-weight: 600; color: var(--tinta-3); margin-bottom: .3rem; }
.ficha-campos dd { font-size: .95rem; color: var(--tinta); line-height: 1.5; }

/* --------------------------------------------------------------------------
   Qué revisamos: cinco capas anidadas, de afuera hacia adentro. Las tres de
   adentro son el sistema; las dos de abajo quedan fuera de él (línea punteada).
   -------------------------------------------------------------------------- */

.capas { max-width: 60rem; }

.capas-origen {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-weight: 600;
    font-size: .95rem;
    color: var(--tinta-2);
    margin-bottom: .9rem;
    padding-left: .25rem;
}

.capas-origen svg { width: 20px; height: 20px; color: var(--rojo); flex: none; }
.capas-origen .capas-flecha { width: 16px; height: 16px; color: var(--tinta-3); }

.capa {
    border: 1px solid var(--linea);
    border-radius: 16px;
    padding: 1.35rem 1.45rem 1.45rem;
}

.capa--1 { background: var(--nieve); }
.capa--2 { background: var(--blanco); margin-top: 1.25rem; }
.capa--3 { background: var(--nieve); margin-top: 1.25rem; }

.capa-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .75rem; margin-bottom: .9rem; }
.capa-cab svg { width: 22px; height: 22px; color: var(--rojo); flex: none; align-self: center; }
.capa-cab h3 { font-size: 1.1rem; }
.capa-cab p { font-size: .95rem; color: var(--tinta-2); }

.capa-chips { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; }
.capa-chips li { font-size: .84rem; font-weight: 500; color: var(--tinta); background: var(--blanco); border: 1px solid var(--linea); border-radius: 8px; padding: .4rem .7rem; line-height: 1.3; }
.capa--2 .capa-chips li { background: var(--nieve); border-color: transparent; }

.capas-fuera { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 1.25rem; }
.capa--fuera { background: var(--blanco); border: 1.5px dashed #c9cfd4; }
.capa--fuera .capa-chips li { background: var(--nieve); border-color: transparent; }

/* --------------------------------------------------------------------------
   Cuándo conviene: seis señales que se marcan con un toque
   -------------------------------------------------------------------------- */

.senales { max-width: 60rem; }

.senales-rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }

.senal {
    display: flex;
    align-items: center;
    gap: .9rem;
    width: 100%;
    min-height: 60px;
    text-align: left;
    font-family: var(--texto);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--tinta);
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: 12px;
    padding: .95rem 1.1rem;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 160ms, background 160ms, transform 160ms var(--salida);
}

.senal:active { transform: scale(.985); }

@media (hover: hover) and (pointer: fine) {
    .senal:hover { border-color: var(--tinta-3); }
}

.senal-caja {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1.5px solid #c9cfd4;
    background: var(--blanco);
    display: grid;
    place-items: center;
    transition: background 160ms, border-color 160ms;
}

.senal-caja::after {
    content: "";
    width: 11px;
    height: 6px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: translateY(-1px) rotate(-45deg) scale(.6);
    opacity: 0;
    transition: opacity 120ms, transform 160ms var(--salida);
}

.senal[aria-pressed="true"] { border-color: var(--rojo); background: var(--rojo-piso); }
.senal[aria-pressed="true"] .senal-caja { background: var(--rojo); border-color: var(--rojo); }
.senal[aria-pressed="true"] .senal-caja::after { opacity: 1; transform: translateY(-1px) rotate(-45deg) scale(1); }

.senales-pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--linea);
}

.senales-resultado { font-size: 1.05rem; color: var(--tinta-2); max-width: 40ch; }
.senales-resultado strong { color: var(--tinta); font-weight: 600; }
.senales--con .senales-resultado { color: var(--tinta); }

/* --------------------------------------------------------------------------
   Normas que lo piden: tabla de tres columnas con línea de corte, sin bordes
   -------------------------------------------------------------------------- */

.normas { max-width: 66rem; }

.normas-cab,
.norma {
    display: grid;
    grid-template-columns: minmax(0, .75fr) minmax(0, 1fr) minmax(0, 1.25fr);
    gap: .35rem 2rem;
    align-items: start;
}

.normas-cab { padding-bottom: .75rem; font-size: .8rem; font-weight: 600; color: var(--tinta-3); }
.norma { padding: 1.2rem 0; border-top: 1px solid var(--linea); }
.norma:last-child { border-bottom: 1px solid var(--linea); }

.norma h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.norma-ambito { display: inline-block; font-size: .74rem; font-weight: 600; color: var(--tinta-3); background: var(--nieve); border-radius: 6px; padding: .28rem .55rem; }
.norma-si, .norma-pide { font-size: .95rem; line-height: 1.5; color: var(--tinta-2); }
.norma-pide { color: var(--tinta); }

.normas-tambien { margin-top: 1.5rem; font-size: .95rem; color: var(--tinta-2); max-width: 66rem; line-height: 1.5; }
.normas-nota { margin-top: 1rem; font-size: .95rem; color: var(--tinta-2); max-width: 66rem; line-height: 1.5; }
.normas-nota strong { color: var(--tinta); font-weight: 600; }

/* --------------------------------------------------------------------------
   Qué recibes: entregables a la izquierda, la ficha a la derecha
   -------------------------------------------------------------------------- */

.recibes {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
    gap: 2.5rem 4.5rem;
    align-items: start;
}

.entregables { list-style: none; }

.entregable { padding: 1.3rem 0; border-top: 1px solid var(--linea); }
.entregable:last-child { border-bottom: 1px solid var(--linea); }
.entregable b { display: block; font-family: var(--display); font-weight: 700; font-size: 1.05rem; letter-spacing: -.018em; margin-bottom: .25rem; }
.entregable span { font-size: .95rem; color: var(--tinta-2); line-height: 1.5; }

.recibes-nota { margin-top: 1.6rem; font-size: 1.02rem; color: var(--tinta-2); line-height: 1.55; max-width: 48ch; }
.recibes-nota strong { color: var(--tinta); font-weight: 600; }

/* --------------------------------------------------------------------------
   Adaptativo
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
    .cs-hero__rejilla { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
    .cs-hero .reporte { max-width: 600px; }
}

@media (max-width: 900px) {
    .recibes { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
    .normas-cab { display: none; }
    .norma { grid-template-columns: minmax(0, 1fr); gap: .45rem; }
    .norma h3 { display: inline; margin-right: .5rem; }
    .norma-si::before { content: "Te aplica si "; font-weight: 600; color: var(--tinta); }
    .norma-pide::before { content: "Te pide "; font-weight: 600; }
    .capas-fuera { grid-template-columns: 1fr; gap: 1rem; }
    .senales-rejilla { grid-template-columns: 1fr; gap: .7rem; }
}

@media (max-width: 760px) {
    .reporte, .ficha { padding: 1.3rem 1.25rem 1.1rem; }
    .capa { padding: 1rem .95rem 1.1rem; border-radius: 14px; }
    .capa--2, .capa--3 { margin-top: 1rem; }
    .capa-cab p { flex-basis: 100%; }
    .senal { min-height: 52px; padding: .8rem .95rem; font-size: .95rem; }
}