/* ============================================================
   CERCA — REPORTAR V2.1
   ESTILO VISUAL UNIFICADO CON INICIO
   ============================================================ */


/* ============================================================
   VARIABLES
   ============================================================ */

#view-reportar {

    --cr2-primary: #22d3ee;
    --cr2-primary-2: #38bdf8;

    --cr2-primary-soft:
        rgba(34, 211, 238, .10);

    --cr2-primary-soft-2:
        rgba(56, 189, 248, .06);

    --cr2-green: #22c55e;

    --cr2-border:
        rgba(148, 163, 184, .12);

    --cr2-border-strong:
        rgba(148, 163, 184, .20);

    --cr2-card:
        rgba(15, 23, 42, .68);

    --cr2-card-deep:
        rgba(8, 15, 30, .72);

    --cr2-text-soft:
        #94a3b8;
}


/* ============================================================
   VISTA
   ============================================================ */

#view-reportar {

    background:

        radial-gradient(
            circle at 100% 0%,
            rgba(34, 211, 238, .055),
            transparent 30%
        ),

        radial-gradient(
            circle at 0% 45%,
            rgba(59, 130, 246, .035),
            transparent 32%
        ),

        var(--bg-main);

}


/* ============================================================
   SCROLL
   ============================================================ */

.cr2-scroll {

    width: 100%;

    padding:
        12px
        12px
        calc(
            108px +
            env(safe-area-inset-bottom, 0px)
        );

    overflow-x: hidden;
}


/* ============================================================
   CONTENEDOR
   ============================================================ */

.cr2-shell {

    width: 100%;
    max-width: 680px;

    margin: 0 auto;

    display: flex;
    flex-direction: column;

    gap: 12px;
}


/* ============================================================
   HERO
   ============================================================ */

.cr2-hero {

    position: relative;

    overflow: hidden;

    padding: 17px;

    border:
        1px solid
        rgba(34, 211, 238, .11);

    border-radius: 20px;

    background:

        radial-gradient(
            circle at 92% 0%,
            rgba(34, 211, 238, .10),
            transparent 42%
        ),

        linear-gradient(
            145deg,
            rgba(15, 23, 42, .94),
            rgba(8, 15, 30, .90)
        );

    box-shadow:
        0 14px 38px
        rgba(0, 0, 0, .16);
}


.cr2-hero::after {

    content: '';

    position: absolute;

    width: 150px;
    height: 150px;

    right: -85px;
    bottom: -100px;

    border-radius: 50%;

    background:
        rgba(34, 211, 238, .09);

    pointer-events: none;
}


.cr2-hero-top {

    position: relative;

    z-index: 2;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 12px;
}


.cr2-kicker {

    display: flex;
    align-items: center;

    gap: 6px;

    color:
        var(--cr2-primary);

    font-size: .61rem;
    font-weight: 900;

    letter-spacing: .12em;

    text-transform: uppercase;
}


.cr2-kicker
.material-icons-round {

    font-size: 15px;
}


.cr2-hero h1 {

    margin:
        5px 0
        4px;

    color:
        var(--text-primary);

    font-size: 1.38rem;
    font-weight: 950;

    letter-spacing: -.03em;

    line-height: 1.1;
}


.cr2-hero p {

    max-width: 430px;

    margin: 0;

    color:
        var(--text-secondary);

    font-size: .73rem;

    line-height: 1.45;
}


/* ============================================================
   EN VIVO
   ============================================================ */

.cr2-live {

    flex: none;

    display: flex;
    align-items: center;

    gap: 6px;

    padding:
        6px
        8px;

    border:
        1px solid
        rgba(34, 197, 94, .18);

    border-radius: 999px;

    background:
        rgba(34, 197, 94, .07);

    color: #4ade80;

    font-size: .54rem;
    font-weight: 900;
}


.cr2-live-dot {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        #22c55e;

    box-shadow:
        0 0 0 4px
        rgba(34, 197, 94, .09);

    animation:
        cr2LivePulse
        2.2s
        ease-in-out
        infinite;
}


@keyframes cr2LivePulse {

    0%,
    100% {

        opacity: .72;

        box-shadow:
            0 0 0 3px
            rgba(34, 197, 94, .07);
    }

    50% {

        opacity: 1;

        box-shadow:
            0 0 0 7px
            rgba(34, 197, 94, .025);
    }
}


/* ============================================================
   SECCIONES
   ============================================================ */

