/* =============================================================
   SolicitudStyles.css
   Estilos centralizados para la página de Nueva Solicitud y
   todos sus componentes hijos (FrmSolicitud, FrmPqrsSuperservicios,
   FrmQrsf, FrmDenuncia, FrmUbicacionServicio, etc.)
   Color institucional: #0033A0
   ============================================================= */

/* ─── Layout principal ─────────────────────────────────────── */
.solicitud-page {
    width: 100%;
    padding: 24px 0 48px;
    background-color: #f4f6fb;
    min-height: calc(100vh - 120px);
}

.solicitud-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 24px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
    align-items: start;
}

.solicitud-layout--single {
    grid-template-columns: 1fr;
    max-width: 860px;
}

.solicitud-main {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ─── Sidebar derecho ───────────────────────────────────────── */
.solicitud-sidebar {
    position: sticky;
    top: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sidebar-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.sidebar-card--tips {
    border-top: 4px solid #0033A0;
}

.sidebar-card--time {
    background: linear-gradient(135deg, #0033A0, #001f6b);
    color: white;
}

.sidebar-tips-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #0033A0;
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sidebar-tips-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .sidebar-tips-list li {
        font-size: 13px;
        color: #4a5568;
        line-height: 1.5;
        padding-left: 18px;
        position: relative;
    }

        .sidebar-tips-list li::before {
            content: "●";
            color: #f0a500;
            font-size: 8px;
            position: absolute;
            left: 0;
            top: 4px;
        }

        .sidebar-tips-list li strong {
            color: #2d3748;
        }

.sidebar-time-label {
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: 0.75;
    margin: 0 0 6px;
}

.sidebar-time-value {
    font-size: 36px;
    font-weight: 700;
    color: #f0a500;
    margin: 0 0 6px;
    line-height: 1;
}

.sidebar-time-desc {
    font-size: 12px;
    opacity: 0.8;
    margin: 0;
    line-height: 1.4;
}

/* ─── Tarjeta de sección ────────────────────────────────────── */
.seccion-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

/* Espacio entre secciones apiladas dentro de un content-card
   (p.ej. FrmRiesgoInminente). En FrmSolicitud el gap lo maneja
   .solicitud-main (flex gap: 20px), por lo que este selector
   no genera espacio doble allí. */
.card-content .seccion-card + .seccion-card {
    margin-top: 24px;
}

.seccion-card__header {
    background: linear-gradient(135deg, #0033A0, #001f6b);
    color: white;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.seccion-card__title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.seccion-card__icon {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .seccion-card__icon svg {
        width: 18px;
        height: 18px;
    }

.seccion-card__title {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: white;
}

.seccion-card__subtitle {
    font-size: 12px;
    opacity: 0.75;
    margin: 2px 0 0;
}

.seccion-card__badge {
    font-size: 11px;
    background: rgba(255, 255, 255, 0.2);
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

.seccion-card__body {
    padding: 24px;
}

/* ─── Campos de formulario ──────────────────────────────────── */
.campo-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 7px;
}

.campo-requerido-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 7px;
}

    .campo-requerido-label::after {
        content: " *";
        color: #e53e3e;
    }

.campo-hint {
    font-size: 11px;
    color: #718096;
    margin-top: 4px;
}

.campo-contador {
    text-align: right;
    font-size: 11px;
    color: #a0aec0;
    margin-top: 4px;
}

/* Descripción informativa bajo el dropdown */
.campo-descripcion {
    margin-top: 10px;
    padding: 12px 16px;
    background: #f0f4ff;
    border-left: 4px solid #0033A0;
    border-radius: 0 6px 6px 0;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
}

.campo-descripcion__icon {
    color: #0033A0;
    flex-shrink: 0;
    margin-top: 2px;
}

.campo-descripcion__text {
    font-size: 13px;
    color: #4a5568;
    line-height: 1.6;
    margin: 0;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
    min-width: 0;
    flex: 1;
}

/* ─── Indicador de campos obligatorios ─────────────────────── */
.campos-obligatorios-hint {
    font-size: 12px;
    color: #718096;
    margin-bottom: 16px;
}

    .campos-obligatorios-hint span {
        color: #e53e3e;
        font-weight: 700;
    }

/* ─── Separador entre campos ────────────────────────────────── */
.form-row {
    margin-bottom: 20px;
}

    .form-row:last-child {
        margin-bottom: 0;
    }

/* ─── Sección interna (sub-header dentro de body) ───────────── */
.sub-section-header {
    background: #f0f4ff;
    border-left: 4px solid #0033A0;
    padding: 10px 16px;
    border-radius: 0 6px 6px 0;
    font-size: 14px;
    font-weight: 600;
    color: #0033A0;
    margin: 20px 0 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ─── Botones de acción ─────────────────────────────────────── */
.action-bar {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid #e2e8f0;
    background: #fafbff;
}

.btn-solicitud-cancel {
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    border: 2px solid #e2e8f0;
    background: white;
    color: #718096;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .btn-solicitud-cancel:hover {
        background: #f7fafc;
        border-color: #cbd5e0;
        color: #4a5568;
    }

.btn-solicitud-submit {
    padding: 10px 28px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    background: linear-gradient(135deg, #0033A0, #001f6b);
    color: white;
    border: none;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(0, 51, 160, 0.35);
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .btn-solicitud-submit:hover:not(:disabled) {
        transform: translateY(-1px);
        box-shadow: 0 5px 14px rgba(0, 51, 160, 0.45);
    }

    .btn-solicitud-submit:disabled {
        opacity: 0.55;
        cursor: not-allowed;
        transform: none;
    }

/* ─── Overlay de carga ──────────────────────────────────────── */
.solicitud-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 40px;
    gap: 20px;
}

.solicitud-loading__text {
    font-size: 15px;
    color: #0033A0;
    font-weight: 600;
}

/* ─── Spinner de carga de campo ────────────────────────────── */
.campo-cargando {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    font-size: 13px;
    color: #718096;
}

/* ─── Banner informativo de servicio seleccionado ───────────── */
.servicio-info-banner {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-top: 12px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #f0f4ff, #e8f0fe);
    border-left: 4px solid #0033A0;
    border-radius: 0 10px 10px 0;
    box-shadow: 0 2px 8px rgba(0, 51, 160, 0.08);
    animation: tooltipFadeIn 0.2s ease;
}

.servicio-info-banner__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.servicio-info-banner__content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.servicio-info-banner__nombre {
    font-size: 14px;
    font-weight: 700;
    color: #0033A0;
}

.servicio-info-banner__desc {
    font-size: 13px;
    color: #4a5568;
    line-height: 1.5;
}

/* ─── Tooltip informativo (ícono ℹ + panel toggle) ─────────── */
.campo-label-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 7px;
}

.campo-tooltip-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.campo-tooltip-btn {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #0033A0;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    font-style: italic;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.18s, transform 0.18s;
    font-family: Georgia, serif;
}

    .campo-tooltip-btn:hover {
        background: #001f6b;
        transform: scale(1.1);
    }

    .campo-tooltip-btn[aria-expanded="true"] {
        background: #f0a500;
        color: #1a1a1a;
    }

.campo-tooltip-panel {
    position: fixed; /* JS lo cambia a absolute y lo mueve al body */
    z-index: 99999;
    width: 320px;
    max-width: calc(100vw - 32px);
    box-sizing: border-box;
    background: #0a1f5c;
    color: white;
    border-radius: 10px;
    padding: 16px 18px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
    animation: tooltipFadeIn 0.18s ease;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.3) transparent;
}

    /* Flecha apuntando hacia arriba (panel abre hacia abajo, default) */
    .campo-tooltip-panel::before {
        content: "";
        position: absolute;
        top: -7px;
        left: var(--arrow-left, 8px);
        width: 0;
        height: 0;
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-bottom: 8px solid #0a1f5c;
    }

/* Flecha apuntando hacia abajo (panel abre hacia arriba) */
.campo-tooltip-panel--up::before {
    top: auto;
    bottom: -7px;
    border-bottom: none;
    border-top: 8px solid #0a1f5c;
}

.campo-tooltip-panel__title {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #f0a500;
    margin: 0 0 10px;
}

.campo-tooltip-panel__body {
    font-size: 13px;
    line-height: 1.6;
    color: #e2e8f0;
    margin: 0;
}

    .campo-tooltip-panel__body ul {
        margin: 8px 0 0;
        padding: 0;
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .campo-tooltip-panel__body li {
        font-size: 13px;
        line-height: 1.5;
        padding-left: 14px;
        position: relative;
        word-break: break-word;
        overflow-wrap: break-word;
    }

        .campo-tooltip-panel__body li::before {
            content: "›";
            color: #f0a500;
            font-weight: 700;
            position: absolute;
            left: 0;
            top: 0;
        }

        .campo-tooltip-panel__body li strong {
            color: #f0a500;
            font-weight: 700;
        }

@keyframes tooltipFadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ─── Responsive ────────────────────────────────────────────── */
@media (max-width: 900px) {
    .solicitud-layout {
        grid-template-columns: 1fr;
        padding: 0 16px;
    }

    .solicitud-sidebar {
        position: static;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .seccion-card__header {
        flex-wrap: wrap;
        gap: 8px;
    }
}

@media (max-width: 580px) {
    .solicitud-sidebar {
        grid-template-columns: 1fr;
    }

    .seccion-card__body {
        padding: 16px;
    }

    .action-bar {
        flex-direction: column-reverse;
    }

    .btn-solicitud-cancel,
    .btn-solicitud-submit {
        width: 100%;
        justify-content: center;
    }
}

/* =============================================================
   FrmPreguntann — Tarjetas de selección identidad
   ============================================================= */

.identidad-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    margin-bottom: 4px;
}

.identidad-header {
    background: linear-gradient(135deg, #0a1f5c, #0033A0);
    color: white;
    padding: 18px 24px;
    display: flex;
    align-items: center;
    gap: 14px;
}

    .identidad-header .seccion-card__icon {
        background: rgba(255, 255, 255, 0.15);
        flex-shrink: 0;
    }

.identidad-header__title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    color: white;
}

/* Grid de opciones */
.identidad-opciones {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid #e2e8f0;
}

/* Cada tarjeta-opción */
.identidad-opcion {
    position: relative;
    background: white;
    border: none;
    padding: 28px 28px 24px;
    text-align: left;
    cursor: pointer;
    transition: background 0.18s ease;
    display: flex;
    flex-direction: column;
    gap: 0;
}

    .identidad-opcion:first-child {
        border-right: 1px solid #e2e8f0;
    }

    .identidad-opcion:hover {
        background: #f7f9ff;
    }

.identidad-opcion--activa {
    background: #f0f5ff !important;
    box-shadow: inset 0 0 0 2px #0033A0;
}

/* Radio visual (esquina superior derecha) */
.identidad-opcion__radio {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 22px;
    height: 22px;
    border: 2px solid #cbd5e0;
    border-radius: 50%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.18s;
}

.identidad-opcion--activa .identidad-opcion__radio {
    border-color: #0033A0;
}

.identidad-opcion__radio-inner {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: transparent;
    transition: background 0.18s;
}

.identidad-opcion__radio-inner--activo {
    background: #0033A0;
}

/* Badge "RECOMENDADA" */
.identidad-badge-recomendada {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: #1a8a2e;
    color: white;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    padding: 4px 14px;
    border-radius: 0 0 10px 10px;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

/* Emoji */
.identidad-opcion__emoji {
    font-size: 36px;
    margin-bottom: 12px;
    margin-top: 8px;
    line-height: 1;
}

/* Títulos y descripciones */
.identidad-opcion__titulo {
    font-size: 22px;
    font-weight: 700;
    color: #1a202c;
    margin: 0 0 8px;
}

.identidad-opcion__desc {
    font-size: 14px;
    color: #718096;
    margin: 0 0 16px;
    line-height: 1.5;
}

/* Lista de bullets */
.identidad-opcion__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.identidad-opcion__item {
    font-size: 14px;
    font-weight: 600;
    padding-left: 20px;
    position: relative;
    line-height: 1.4;
}

    .identidad-opcion__item::before {
        content: "●";
        font-size: 9px;
        position: absolute;
        left: 0;
        top: 3px;
    }

.identidad-opcion__item--positivo {
    color: #2d3748;
}

    .identidad-opcion__item--positivo::before {
        color: #1a8a2e;
    }

.identidad-opcion__item--neutro {
    color: #2d3748;
}

    .identidad-opcion__item--neutro::before {
        color: #1a8a2e;
    }

.identidad-opcion__item--advertencia {
    color: #2d3748;
}

    .identidad-opcion__item--advertencia::before {
        color: #dd6b20;
    }

/* Responsive — apilado vertical en móvil */
/*@media (max-width: 640px) {
    .identidad-opciones {
        grid-template-columns: 1fr;
    }

    .identidad-opcion:first-child {
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
    }
}

/* Estado deshabilitado (cuando viene de FrmSolicitudDirecta) */
.identidad-opcion--deshabilitada {
    opacity: 0.45;
    cursor: not-allowed;
    background: #f7fafc !important;
}

    .identidad-opcion--deshabilitada:hover {
        background: #f7fafc !important;
    }

.identidad-opcion__aviso {
    margin-top: 12px;
    font-size: 12px;
    font-weight: 600;
    color: #c05621;
    background: #fffaf0;
    border: 1px solid #fbd38d;
    border-radius: 6px;
    padding: 6px 10px;
    text-align: center;
}


@media (max-width: 640px) {
    .solicitud-layout {
        grid-template-columns: 1fr; /* una sola columna */
        padding: 0 16px;
    }

    .solicitud-sidebar {
        position: static; /* quita el sticky en móvil */
    }

    .solicitud-page {
        padding: 16px 0 32px;
    }
}

/* ─── Radzen Dropdown: evitar scroll horizontal en móvil ────── */
.rz-dropdown {
    max-width: 100%;
    box-sizing: border-box;
}

.rz-dropdown-label {
    min-width: 0;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
}

@media (max-width: 640px) {
    .rz-dropdown-label {
        white-space: normal;
        word-break: break-word;
    }
}


/* Contenedor principal del dropdown */
.rz-dropdown-truncate {
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important; /* clave para que flex no lo expanda */
}

    /* El valor seleccionado que se muestra */
    .rz-dropdown-truncate .rz-dropdown-label {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
        display: block !important;
    }

    /* Evita que el trigger button crezca */
    .rz-dropdown-truncate .rz-dropdown-trigger {
        flex-shrink: 0;
    }

    .rz-dropdown-truncate.rz-dropdown {
        max-width: 100% !important;
        overflow: hidden !important;
    }

/* En móvil, los dropdowns con texto largo hacen wrap en lugar de truncarse */
@media (max-width: 640px) {
    .rz-dropdown-truncate .rz-dropdown-label {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        word-break: break-word;
        overflow-wrap: break-word;
    }
}


.page-header {
    background: white;
    padding: 25px 30px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    margin-bottom: 30px;
    width: 100%;
    max-width: 900px;
    text-align: center;
}

.page-header-centered {
    background: white;
    padding: 25px 30px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    margin: 30px auto;
    width: calc(100% - 60px);
    text-align: center;
}

.page-title {
    color: #0033A0;
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 10px;
}

.page-subtitle {
    color: #7f8c8d;
    font-size: 16px;
    font-weight: 400;
}

/* ─── Tips: grupos por instancia ────────────────────────────── */
.sidebar-instancia-grupo {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sidebar-instancia-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 20px;
    width: fit-content;
}

.sidebar-instancia-header--primera {
    background: #e8f5e9;
    color: #2e7d32;
}

.sidebar-instancia-header--segunda {
    background: #fff3e0;
    color: #e65100;
}

.sidebar-instancia-divider {
    height: 1px;
    background: #e2e8f0;
    margin: 10px 0;
}

.sidebar-tips-list--instancia {
    gap: 8px;
}

    .sidebar-tips-list--instancia li {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        padding-left: 0;
        font-size: 12.5px;
        color: #4a5568;
        line-height: 1.5;
    }

        .sidebar-tips-list--instancia li::before {
            display: none;
        }

.tip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 5px;
}

.tip-dot--primera {
    background: #2e7d32;
}

.tip-dot--segunda {
    background: #e65100;
}

/* ─── Tip dinámico de término de respuesta ──────────────────── */
.sidebar-tip-termino {
    margin-top: 14px;
    padding: 12px 14px;
    background: #f8faff;
    border-left: 4px solid #0033A0;
    border-radius: 0 8px 8px 0;
    transition: border-color 0.3s ease, background 0.3s ease;
    animation: tooltipFadeIn 0.25s ease;
}

.sidebar-tip-termino__titulo {
    font-size: 12px;
    font-weight: 700;
    color: #2d3748;
    margin: 0 0 5px;
}

.sidebar-tip-termino__cuerpo {
    font-size: 12.5px;
    color: #4a5568;
    line-height: 1.6;
    margin: 0;
}

.sidebar-tip-termino__cuerpo strong {
    color: #1a202c;
}

/* ─── Medio de respuesta: pregunta persuasiva con botones Sí/No ─────────────── */

.medio-respuesta-row {
    gap: 10px;
}

/* Botones Sí / No */
.medio-respuesta-opciones {
    display: flex;
    gap: 12px;
    align-items: center;
}

.medio-respuesta-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    border-radius: 8px;
    border: 2px solid #c8d8f0;
    background: #f5f8ff;
    color: #2d3748;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    white-space: nowrap;
}

.medio-respuesta-btn:hover {
    border-color: var(--vu-blue-primary, #0033A0);
    background: #eaf0ff;
}

/* Botón Sí activo */
.medio-respuesta-btn--activo {
    border-color: #1a7c3e;
    background: #edfaf3;
    color: #1a7c3e;
    box-shadow: 0 2px 8px rgba(26, 124, 62, 0.12);
}

.medio-respuesta-btn--activo:hover {
    border-color: #155f30;
    background: #d6f5e5;
}

.medio-respuesta-btn__badge {
    font-size: 0.7rem;
    font-weight: 700;
    background: #1a7c3e;
    color: #fff;
    border-radius: 20px;
    padding: 2px 8px;
    margin-left: 4px;
    letter-spacing: 0.02em;
}

/* Botón No (secundario) */
.medio-respuesta-btn--secundario {
    border-color: #dde3ec;
    background: #f8f9fb;
    color: #6b7a90;
    font-weight: 500;
    font-size: 0.88rem;
}

.medio-respuesta-btn--secundario:hover {
    border-color: #a0aab8;
    background: #f0f2f5;
    color: #4a5568;
}

/* Botón No activo */
.medio-respuesta-btn--activo-secundario {
    border-color: #a0aab8;
    background: #edf0f5;
    color: #374151;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.medio-respuesta-btn__icono {
    font-size: 1rem;
    line-height: 1;
}

/* ══════════════════════════════════════
   AVISO RESPUESTA FÍSICA — FrmDatosBasicos
   ══════════════════════════════════════ */
.fdb-aviso-fisico {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background-color: #e8f0fb;
    border-left: 4px solid #0033A0;
    border-radius: 0 10px 10px 0;
    padding: 1.1rem 1.4rem;
    margin-bottom: 1.5rem;
    color: #1a2a4a;
}

.fdb-aviso-fisico__icono {
    flex-shrink: 0;
    color: #0033A0;
    margin-top: 0.1rem;
}

.fdb-aviso-fisico__cuerpo {
    flex: 1;
}

.fdb-aviso-fisico__titulo {
    margin: 0 0 0.55rem;
    font-size: 0.97rem;
    font-weight: 700;
    color: #0033A0;
}

.fdb-aviso-fisico__lista {
    margin: 0 0 0.75rem;
    padding-left: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.91rem;
    line-height: 1.5;
    color: #2d3d5a;
}

.fdb-aviso-fisico__cta {
    margin: 0;
    font-size: 0.91rem;
    color: #2d3d5a;
}

.fdb-aviso-fisico__link-correo {
    background: none;
    border: none;
    padding: 0;
    color: #0033A0;
    font-weight: 700;
    font-size: 0.91rem;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.fdb-aviso-fisico__link-correo:hover {
    color: #001f6b;
}

/* Hint bajo campo opcional */
.fdb-campo-hint {
    display: block;
    font-size: 0.82rem;
    color: #6b7a99;
    margin-top: 0.3rem;
    line-height: 1.4;
}

/* ══════════════════════════════════════════════════
   ACTO ADMINISTRATIVO — campo estructurado en 3 partes
   ══════════════════════════════════════════════════ */
.acto-admin-campos {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.acto-admin-campos__grupo {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.acto-admin-campos__label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #555;
}

.acto-admin-campos__sep {
    font-size: 1.3rem;
    font-weight: 700;
    color: #0033A0;
    padding-bottom: 0.35rem;
    user-select: none;
}

/* Preview del código completo */
.acto-admin-preview {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.75rem;
    background: #eef4fb;
    border: 1.5px solid #0033A0;
    border-radius: 8px;
    padding: 0.45rem 1rem;
}

.acto-admin-preview__label {
    font-size: 0.82rem;
    color: #555;
    font-weight: 600;
}

.acto-admin-preview__valor {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1rem;
    font-weight: 700;
    color: #0033A0;
    letter-spacing: 0.04em;
}