/*
 * HC_KIT_V1 — «Kit del anfitrión».
 *
 * Móvil primero: esta página se lee con el teléfono en una mano y la app de
 * Instagram en la otra. Fondo oscuro fijo, como el resto del frente del sitio
 * (nada de prefers-color-scheme: en modo claro salía texto oscuro sobre oscuro).
 */

.hc-kit {
    width: min(980px, 100% - 8px);
    margin: 0 auto;
    color: #d8d2c6;
    font-size: 15px;
}

.hc-kit-hero {
    padding: 20px 18px;
    margin-bottom: 18px;
    border-radius: 16px;
    border: 1px solid rgba(226, 196, 142, .4);
    background: rgba(26, 31, 36, .92);
}

.hc-kit-hero h2 {
    margin: 0 0 8px;
    color: #E2C48E;
    font-size: 24px;
}

.hc-kit-hero p {
    margin: 0;
    line-height: 1.55;
    opacity: .88;
}

.hc-kit-sec {
    margin: 0 0 20px;
    padding: 18px;
    border-radius: 16px;
    border: 1px solid rgba(226, 196, 142, .28);
    background: rgba(26, 31, 36, .8);
}

.hc-kit-sec h3 {
    margin: 0 0 12px;
    color: #E2C48E;
    font-size: 19px;
}

.hc-kit-h4 {
    margin: 20px 0 10px;
    font-size: 16px;
    color: #E2C48E;
}

.hc-kit-intro {
    margin: 0 0 14px;
    line-height: 1.5;
    opacity: .85;
}

/* ── Campo copiable ───────────────────────────────────────────────────── */

.hc-kit-campo {
    margin: 0 0 14px;
    padding: 12px 13px;
    border-radius: 12px;
    background: rgba(11, 16, 20, .55);
    border: 1px solid rgba(226, 196, 142, .2);
}

.hc-kit-campo-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 7px;
    font-size: 14px;
    /* 30-09-2026: con un rótulo de palabra larga («Политика конфиденциальности») el botón «Copiar» se salía de la
       tarjeta en el teléfono; ahora baja a la línea siguiente. */
    flex-wrap: wrap;
}

/* 30-09-2026: un botón-enlace largo («Перейти к вставке идентификаторов») no partía la línea y se salía de la tarjeta:
   la página entera ganaba 10 px de ancho en el teléfono. Dentro del kit los botones parten la línea. */
.hc-kit .lc-btn,
.hc-kit .hc-kit-gen {
    white-space: normal;
    max-width: 100%;
    height: auto;
    text-align: center;
    box-sizing: border-box;
}

.hc-kit-campo-cab > strong {
    min-width: 0;
    overflow-wrap: break-word;
}

/*
 * ⚠️ LOS BOTONES SE ESCRIBEN CON COLORES EXPLÍCITOS Y CON `!important`.
 *
 * No es dejadez: es la lección de la sesión 56h. El tema del sitio lleva un
 * reset de `button` más específico que una clase suelta, así que un botón
 * definido solo por su clase sale BLANCO del navegador — que es exactamente lo
 * que pasó aquí sobre el fondo oscuro. Por eso:
 *   · `appearance:none` (quita el aspecto nativo del sistema);
 *   · colores literales, nada de var() sin valor de reserva — una variable sin
 *     resolver devuelve el botón al blanco del navegador;
 *   · `button.clase` + `!important`, para ganarle al reset del tema sin
 *     depender de dónde esté colgado el bloque.
 */
button.hc-kit-btn-mini,
button.hc-copiar {
    flex: 0 0 auto;
    appearance: none;
    -webkit-appearance: none;
    padding: 5px 14px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    border-radius: 999px !important;
    border: 1px solid rgba(226, 196, 142, .55) !important;
    background: rgba(226, 196, 142, .12) !important;
    color: #E2C48E !important;
    box-shadow: none !important;
    text-shadow: none;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}


