/* ============================================================
   Protesta Ciudadana — Sistema visual institucional
   Paleta: azul marino institucional + bronce/dorado
   Tipografía: serif de autoridad (encabezados) + sans de lectura (cuerpo)
   ============================================================ */

.pco-contenedor {
    --pco-marino:        #6d1f2b;
    --pco-marino-oscuro:  #4f1520;
    --pco-bronce:        #a9813f;
    --pco-bronce-claro:  #c9a768;
    --pco-pergamino:     #f3ead9;
    --pco-papel:         #fffdf9;
    --pco-tinta:         #2b2420;
    --pco-tinta-suave:   #6b5f52;
    --pco-linea:         #e3d5bb;
    --pco-exito:         #3f6b4e;
    --pco-exito-fondo:   #eef4ee;
    --pco-error:         #b5502e;
    --pco-error-fondo:   #f8ece5;

    --pco-serif: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', serif;
    --pco-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    max-width: 760px;
    margin: 0 auto;
    font-family: var(--pco-sans);
    color: var(--pco-tinta);
}

/* ---------- Encabezado institucional ---------- */

.pco-encabezado {
    text-align: center;
    padding: 6px 20px 26px;
}

.pco-eyebrow {
    font-family: var(--pco-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--pco-tinta-suave);
    margin: 0 0 6px;
}

.pco-titulo-principal {
    font-family: var(--pco-serif);
    font-size: 30px;
    font-weight: 700;
    color: var(--pco-marino);
    margin: 0 0 8px;
    letter-spacing: 0.01em;
}

.pco-subtitulo {
    font-family: var(--pco-serif);
    font-style: italic;
    font-size: 15px;
    color: var(--pco-tinta-suave);
    margin: 0 0 16px;
}

.pco-doble-linea {
    width: 120px;
    height: 6px;
    margin: 0 auto;
    background-image:
        linear-gradient(var(--pco-bronce), var(--pco-bronce)),
        linear-gradient(var(--pco-bronce), var(--pco-bronce));
    background-size: 100% 1px;
    background-position: top, bottom;
    background-repeat: no-repeat;
}

/* ---------- Tarjeta del formulario ---------- */

.pco-formulario {
    background: var(--pco-papel);
    border: 1px solid var(--pco-linea);
    border-top: 4px solid var(--pco-marino);
    box-shadow: 0 1px 3px rgba(20, 36, 65, 0.06), 0 12px 32px -16px rgba(20, 36, 65, 0.18);
    padding: 40px 44px;
}

@media (max-width: 640px) {
    .pco-formulario {
        padding: 26px 20px;
    }
    .pco-titulo-principal {
        font-size: 24px;
    }
}

/* ---------- Secciones numeradas (placa institucional) ---------- */

.pco-seccion-titulo {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 34px 0 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--pco-linea);
}

.pco-formulario > .pco-seccion-titulo:first-of-type {
    margin-top: 0;
}

.pco-seccion-numero {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    margin-right: 6px;
    border: 1px solid var(--pco-bronce);
    color: var(--pco-bronce);
    font-family: var(--pco-serif);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pco-seccion-texto {
    font-family: var(--pco-serif);
    font-size: 18px;
    font-weight: 700;
    color: var(--pco-marino);
    letter-spacing: 0.01em;
}

/* ---------- Campos ---------- */

.pco-campo {
    margin-bottom: 20px;
    flex: 1;
}

.pco-fila {
    display: flex;
    gap: 20px;
}

@media (max-width: 640px) {
    .pco-fila {
        flex-direction: column;
        gap: 0;
    }
}

.pco-campo label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--pco-tinta-suave);
    margin-bottom: 7px;
}

.pco-campo label.pco-pregunta {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    color: var(--pco-tinta);
    margin-bottom: 10px;
}

.pco-campo input[type="text"],
.pco-campo input[type="email"],
.pco-campo input[type="tel"],
.pco-campo input[type="date"],
.pco-campo input[type="file"],
.pco-campo textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid #cdc7b8;
    background: var(--pco-pergamino);
    font-family: var(--pco-sans);
    font-size: 15px;
    color: var(--pco-tinta);
    box-sizing: border-box;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.pco-campo textarea {
    resize: vertical;
    font-family: var(--pco-sans);
}