.cr2-section {

    position: relative;

    padding: 13px;

    border:
        1px solid
        var(--cr2-border);

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(15, 23, 42, .57),
            rgba(8, 15, 30, .42)
        );

    box-shadow:
        0 8px 26px
        rgba(0, 0, 0, .08);
}


/* ============================================================
   INDICADOR DE PASOS
   ============================================================ */

.cr2-step {

    display: flex;
    align-items: center;

    gap: 9px;

    margin:
        1px
        1px
        10px;
}


.cr2-step-number {

    flex: none;

    width: 26px;
    height: 26px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 9px;

    background:
        rgba(34, 211, 238, .08);

    border:
        1px solid
        rgba(34, 211, 238, .17);

    color:
        var(--cr2-primary);

    font-size: .69rem;
    font-weight: 950;
}


.cr2-step-text {

    min-width: 0;
}


.cr2-step-text strong {

    display: block;

    color:
        var(--text-primary);

    font-size: .80rem;
    font-weight: 900;
}


.cr2-step-text small {

    display: block;

    margin-top: 1px;

    color:
        var(--text-secondary);

    font-size: .59rem;

    line-height: 1.3;
}


/* ============================================================
   ¿QUÉ OCURRIÓ?
   GRID COMPACTO 3 x 3
   ============================================================ */

.cr2-category-grid {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 7px;
}


/* ============================================================
   TARJETA DE CATEGORÍA
   ============================================================ */

.cr2-cat {

    position: relative;

    min-width: 0;

    min-height: 76px;

    padding:
        9px
        5px
        8px;

    border:
        1px solid
        rgba(148, 163, 184, .11);

    border-radius: 13px;

    background:
        rgba(255, 255, 255, .022);

    color:
        var(--text-primary);

    cursor: pointer;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 5px;

    text-align: center;

    transition:
        transform .16s ease,
        border-color .16s ease,
        background .16s ease,
        box-shadow .16s ease;
}


.cr2-cat:active {

    transform:
        scale(.96);
}


/* ============================================================
   ICONO
   ============================================================ */

.cr2-cat-icon {

    flex: none;

    width: 35px;
    height: 35px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 11px;

    background:
        rgba(148, 163, 184, .055);

    color:
        #cbd5e1;
}


.cr2-cat-icon
.material-icons-round {

    font-size: 20px;
}


/* ============================================================
   TEXTO
   ============================================================ */

.cr2-cat-info {

    width: 100%;

    min-width: 0;
}


.cr2-cat-info strong {

    display: block;

    overflow: hidden;

    color:
        var(--text-primary);

    font-size: .61rem;
    font-weight: 850;

    line-height: 1.15;

    white-space: nowrap;

    text-overflow: ellipsis;
}


/*
   Ocultamos las explicaciones debajo.
   Así se sienten como las tarjetas pequeñas de Inicio.
*/

.cr2-cat-info small {

    display: none;
}


/* ============================================================
   COLORES DE CATEGORÍAS
   SOLO ICONO / ACENTO
   ============================================================ */


/* ACCIDENTE */

.cr2-cat.accidente
.cr2-cat-icon {

    color:
        #fb7185;

    background:
        rgba(239, 68, 68, .075);
}


/* TRÁFICO */

.cr2-cat.trafico
.cr2-cat-icon {

    color:
        #fbbf24;

    background:
        rgba(245, 158, 11, .075);
}


/* SEGURIDAD */

.cr2-cat.seguridad
.cr2-cat-icon {

    color:
        #a78bfa;

    background:
        rgba(139, 92, 246, .08);
}


/* EMERGENCIA */

.cr2-cat.emergencia
.cr2-cat-icon {

    color:
        #f87171;

    background:
        rgba(220, 38, 38, .075);
}


/* INUNDACIÓN */

.cr2-cat.inundacion
.cr2-cat-icon {

    color:
        #38bdf8;

    background:
        rgba(2, 132, 199, .08);
}


/* CLIMA */

.cr2-cat.clima
.cr2-cat-icon {

    color:
        #7dd3fc;

    background:
        rgba(56, 189, 248, .075);
}


/* AGUA */

.cr2-cat.agua
.cr2-cat-icon {

    color:
        #60a5fa;

    background:
        rgba(37, 99, 235, .075);
}


/* VIALIDAD */

.cr2-cat.vialidad
.cr2-cat-icon {

    color:
        #fb923c;

    background:
        rgba(249, 115, 22, .075);
}