/* Los botones que generan imágenes: mismo lenguaje, algo más grandes. */
button.hc-kit-gen {
    appearance: none;
    -webkit-appearance: none;
    padding: 8px 16px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(226, 196, 142, .5) !important;
    background: rgba(226, 196, 142, .1) !important;
    color: #E2C48E !important;
    box-shadow: none !important;
    cursor: pointer;
}


/* El botón de guardar el progreso: es el principal, va en oro macizo. */
.hc-kit button[type="submit"] {
    appearance: none;
    -webkit-appearance: none;
    padding: 10px 22px !important;
    border-radius: 999px !important;
    border: none !important;
    background: linear-gradient(180deg, #EED2A0, #D9AF66) !important;
    color: #1a1f24 !important;
    font-weight: 700;
    box-shadow: none !important;
    cursor: pointer;
}

/* El enlace-botón «Descargar» de cada imagen generada. */
.hc-kit-res a.hc-kit-btn-mini {
    display: inline-block;
    text-align: center;
    text-decoration: none;
}

.hc-kit-valor {
    width: 100%;
    padding: 9px 11px;
    border-radius: 9px;
    border: 1px solid #6a6052;
    background: #1c1a17;
    color: #e6ddcb;
    font: inherit;
    line-height: 1.5;
    resize: vertical;
}

.hc-kit-valor--linea {
    word-break: break-word;
}

.hc-kit-ayuda {
    margin: 7px 0 0;
    font-size: 12.5px;
    line-height: 1.45;
    opacity: .7;
}

.hc-kit-vacio {
    margin: 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .04);
    font-size: 13.5px;
    opacity: .75;
}

/* ── Avisos ───────────────────────────────────────────────────────────── */

.hc-kit-aviso {
    display: flex;
    flex-direction: column;
    gap: 9px;
    align-items: flex-start;
    margin: 0 0 18px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid rgba(226, 196, 142, .5);
    background: rgba(226, 196, 142, .1);
    line-height: 1.5;
}

.hc-kit-aviso--ojo {
    border-color: rgba(220, 160, 90, .6);
    background: rgba(220, 160, 90, .12);
    margin-top: 18px;
    margin-bottom: 0;
}

.hc-kit-pasos {
    margin: 0 0 14px;
    padding: 13px 15px;
    border-radius: 12px;
    background: rgba(11, 16, 20, .5);
    line-height: 1.55;
}

.hc-kit-pasos p {
    margin: 0 0 8px;
}

.hc-kit-pasos ol {
    margin: 0 0 6px;
    padding-left: 20px;
}

.hc-kit-pasos li {
    margin-bottom: 6px;
}

/* ── Progreso ─────────────────────────────────────────────────────────── */

.hc-kit-barra {
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    overflow: hidden;
}

.hc-kit-barra span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #D9AF66, #EED2A0);
    transition: width .4s ease;
}

.hc-kit-barra-txt {
    margin: 7px 0 14px;
    font-size: 13px;
    opacity: .75;
}

.hc-kit-lista {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
}

.hc-kit-lista li {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.hc-kit-lista li:last-child {
    border-bottom: none;
}

.hc-kit-lista label {
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    margin: 0;
}

/*
 * LA CASILLA ESTÁNDAR DEL SITIO (sesión 56n, no re-abrir): caja NEGRA, borde
 * dorado, check BLANCO. Con `appearance:none`, NUNCA con `accent-color`.
 *
 * `accent-color` solo tiñe la casilla del sistema operativo: sobre fondo negro
 * sigue siendo un cuadrado claro y duro, que es justo lo que se veía aquí. La
 * casilla se dibuja entera.
 */
.hc-kit-lista input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
    margin: 0;
    border: 1px solid rgba(226, 196, 142, .55);
    border-radius: 5px;
    background: #0b1014;
    cursor: pointer;
    position: relative;
    transition: border-color .15s ease;
}

.hc-kit-lista input[type="checkbox"]:hover {
    border-color: #E2C48E;
}

