/* =============================================================================
   Tema naranja (prueba): colores del logo "logo_naranja.png", pensado sobre fondo blanco.
     Terracota  #C9643F → #DE8763  (ícono y "ia" del logotipo)
     Carbón     #1F1E1D            (texto "Inerc")
     Gris       #7A7670            (texto "COMPANY")
     Blanco     #FFFFFF            (fondo del logo)
   Solo se activa con <body class="tema-naranja">: redefine las variables de apis.css,
   así que el resto de la plataforma no cambia.
============================================================================= */
body.tema-naranja {
    --pizarra-950: #161514;
    --pizarra-900: #1f1e1d;
    --pizarra-800: #2f2c29;
    --pizarra-700: #4a4540;
    --pizarra-500: #7a7670;
    --pizarra-300: #dcd7cf;
    --pizarra-100: #f4f2ee;
    --pizarra-50: #faf9f7;
    --esmeralda: #c9643f;
    --esmeralda-oscuro: #a84d2c;
    --cian: #de8763;
    --cian-oscuro: #b3532f;
    --degradado: linear-gradient(135deg, #c9643f 0%, #de8763 100%);
    --degradado-suave: linear-gradient(135deg, rgba(201,100,63,.10) 0%, rgba(222,135,99,.10) 100%);
    --texto: #1f1e1d;
    --texto-suave: #6f6a63;
    --borde: #ebe7e1;
    --fondo-alterno: #ffffff;
    --sombra: 0 1px 2px rgba(31,30,29,.05), 0 8px 24px rgba(31,30,29,.06);
    --sombra-alta: 0 20px 50px rgba(201,100,63,.18);
    background: #ffffff;
}

/* Encabezado blanco, como el fondo del logo. El logotipo incluye "COMPANY", por eso es más alto. */
.tema-naranja .encabezado { background: rgba(255,255,255,.96); }
.tema-naranja .logo img { height: 40px; }

/* Botones: texto blanco sobre terracota, como el Σ del ícono. */
.tema-naranja .btn-principal { color: #ffffff; box-shadow: 0 8px 22px rgba(201,100,63,.30); }
.tema-naranja .btn-principal:hover { box-shadow: 0 12px 28px rgba(201,100,63,.40); }
.tema-naranja .campo:focus { box-shadow: 0 0 0 3px rgba(201,100,63,.18); }

/* Portada clara: foto (img/banner.jpg) con el color de la portada encima en transparencia,
   un resplandor terracota suave y texto carbón. */
.tema-naranja .portada {
    background:
        radial-gradient(900px 380px at 85% -10%, rgba(222,135,99,.34), transparent),
        radial-gradient(700px 360px at 0% 0%, rgba(201,100,63,.20), transparent),
        linear-gradient(90deg, rgba(248,239,233,.86) 0%, rgba(248,239,233,.70) 45%, rgba(248,239,233,.42) 100%),
        url("../img/banner.jpg") center 35% / cover no-repeat,
        #f8efe9;
    color: var(--texto);
    border-bottom: 1px solid var(--borde);
}
.tema-naranja .portada h1 { color: var(--pizarra-900); }
.tema-naranja .portada p { color: var(--texto-suave); }
.tema-naranja .portada .btn-claro { background: #ffffff; color: var(--pizarra-900); border-color: var(--borde); }
.tema-naranja .insignia { background: rgba(201,100,63,.10); color: var(--esmeralda-oscuro); border-color: rgba(201,100,63,.25); }
.tema-naranja .portada { padding-top: 4rem; }
.tema-naranja .portada h1 { font-size: clamp(2.1rem, 4.4vw, 3.3rem); }
.tema-naranja .portada-ventajas { color: var(--pizarra-700); }

/* Ventana de código en carbón (el color del texto "Inerc") con resaltado cálido. */
.tema-naranja .ventana-codigo { background: #1f1e1d; box-shadow: 0 30px 60px -24px rgba(31,30,29,.45), 0 0 0 1px rgba(31,30,29,.06); }
.tema-naranja .ventana-ruta { color: #d6d0c7; }
.tema-naranja .metodo-chip { background: var(--cian); color: #1f1e1d; }
.tema-naranja .ventana-cuerpo { color: #ede9e3; }
.tema-naranja .c-clave { color: #f0a988; }
.tema-naranja .c-texto { color: #e9d8a6; }
.tema-naranja .c-numero { color: #9fd3c7; }
.tema-naranja .ventana-respuesta { background: rgba(222,135,99,.12); color: #ede9e3; }
.tema-naranja .respuesta-total { color: #d6d0c7; }

/* Franja de cifras sobre fondo claro */
.tema-naranja .portada-cifras { border-top-color: var(--borde); }
.tema-naranja .portada-cifras strong { color: var(--esmeralda-oscuro); }
.tema-naranja .portada-cifras span { color: var(--texto-suave); }

/* Secciones alternas en gris cálido muy claro para separarlas del blanco. */
.tema-naranja main > .seccion:nth-of-type(odd) { background: var(--pizarra-50); }

/* Ícono de la API con el mismo estilo que el ícono del logo. */
.tema-naranja .icono-api { background: var(--degradado); }
.tema-naranja .icono-api i { background: none; -webkit-background-clip: initial; background-clip: initial; color: #ffffff; }
.tema-naranja .paso .numero { color: #ffffff; }

/* Planes */
.tema-naranja .plan.destacado { border-color: var(--esmeralda); }
.tema-naranja .plan .cinta { color: #ffffff; }
.tema-naranja .plan li i { color: var(--esmeralda); }
.tema-naranja .plan .precio { color: var(--esmeralda-oscuro); }
.tema-naranja .aviso.info { background: #fdf3ee; color: #8a3d22; border-color: #f2cdbd; }

/* Insignias "cian" (entorno Pruebas, Observado, En revisión) en terracota claro. */
.tema-naranja .estado.cian { background: #fdf3ee; color: #8a3d22; }

/* Pie claro: el logotipo tiene texto oscuro y no se leería sobre fondo carbón. */
.tema-naranja .pie { background: var(--pizarra-50); color: var(--pizarra-700); border-top: 1px solid var(--borde); }
.tema-naranja .pie a { color: var(--pizarra-700); }
.tema-naranja .pie a:hover { color: var(--esmeralda-oscuro); }