/* MOVILIDAD */

.cr2-cat.movilidad
.cr2-cat-icon {

    color:
        #22d3ee;

    background:
        rgba(14, 165, 233, .075);
}


/* ============================================================
   CATEGORÍA ACTIVA — ESTILO CERCA
   ============================================================ */

.cr2-cat.active {

    border-color:
        rgba(34, 211, 238, .50);

    background:
        linear-gradient(
            145deg,
            rgba(34, 211, 238, .09),
            rgba(56, 189, 248, .035)
        );

    box-shadow:
        inset 0 0 0 1px
        rgba(34, 211, 238, .025),
        0 0 18px
        rgba(34, 211, 238, .055);
}


.cr2-cat.active::after {

    content:'✓';

    position: absolute;

    top: 5px;
    right: 5px;

    width: 15px;
    height: 15px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        var(--cr2-primary);

    color:
        #07111f;

    font-family:Arial,sans-serif;

    font-size: 11px;
}


/* ============================================================
   SUBCATEGORÍAS
   ============================================================ */

.cr2-subtypes {

    margin-top: 11px;

    padding: 10px;

    border:
        1px solid
        rgba(148, 163, 184, .10);

    border-radius: 13px;

    background:
        rgba(2, 6, 23, .16);
}


.cr2-subtype-head {

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-bottom: 8px;
}


.cr2-subtype-head strong {

    display: block;

    color:
        var(--text-primary);

    font-size: .70rem;
}


.cr2-subtype-head small {

    display: block;

    margin-top: 2px;

    color:
        var(--text-secondary);

    font-size: .55rem;
}


.cr2-subtype-head
.material-icons-round {

    color:
        var(--cr2-primary);

    font-size: 20px;
}


.cr2-subtype-options {

    display: flex;

    gap: 6px;

    overflow-x: auto;

    padding-bottom: 2px;

    scrollbar-width: none;
}


.cr2-subtype-options::-webkit-scrollbar {

    display: none;
}


.report-subtype-chip {

    flex: none;

    min-height: 32px;

    padding:
        0 11px;

    border:
        1px solid
        var(--cr2-border);

    border-radius: 999px;

    background:
        rgba(255, 255, 255, .025);

    color:
        var(--text-secondary);

    font-size: .61rem;
    font-weight: 800;

    white-space: nowrap;

    cursor: pointer;

    transition:
        .16s ease;
}


.report-subtype-chip.active {

    border-color:
        rgba(34, 211, 238, .36);

    background:
        rgba(34, 211, 238, .09);

    color:
        #67e8f9;
}


/* ============================================================
   CAMPOS
   ============================================================ */

.cr2-field {

    position: relative;

    width: 100%;
}


.cr2-label {

    display: flex;
    align-items: center;

    gap: 6px;

    margin-bottom: 7px;

    color:
        var(--text-primary);

    font-size: .66rem;
    font-weight: 850;
}


.cr2-label
.material-icons-round {

    color:
        var(--cr2-primary);

    font-size: 17px;
}


/* ============================================================
   UBICACIÓN
   ============================================================ */

.cr2-location-box {

    position: relative;

    display: grid;

    grid-template-columns:
        35px
        minmax(0, 1fr)
        41px;

    align-items: center;

    min-height: 51px;

    padding:
        0 5px
        0 7px;

    border:
        1px solid
        var(--cr2-border-strong);

    border-radius: 14px;

    background:
        rgba(255, 255, 255, .025);

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}


.cr2-location-box:focus-within {

    border-color:
        rgba(34, 211, 238, .42);

    background:
        rgba(34, 211, 238, .025);

    box-shadow:
        0 0 0 3px
        rgba(34, 211, 238, .04);
}


.cr2-location-icon {

    display: flex;
    align-items: center;
    justify-content: center;

    color:
        var(--cr2-primary);
}


.cr2-location-icon
.material-icons-round {

    font-size: 20px;
}


#reportLocation {

    width: 100%;

    min-width: 0;

    border: 0;
    outline: none;

    padding:
        13px 4px;

    background:
        transparent;

    color:
        var(--text-primary);

    font-size: .73rem;

    line-height: 1.25;
}


#reportLocation::placeholder {

    color:
        var(--text-secondary);

    opacity: .70;
}


/* ============================================================
   GPS
   ============================================================ */