.pco-campo input:focus,
.pco-campo textarea:focus {
    outline: none;
    border-color: var(--pco-bronce);
    background: var(--pco-papel);
    box-shadow: 0 0 0 3px rgba(169, 129, 63, 0.16);
}

.pco-ayuda {
    font-size: 12px;
    color: var(--pco-tinta-suave);
    margin-top: 6px;
    line-height: 1.5;
}

/* ---------- Sí / No como selector formal tipo cédula ---------- */

.pco-opciones-si-no {
    display: flex;
    gap: 12px;
    margin-top: 4px;
}

.pco-opciones-si-no label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1;
    padding: 11px 16px;
    border: 1px solid #cdc7b8;
    background: var(--pco-pergamino);
    font-family: var(--pco-sans);
    font-weight: 600;
    font-size: 14px;
    text-transform: none;
    color: var(--pco-tinta-suave);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.pco-opciones-si-no input[type="radio"] {
    accent-color: var(--pco-marino);
    width: 15px;
    height: 15px;
}

.pco-opciones-si-no label:hover {
    border-color: var(--pco-bronce);
}

.pco-opciones-si-no label:has(input:checked) {
    border-color: var(--pco-marino);
    background: var(--pco-marino);
    color: #fff;
}

.pco-opciones-si-no label:has(input:checked) input[type="radio"] {
    accent-color: #fff;
}

/* ---------- Evidencia ---------- */

.pco-vista-previa {
    margin-top: 12px;
}

.pco-vista-previa img {
    max-width: 160px;
    max-height: 160px;
    border: 1px solid var(--pco-linea);
    display: block;
}

.pco-vista-previa .pco-archivo-nombre {
    font-size: 13px;
    color: var(--pco-tinta);
    background: var(--pco-pergamino);
    border: 1px solid var(--pco-linea);
    padding: 7px 12px;
    display: inline-block;
}

/* ---------- Aviso de privacidad ---------- */

.pco-privacidad {
    margin-top: 30px;
    padding: 16px 18px;
    background: var(--pco-pergamino);
    border: 1px solid var(--pco-linea);
}

.pco-privacidad label {
    font-weight: 400;
    text-transform: none;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--pco-tinta-suave);
    letter-spacing: normal;
}

.pco-privacidad input[type="checkbox"] {
    margin-top: 3px;
    accent-color: var(--pco-marino);
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

/* ---------- Botón de envío ---------- */

.pco-boton {
    display: block;
    width: 100%;
    margin-top: 24px;
    background: var(--pco-marino);
    color: #fff;
    border: 1px solid var(--pco-marino);
    padding: 15px 24px;
    font-family: var(--pco-sans);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

.pco-boton:hover {
    background: var(--pco-marino-oscuro);
    border-color: var(--pco-marino-oscuro);
}

.pco-boton:disabled {
    background: #8b93a3;
    border-color: #8b93a3;
    cursor: not-allowed;
}

.pco-cargando {
    text-align: center;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--pco-tinta-suave);
    margin-top: 12px;
}

.pco-pie-legal {
    text-align: center;
    font-family: var(--pco-serif);
    font-style: italic;
    font-size: 12px;
    color: var(--pco-tinta-suave);
    margin-top: 22px;
    line-height: 1.6;
}

/* ---------- Alertas ---------- */

.pco-alerta {
    padding: 16px 20px;
    border-left: 3px solid;
    margin-bottom: 24px;
    font-size: 14px;
    line-height: 1.6;
}

.pco-alerta p {
    margin: 0 0 6px;
}

.pco-alerta p:last-child {
    margin-bottom: 0;
}

.pco-alerta-exito {
    background: var(--pco-exito-fondo);
    border-color: var(--pco-exito);
    color: #274a34;
}

.pco-alerta-error {
    background: var(--pco-error-fondo);
    border-color: var(--pco-error);
    color: #6e2a24;
}

.pco-campo-error {
    border-color: var(--pco-error) !important;
    background: #fdf4f3 !important;
}