/*! Portal Documental · consultas (lo que no trae diagnostico.css)
    Va después de publico.css y diagnostico.css.
    Andrés Madrid · andresmadrid.vercel.app */

/* Paso 2: motivos por grupo, en dos columnas */
.motivos{ display:flex; flex-direction:column; gap:26px; }
.motivos__tit{
    margin:0 0 12px;
    font:700 12px/1 var(--texto);
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--mar-prof);
}
.motivos__rejilla{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
.opcion--compacta{ height:100%; align-items:flex-start; gap:14px; padding:18px 20px; border-radius:18px; }
.opcion--compacta .opcion__letra{ width:34px; height:34px; border-radius:10px; font-size:14px; }
.opcion--compacta .opcion__txt b{ font-size:17px; line-height:1.25; }
.opcion--compacta .opcion__txt small{ margin-top:5px; font-size:14px; line-height:1.45; }
.opcion--ancha{ grid-column:1 / -1; }

/* Paso 3: el motivo elegido, arriba de la descripción */
.motivo-elegido{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px 16px;
    flex-wrap:wrap;
    margin-bottom:20px;
    padding:14px 18px;
    border-radius:16px;
    background:var(--mar-suave);
    color:var(--mar-tinta);
}
.motivo-elegido span{ display:block; font:600 12px/1.3 var(--texto); letter-spacing:.08em; text-transform:uppercase; }
.motivo-elegido b{ display:block; margin-top:4px; font:600 18px/1.3 var(--titulos); color:var(--tinta); }
.motivo-elegido button{ border:0; background:none; color:var(--mar-prof); font:600 14px/1 var(--texto); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.motivo-elegido button:hover{ color:#F2801C; }

/* Paso 3: descripción */
.campo--area{
    height:auto;
    min-height:240px;
    padding:14px 16px;
    font:500 16px/1.6 var(--texto);
    resize:vertical;
}
.contador{ margin:8px 0 0; text-align:right; font:500 13px/1.3 var(--texto); color:var(--texto-3); }
.contador--falta{ color:var(--ambar-tinta); }

/* Confirmación: número de la consulta */
.radicado{
    padding:20px 22px;
    border-radius:16px;
    background:var(--superficie);
    border:1px solid var(--linea);
    border-left:4px solid var(--mar);
}
.radicado__eti{ font:600 13px/1.3 var(--texto); color:var(--texto-3); }
.radicado__num{
    display:block;
    margin-top:8px;
    font:700 32px/1.05 var(--titulos);
    letter-spacing:-.01em;
    font-variant-numeric:tabular-nums;
    overflow-wrap:anywhere;
}
.radicado__datos{ margin:16px 0 0; display:flex; flex-direction:column; gap:10px; }
.radicado__datos div{ display:flex; justify-content:space-between; gap:12px; padding-top:10px; border-top:1px solid var(--linea-2); }
.radicado__datos dt{ font:500 14px/1.4 var(--texto); color:var(--texto-2); }
.radicado__datos dd{ margin:0; font:600 14.5px/1.4 var(--texto); text-align:right; overflow-wrap:anywhere; }
.resultado__detalle > .llamado:first-of-type{ margin-top:0; }

@media (max-width:600px){
    .motivos__rejilla{ grid-template-columns:1fr; }
    .opcion--compacta{ padding:16px; }
    .radicado__num{ font-size:26px; }
}