.hc-kit-lista input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 4px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.hc-kit-lista input[type="checkbox"]:focus-visible {
    outline: 2px solid #E2C48E;
    outline-offset: 2px;
}

.hc-kit-auto {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    border-radius: 5px;
    border: 1px solid rgba(226, 196, 142, .45);
    font-size: 12px;
    color: #E2C48E;
}

.hc-kit-lista li.is-ok .hc-kit-lista-txt {
    opacity: .78;
}

.hc-kit-lista-cta {
    margin-left: auto;
    font-size: 13px;
    color: #E2C48E;
}

/* ── Generador de imágenes ────────────────────────────────────────────── */

.hc-kit-imgs {
    margin: 14px 0 0;
    padding: 13px;
    border-radius: 12px;
    border: 1px dashed rgba(226, 196, 142, .35);
}

.hc-kit-select {
    display: block;
    margin-bottom: 11px;
    font-size: 14px;
}

.hc-kit-select > span {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
}

.hc-kit-select select {
    width: 100%;
    padding: 9px 11px;
    border-radius: 9px;
    border: 1px solid #6a6052;
    background: #1c1a17;
    color: #e6ddcb;
    font: inherit;
    appearance: none;
}

.hc-kit-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hc-kit-gen {
    cursor: pointer;
    font-size: 13.5px !important;
}

.hc-kit-gen[disabled] {
    opacity: .6;
    cursor: wait;
}

.hc-kit-salida {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 13px;
}

.hc-kit-salida:empty {
    margin-top: 0;
}

.hc-kit-res {
    display: flex;
    flex-direction: column;
    gap: 7px;
    width: 148px;
    padding: 9px;
    border-radius: 11px;
    background: rgba(11, 16, 20, .6);
    border: 1px solid rgba(226, 196, 142, .25);
}

.hc-kit-res img {
    width: 100%;
    height: 106px;
    object-fit: cover;
    border-radius: 7px;
    background: #0b1014;
}

.hc-kit-res-txt {
    font-size: 12px;
    opacity: .8;
    line-height: 1.3;
}

.hc-kit-res-nota {
    font-size: 11.5px;
    line-height: 1.35;
    color: #e8c78a;
}

.hc-kit-error {
    width: 100%;
    margin: 0;
    padding: 9px 12px;
    border-radius: 10px;
    border: 1px solid rgba(220, 120, 110, .55);
    background: rgba(220, 120, 110, .12);
    font-size: 13.5px;
}

/* ══════════════════════════════════════════════════════════════════════
 * /cobro-verificacion/ — la comprobación para cobrar.
 *
 * Comparte hoja con el kit a propósito (misma pantalla oscura, mismos
 * paneles). Estaba sin una sola regla: el marcado usa clases `hc-cobro-*` y
 * aquí solo había `hc-kit-*`, así que la página salía en crudo del navegador —
 * y es justo la página que se le enseña a alguien a quien le debemos dinero.
 * ════════════════════════════════════════════════════════════════════ */

.hc-cobro {
    width: min(760px, 100% - 8px);
    margin: 0 auto;
    color: #d8d2c6;
    font-size: 15px;
    line-height: 1.55;
}

.hc-cobro-h {
    margin: 0 0 10px;
    color: #E2C48E;
    font-size: 24px;
}

.hc-cobro-intro {
    margin: 0 0 20px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid rgba(226, 196, 142, .3);
    background: rgba(26, 31, 36, .85);
}

/* Cada paso, su tarjeta. Numeradas para que se vea que son dos y solo dos. */
.hc-cobro-paso {
    margin: 0 0 16px;
    padding: 18px;
    border-radius: 16px;
    border: 1px solid rgba(226, 196, 142, .28);
    background: rgba(26, 31, 36, .8);
}

.hc-cobro-paso h3 {
    margin: 0 0 10px;
    font-size: 17px;
    color: #E2C48E;
}

.hc-cobro-paso p {
    margin: 0 0 12px;
}