#btnGPS {

    width: 37px;
    height: 37px;

    border:
        1px solid
        rgba(34, 211, 238, .15);

    border-radius: 11px;

    background:
        rgba(34, 211, 238, .075);

    color:
        var(--cr2-primary);

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    transition:
        transform .16s ease,
        background .16s ease;
}


#btnGPS:active {

    transform:
        scale(.94);
}


#btnGPS
.material-icons-round {

    font-size: 19px;
}


/* ============================================================
   ESTADO UBICACIÓN
   ============================================================ */

.cr2-location-status {

    display: flex;
    align-items: center;

    gap: 5px;

    min-height: 18px;

    margin:
        5px
        4px
        0;

    color:
        var(--text-secondary);

    font-size: .56rem;

    line-height: 1.3;
}


.cr2-location-status::before {

    content:'●';

    font-family:Arial,sans-serif;

    color:
        var(--cr2-primary);

    font-size: 13px;
}


/* ============================================================
   AYUDA UBICACIÓN
   ============================================================ */

.cr2-location-help {

    display: flex;
    align-items: flex-start;

    gap: 7px;

    margin-top: 8px;

    padding:
        8px
        9px;

    border:
        1px solid
        rgba(34, 211, 238, .09);

    border-radius: 11px;

    background:
        rgba(34, 211, 238, .035);

    color:
        var(--text-secondary);

    font-size: .57rem;

    line-height: 1.4;
}


.cr2-location-help
.material-icons-round {

    flex: none;

    color:
        var(--cr2-primary);

    font-size: 15px;
}


/* ============================================================
   DESCRIPCIÓN
   ============================================================ */

#reportDesc {

    display: block;

    width: 100%;

    min-height: 112px;
    max-height: 230px;

    resize: vertical;

    padding: 11px;

    border:
        1px solid
        var(--cr2-border-strong);

    border-radius: 14px;

    outline: 0;

    background:
        rgba(255, 255, 255, .025);

    color:
        var(--text-primary);

    font: inherit;

    font-size: .72rem;

    line-height: 1.45;

    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}


#reportDesc:focus {

    border-color:
        rgba(34, 211, 238, .40);

    box-shadow:
        0 0 0 3px
        rgba(34, 211, 238, .04);
}


#reportDesc::placeholder {

    color:
        var(--text-secondary);

    opacity: .67;
}


/* ============================================================
   AYUDA INTELIGENTE
   ============================================================ */

.cr2-smart-help {

    display: flex;
    align-items: flex-start;

    gap: 7px;

    margin-top: 7px;

    padding:
        8px
        9px;

    border-radius: 11px;

    background:
        rgba(34, 211, 238, .035);

    border:
        1px solid
        rgba(34, 211, 238, .09);

    color:
        var(--text-secondary);

    font-size: .57rem;

    line-height: 1.4;
}


.cr2-smart-help
.material-icons-round {

    flex: none;

    color:
        var(--cr2-primary);

    font-size: 15px;
}


/* ============================================================
   FOTOGRAFÍA
   ============================================================ */

.cr2-photo-box {

    overflow: hidden;

    border:
        1px dashed
        rgba(148, 163, 184, .20);

    border-radius: 15px;

    background:
        rgba(255, 255, 255, .018);
}


.cr2-photo-empty {

    padding:
        15px
        11px;

    text-align: center;
}


.cr2-photo-main-icon {

    width: 45px;
    height: 45px;

    margin:
        0 auto
        7px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 14px;

    background:
        rgba(34, 211, 238, .065);

    color:
        var(--cr2-primary);
}


.cr2-photo-main-icon
.material-icons-round {

    font-size: 24px;
}


.cr2-photo-empty strong {

    display: block;

    color:
        var(--text-primary);

    font-size: .71rem;
}


.cr2-photo-empty p {

    margin:
        3px 0
        11px;

    color:
        var(--text-secondary);

    font-size: .56rem;
}


/* ============================================================
   FOTO — BOTONES
   ============================================================ */

.cr2-photo-actions {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 7px;
}


.cr2-photo-btn {

    min-height: 39px;

    border:
        1px solid
        var(--cr2-border);

    border-radius: 11px;

    background:
        rgba(255, 255, 255, .025);

    color:
        var(--text-primary);

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 6px;

    font-size: .63rem;
    font-weight: 850;

    cursor: pointer;
}


