/* =============================================================
   DSA Compliance · Ficha técnica de un servicio
   -------------------------------------------------------------
   Lo que separa «te hago una auditoría RGPD» de un servicio que
   se puede comprar: norma, entregables, fases, condiciones.
   ============================================================= */

.ficha { display: flex; flex-direction: column; gap: 1.35rem; }

.ficha__resumen {
    margin: 0;
    font-size: .95rem;
    line-height: 1.55;
    color: #334155;
    padding: .9rem 1rem;
    background: linear-gradient(135deg, #eef2ff 0%, #f8fafc 100%);
    border-left: 3px solid #6366f1;
    border-radius: 0 12px 12px 0;
}

.ficha__bloque { display: flex; flex-direction: column; gap: .6rem; }

.ficha__h {
    display: flex; align-items: center; gap: .4rem;
    margin: 0;
    font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: #64748b;
}
.ficha__h .rzi { font-size: 17px; color: #6366f1; }

/* ---- Marco normativo ----
   Es el argumento de venta de un servicio de cumplimiento: no «te ayudo con la
   privacidad», sino «RGPD art. 30 y LOPDGDD art. 31». Se muestra como sello. */
.ficha__normas { display: flex; flex-wrap: wrap; gap: .45rem; }
.ficha__norma {
    display: inline-flex; flex-direction: column;
    background: #fff; border: 1px solid #c7d2fe; border-left: 3px solid #4f46e5;
    border-radius: 8px; padding: .38rem .65rem;
}
.ficha__norma-n { font-size: .82rem; font-weight: 700; color: #312e81; line-height: 1.2; }
.ficha__norma-r { font-size: .72rem; color: #6366f1; }

/* ---- Alcance: lo que entra y lo que no, uno al lado del otro ---- */
.ficha__alcance {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.35rem;
}

.ficha__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.ficha__lista li {
    display: flex; align-items: flex-start; gap: .4rem;
    font-size: .85rem; line-height: 1.45; color: #334155;
}
.ficha__lista li .rzi { font-size: 16px; margin-top: 1px; flex-shrink: 0; color: #94a3b8; }
.ficha__lista--si li .rzi { color: #22c55e; }
.ficha__lista--no li { color: #94a3b8; }
.ficha__lista--no li .rzi { color: #cbd5e1; }

/* ---- Fases ---- */
.ficha__fases { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .1rem; }
.ficha__fase { display: flex; gap: .7rem; padding: .5rem 0; position: relative; }
.ficha__fase:not(:last-child)::before {
    content: ""; position: absolute; left: 13px; top: 34px; bottom: -4px;
    width: 2px; background: #e0e7ff;
}
.ficha__fase-n {
    flex: 0 0 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    background: #4f46e5; color: #fff;
    border-radius: 50%; font-size: .78rem; font-weight: 700;
    z-index: 1;
}
.ficha__fase-cuerpo { min-width: 0; padding-top: .15rem; }
.ficha__fase-t { font-size: .88rem; font-weight: 650; color: #0f172a; display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.ficha__fase-d {
    font-size: .7rem; font-weight: 700; color: #4338ca;
    background: #eef2ff; border-radius: 999px; padding: .1rem .45rem;
}
.ficha__fase-x { font-size: .82rem; color: #64748b; line-height: 1.45; margin-top: .12rem; }

/* ---- Condiciones ---- */
.ficha__datos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: .5rem;
}
.ficha__dato {
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px;
    padding: .5rem .7rem; display: flex; flex-direction: column; gap: .1rem; min-width: 0;
}
.ficha__dato-e { font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #94a3b8; }
.ficha__dato-v { font-size: .85rem; font-weight: 600; color: #0f172a; overflow-wrap: anywhere; }

/* ---- Preguntas frecuentes ---- */
.ficha__faq {
    border: 1px solid #e5e7eb; border-radius: 10px; padding: .55rem .75rem; background: #fff;
    margin-bottom: .35rem;
}
.ficha__faq summary {
    cursor: pointer; font-size: .86rem; font-weight: 600; color: #0f172a;
    list-style: none; display: flex; align-items: center; gap: .4rem;
}
.ficha__faq summary::-webkit-details-marker { display: none; }
.ficha__faq summary::before { content: "＋"; color: #6366f1; font-weight: 700; }
.ficha__faq[open] summary::before { content: "－"; }
.ficha__faq p { margin: .45rem 0 .15rem 1.1rem; font-size: .84rem; color: #475569; line-height: 1.5; }

/* ---- Editor de la ficha en el formulario del proveedor ---- */
.ficha-editor { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
@media (max-width: 900px) { .ficha-editor { grid-template-columns: 1fr; } }
.ficha-editor__json {
    width: 100%; min-height: 320px;
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: .78rem; line-height: 1.45;
    border: 1px solid #e2e8f0; border-radius: 10px; padding: .7rem;
    background: #0f172a; color: #e2e8f0;
    resize: vertical;
}
.ficha-editor__error {
    font-size: .78rem; color: #b91c1c; background: #fef2f2;
    border: 1px solid #fecaca; border-radius: 8px; padding: .4rem .6rem;
}
.ficha-editor__ok { font-size: .78rem; color: #15803d; }
.ficha-editor__vista {
    border: 1px solid #e5e7eb; border-radius: 12px; padding: 1rem;
    background: #fff; max-height: 520px; overflow-y: auto;
}
.ficha-editor__vacio { color: #94a3b8; font-size: .84rem; font-style: italic; }
.dsa-sub { font-size: .72rem; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .35rem; }
.dsa-rail__n {
    margin-left: auto; background: #e0e7ff; color: #4338ca;
    font-size: .68rem; font-weight: 700; border-radius: 999px; padding: 0 .35rem; min-width: 18px; text-align: center;
}
.dsa-rail__ok { margin-left: auto; color: #22c55e; display: inline-flex; }
.dsa-rail__ok .rzi { font-size: 16px; }

/* ---- Tira de «empezar desde una plantilla» ----
   Estaba en la cabecera de la tarjeta, donde el overflow:hidden de .form-section recortaba
   el panel a media lista y además competía por sitio con el título. Aquí es una fila propia
   dentro del cuerpo: cabe, se lee y el panel se despliega entero. */
.plantilla-strip {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap;
    background: linear-gradient(135deg, #eef2ff 0%, #f8fafc 100%);
    border: 1px dashed #c7d2fe;
    border-radius: 12px;
    padding: .6rem .8rem;
    margin-bottom: 1rem;
}
.plantilla-strip > .rzi { font-size: 19px; color: #6366f1; }
.plantilla-strip__t { font-size: .82rem; font-weight: 600; color: #4338ca; margin-right: auto; }
@media (max-width: 760px) { .plantilla-strip__t { margin-right: 0; width: 100%; } }

/* La tarjeta de sección recorta lo que se salga -esquinas redondeadas-, y eso incluye el
   panel de un desplegable que se abra dentro. Se permite salir solo donde hace falta. */
.form-section:has(.plantilla-strip) { overflow: visible; }