/* Paso resuelto: borde verde y un punto delante. Se ve de un vistazo qué
   falta todavía, que es lo único que esta persona quiere saber. */
.hc-cobro-paso.is-ok {
    border-color: rgba(120, 190, 130, .5);
    background: rgba(120, 190, 130, .07);
}

.hc-cobro-paso.is-ok h3::before {
    content: "";
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 8px;
    border-radius: 50%;flex-shrink:0;
    background: #78be82;
    vertical-align: middle;
}

.hc-cobro-estado {
    margin: 0;
    font-size: 14px;
    opacity: .85;
}

.hc-cobro-err {
    margin: 0 0 12px;
    padding: 10px 13px;
    border-radius: 11px;
    border: 1px solid rgba(220, 120, 110, .55);
    background: rgba(220, 120, 110, .12);
    font-size: 14px;
}

.hc-cobro-ok-box {
    margin: 0 0 16px;
    padding: 12px 15px;
    border-radius: 12px;
    border: 1px solid rgba(120, 190, 130, .5);
    background: rgba(120, 190, 130, .12);
}

.hc-cobro-fine {
    margin: 20px 0 0;
    font-size: 13px;
    opacity: .75;
}

.hc-cobro-vacio {
    margin: 0;
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .05);
}

/* Botón principal, con la misma defensa que el resto: colores literales y
   `!important`, o el reset de `button` del tema lo devuelve al blanco. */
.hc-cobro button.hc-cobro-btn {
    appearance: none;
    -webkit-appearance: none;
    display: inline-block;
    margin-top: 4px;
    padding: 11px 24px !important;
    border-radius: 999px !important;
    border: none !important;
    background: linear-gradient(180deg, #EED2A0, #D9AF66) !important;
    color: #1a1f24 !important;
    font-weight: 700;
    font-size: 15px !important;
    box-shadow: none !important;
    cursor: pointer;
}

.hc-cobro button.hc-cobro-btn:hover {
    filter: brightness(1.06);
}

/*
 * El selector de archivo. Sin esto sale el «Seleccionar archivo / Ningún
 * archivo seleccionado» gris del navegador, que en una pantalla oscura canta
 * más que ninguna otra cosa. Mismo tratamiento que en el alta de coches.
 */
.hc-cobro input[type="file"] {
    display: block;
    width: 100%;
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 11px;
    border: 1px dashed rgba(226, 196, 142, .45);
    background: rgba(11, 16, 20, .55);
    color: #d8d2c6;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

.hc-cobro input[type="file"]::file-selector-button {
    appearance: none;
    -webkit-appearance: none;
    margin-right: 12px;
    padding: 8px 16px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(180deg, #EED2A0, #D9AF66);
    color: #1a1f24;
    font-weight: 700;
    font-size: 13.5px;
    cursor: pointer;
}

.hc-cobro input[type="file"]::-webkit-file-upload-button {
    appearance: none;
    -webkit-appearance: none;
    margin-right: 12px;
    padding: 8px 16px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(180deg, #EED2A0, #D9AF66);
    color: #1a1f24;
    font-weight: 700;
    font-size: 13.5px;
    cursor: pointer;
}

@media (min-width: 760px) {
    .hc-cobro-paso {
        padding: 22px 24px;
    }

    /* HC_KIT_AVISO_REJILLA_V1 (Agente 3): el título va en su propia fila a todo el ancho y debajo texto + botón.
       En una fila los tres se estrujaban y el título caía a 120px, 3 palabras en 3 líneas (sirena «texto-aplastado»);
       ninguna anchura fija sirve para los 16 idiomas. */
    .hc-kit-aviso {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 16px;
        row-gap: 6px;
        align-items: center;
    }

    .hc-kit-aviso strong {
        grid-column: 1 / -1;
    }

    .hc-kit-aviso span {
        min-width: 0;
    }

    .hc-kit-sec {
        padding: 22px 24px;
    }
}