.cr2-photo-btn.primary {

    border-color:
        rgba(34, 211, 238, .18);

    background:
        rgba(34, 211, 238, .075);

    color:
        #67e8f9;
}


.cr2-photo-btn
.material-icons-round {

    font-size: 17px;
}


/* ============================================================
   PREVIEW
   ============================================================ */

#photoPreviewContainer {

    position: relative;

    width: 100%;
}


#photoPreview {

    display: block;

    width: 100%;
    max-height: 240px;

    object-fit: cover;
}


#btnRemovePhoto {

    position: absolute;

    top: 8px;
    right: 8px;

    width: 34px;
    height: 34px;

    border:
        1px solid
        rgba(255, 255, 255, .11);

    border-radius: 11px;

    background:
        rgba(8, 15, 30, .90);

    color:
        #ffffff;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
}


/* ============================================================
   ANÓNIMO
   ============================================================ */

.cr2-anonymous {

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 11px;

    padding: 11px;

    border:
        1px solid
        var(--cr2-border);

    border-radius: 14px;

    background:
        rgba(255, 255, 255, .020);
}


.cr2-anonymous-info {

    display: flex;
    align-items: center;

    gap: 9px;

    min-width: 0;
}


.cr2-anonymous-icon {

    flex: none;

    width: 37px;
    height: 37px;

    border-radius: 11px;

    background:
        rgba(34, 211, 238, .065);

    color:
        var(--cr2-primary);

    display: flex;
    align-items: center;
    justify-content: center;
}


.cr2-anonymous-icon
.material-icons-round {

    font-size: 19px;
}


.cr2-anonymous strong {

    display: block;

    color:
        var(--text-primary);

    font-size: .68rem;
}


.cr2-anonymous small {

    display: block;

    margin-top: 2px;

    color:
        var(--text-secondary);

    font-size: .54rem;

    line-height: 1.3;
}


/* ============================================================
   SWITCH
   ============================================================ */

.cr2-switch {

    position: relative;

    flex: none;

    width: 43px;
    height: 25px;
}


.cr2-switch input {

    position: absolute;

    opacity: 0;

    pointer-events: none;
}


.cr2-switch-track {

    position: absolute;

    inset: 0;

    border-radius: 999px;

    background:
        rgba(148, 163, 184, .16);

    border:
        1px solid
        rgba(148, 163, 184, .17);

    cursor: pointer;

    transition:
        .18s ease;
}


.cr2-switch-track::after {

    content: '';

    position: absolute;

    width: 19px;
    height: 19px;

    left: 2px;
    top: 2px;

    border-radius: 50%;

    background:
        #cbd5e1;

    box-shadow:
        0 2px 6px
        rgba(0, 0, 0, .22);

    transition:
        transform .18s ease,
        background .18s ease;
}


.cr2-switch
input:checked +
.cr2-switch-track {

    background:
        rgba(34, 211, 238, .22);

    border-color:
        rgba(34, 211, 238, .35);
}


.cr2-switch
input:checked +
.cr2-switch-track::after {

    transform:
        translateX(18px);

    background:
        #67e8f9;
}


/* ============================================================
   AVISOS
   ============================================================ */

.cr2-notice {

    display: flex;
    align-items: flex-start;

    gap: 7px;

    padding:
        8px
        9px;

    border-radius: 11px;

    background:
        rgba(148, 163, 184, .035);

    color:
        var(--text-secondary);

    font-size: .55rem;

    line-height: 1.4;
}


.cr2-notice
.material-icons-round {

    flex: none;

    margin-top: 1px;

    color:
        #64748b;

    font-size: 14px;
}


/* ============================================================
   PUBLICAR — AZUL / CYAN CERCA
   ============================================================ */

#btnSendReport {

    position: relative;

    width: 100%;

    min-height: 50px;

    margin-top: 2px;

    overflow: hidden;

    border:
        1px solid
        rgba(34, 211, 238, .23);

    border-radius: 15px;

    background:

        linear-gradient(
            135deg,
            #0891b2,
            #0ea5e9
        );

    color:
        #ffffff;

    box-shadow:
        0 10px 26px
        rgba(14, 165, 233, .15);

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    font-size: .75rem;
    font-weight: 950;

    letter-spacing: .01em;

    transition:
        transform .16s ease,
        opacity .16s ease,
        box-shadow .16s ease;
}


#btnSendReport::after {

    content: '';

    position: absolute;

    width: 75px;
    height: 125px;

    left: -100px;
    top: -40px;

    transform:
        rotate(25deg);

    background:
        rgba(255, 255, 255, .14);

    filter:
        blur(4px);

    transition:
        left .42s ease;
}


#btnSendReport:hover::after {

    left:
        calc(100% + 50px);
}


#btnSendReport:active {

    transform:
        scale(.985);
}


#btnSendReport:disabled {

    opacity: .52;

    cursor: wait;

    box-shadow: none;
}


#btnSendReport
.material-icons-round {

    font-size: 19px;
}


/* ============================================================
   LIGHT THEME
   ============================================================ */

body.light-theme
#view-reportar {

    --cr2-border:
        rgba(15, 23, 42, .08);

    --cr2-border-strong:
        rgba(15, 23, 42, .13);
}


body.light-theme
.cr2-hero {

    background:

        radial-gradient(
            circle at 90% 0%,
            rgba(34, 211, 238, .11),
            transparent 42%
        ),

        rgba(255, 255, 255, .94);

    box-shadow:
        0 12px 30px
        rgba(15, 23, 42, .055);
}


body.light-theme
.cr2-section {

    background:
        rgba(255, 255, 255, .80);

    box-shadow:
        0 7px 22px
        rgba(15, 23, 42, .035);
}


body.light-theme
.cr2-cat,

body.light-theme
.cr2-location-box,

body.light-theme
#reportDesc,

body.light-theme
.cr2-anonymous {

    background:
        rgba(248, 250, 252, .85);
}


body.light-theme
.cr2-subtypes {

    background:
        rgba(15, 23, 42, .022);
}


/* ============================================================
   TABLET / DESKTOP
   ============================================================ */

@media (min-width: 650px) {

    .cr2-category-grid {

        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }


    .cr2-cat {

        min-height: 80px;
    }

}


/* ============================================================
   MÓVIL
   ============================================================ */

@media (max-width: 520px) {

    .cr2-scroll {

        padding:
            9px
            9px
            calc(
                106px +
                env(safe-area-inset-bottom, 0px)
            );
    }


    .cr2-shell {

        gap: 10px;
    }


    .cr2-hero {

        padding: 14px;

        border-radius: 17px;
    }


    .cr2-hero h1 {

        font-size: 1.22rem;
    }


    .cr2-hero p {

        font-size: .68rem;
    }


    .cr2-section {

        padding: 11px;

        border-radius: 16px;
    }


    /* 3 POR FILA TAMBIÉN EN MÓVIL */

    .cr2-category-grid {

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 6px;
    }


    .cr2-cat {

        min-height: 72px;

        padding:
            8px
            3px
            7px;

        border-radius: 12px;

        gap: 5px;
    }


    .cr2-cat-icon {

        width: 33px;
        height: 33px;

        border-radius: 10px;
    }


    .cr2-cat-icon
    .material-icons-round {

        font-size: 19px;
    }


    .cr2-cat-info strong {

        font-size: .57rem;
    }


    .cr2-live {

        padding:
            5px
            7px;

        font-size: .51rem;
    }

}


/* ============================================================
   PANTALLAS MUY PEQUEÑAS
   ============================================================ */

@media (max-width: 360px) {

    /*
       Seguimos conservando 3 columnas.
       Solo reducimos un poco las tarjetas.
    */

    .cr2-category-grid {

        gap: 5px;
    }


    .cr2-cat {

        min-height: 68px;

        padding:
            7px
            2px;
    }


    .cr2-cat-icon {

        width: 31px;
        height: 31px;
    }


    .cr2-cat-info strong {

        font-size: .53rem;
    }


    .cr2-hero-top {

        gap: 7px;
    }

}


/* ============================================================
   ACCESIBILIDAD
   ============================================================ */

.cr2-cat:focus-visible,
.report-subtype-chip:focus-visible,
#btnGPS:focus-visible,
.cr2-photo-btn:focus-visible,
#btnSendReport:focus-visible {

    outline:
        2px solid
        rgba(34, 211, 238, .65);

    outline-offset:
        2px;
}


@media (
    prefers-reduced-motion:
    reduce
) {

    .cr2-live-dot {

        animation:
            none;
    }


    .cr2-cat,
    #btnGPS,
    #btnSendReport,
    #btnSendReport::after {

        transition:
            none;
    }

}


/* ============================================================
   FIN — CERCA REPORTAR V2.1
   ============================================================ */