/*
 * KummaraDS — kds-entrada, kds-campo y kds-opcion (#2003)
 * ============================================================
 * Los campos de la librería, sin Bootstrap. Letra de 16px en el teléfono (con menos,
 * el iPhone agranda la página al tocar el campo), el alto de un botón y un borde que
 * se ve. El foco es un anillo; el error, el borde y el aviso en el color de peligro.
 *
 *   <div class="kds-campo">
 *     <label class="kds-campo__rotulo" for="email">Correo electrónico</label>
 *     <input type="email" id="email" class="kds-entrada" aria-describedby="email-error">
 *     <p class="kds-campo__ayuda">Te mandamos el pedido a este correo.</p>
 *     <p class="kds-campo__error" id="email-error"></p>
 *   </div>
 *
 *   .kds-entrada                  un input o un textarea
 *   .kds-entrada--desplegable     un <select>, con su flechita dibujada (sin imágenes)
 *   .kds-entrada.is-invalid       o aria-invalid="true": el borde en peligro
 *   .kds-campo__error             el aviso del campo; vacío no ocupa lugar
 *   dentro de un .kds-input (el campo con un botón adentro, como «Mostrar la
 *   contraseña»), la caja dibuja el borde y la entrada va sin el suyo.
 *
 *   <label class="kds-opcion"><input type="checkbox" class="kds-opcion__marca"> Recordarme</label>
 *   .kds-opcion__marca            una casilla o un círculo (type="radio"), de 20px
 *
 *   Campos de distinto ancho en una fila (Calle y Número, Localidad y Código postal):
 *   <div class="kds-campos">
 *     <div class="kds-campo kds-campo--ancho">…Calle…</div>
 *     <div class="kds-campo kds-campo--angosto">…Número…</div>
 *   </div>
 *   .kds-campo--angosto | --ancho   la parte de la fila que toma cada uno; en el teléfono se apilan
 *   .kds-campos--juntos             no se apilan nunca
 *
 *   Un grupo de opciones con su nombre, para la vista y el lector:
 *   <fieldset class="kds-grupo" aria-describedby="entrega-error">
 *     <legend class="kds-grupo__rotulo">Elegí la entrega</legend>
 *     …las opciones…
 *     <p class="kds-grupo__error" id="entrega-error"></p>
 *   </fieldset>
 *   .kds-grupo__rotulo--titulo   el nombre del grupo como título (20px)
 *   .kds-grupo--en-fila          las opciones una al lado de la otra
 *   .kds-grupo.is-invalid        el error del grupo: el borde de las marcas en el color de peligro
 * ============================================================
 */

.kds-entrada {
    box-sizing: border-box;
    display: block;
    width: 100%;
    min-height: var(--kds-control-alto, 2.375rem);
    margin: 0;
    padding: .375rem .75rem;
    border: 1px solid var(--kds-borde-control, #dee2e6);
    border-radius: var(--kds-radio, .375rem);
    background-color: var(--kds-superficie, #fff);
    color: var(--kds-texto, #212529);
    font-family: inherit;
    font-size: var(--kds-fs-3, 1rem);
    line-height: var(--kds-lh-texto, 1.5);
    appearance: none;
    transition: border-color var(--kds-dur-1, .12s) ease, box-shadow var(--kds-dur-1, .12s) ease;
}

.kds-entrada::placeholder {
    color: var(--kds-texto-3, #606060);
    opacity: 1;
}

.kds-entrada:focus {
    outline: none;
    border-color: var(--kds-tinta, #212529);
    box-shadow: 0 0 0 1px var(--kds-tinta, #212529);
}

.kds-entrada:focus-visible {
    outline: var(--kds-foco-ancho, 2px) solid var(--kds-foco, #2EB8A8);
    outline-offset: var(--kds-foco-sep, 2px);
}

.kds-entrada.is-invalid,
.kds-entrada[aria-invalid="true"] {
    border-color: var(--kds-peligro, #D03355);
    background-color: var(--kds-entrada-invalida-fondo, var(--kds-superficie, #fff));
}

.kds-entrada.is-invalid:focus,
.kds-entrada[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 1px var(--kds-peligro, #D03355);
}

.kds-entrada:disabled {
    background-color: var(--kds-superficie-2, #f8f9fa);
    color: var(--kds-texto-3, #606060);
    cursor: not-allowed;
}

textarea.kds-entrada {
    min-height: 6rem;
    resize: vertical;
}

.kds-entrada--desplegable {
    padding-right: 2.25rem;
    background-image:
        linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 1.125rem) 52%, calc(100% - .8125rem) 52%;
    background-size: .3125rem .3125rem;
    background-repeat: no-repeat;
    cursor: pointer;
}

.kds-input > .kds-entrada {
    min-height: calc(var(--kds-control-alto, 2.375rem) - 2px);
    border: 0;
    box-shadow: none;
}

.kds-input > .kds-entrada:focus-visible { outline: none; }

/* Un desplegable dentro de la caja (el país del teléfono): kds-input deja transparente el fondo de sus controles con
   !important y eso borraba la flechita; acá vuelve, con su lugar a la derecha. */
.kds-input > select.kds-entrada--desplegable.kds-input__control {
    padding-right: 2.25rem;
    background-image:
        linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%) !important;
    background-position: calc(100% - 1.125rem) 52%, calc(100% - .8125rem) 52% !important;
    background-size: .3125rem .3125rem !important;
    background-repeat: no-repeat !important;
}

.kds-input:has(> .kds-entrada) {
    min-height: var(--kds-control-alto, 2.375rem);
    border-color: var(--kds-borde-control, #dee2e6);
    border-radius: var(--kds-radio, .375rem);
}

.kds-input:has(> .kds-entrada):focus-within {
    border-color: var(--kds-tinta, #212529);
    box-shadow: 0 0 0 1px var(--kds-tinta, #212529);
}

.kds-input:has(> .kds-entrada.is-invalid),
.kds-input:has(> .kds-entrada[aria-invalid="true"]) {
    border-color: var(--kds-peligro, #D03355);
    background-color: var(--kds-entrada-invalida-fondo, var(--ds-surface-raised, #fff));
}

.kds-input:has(> .kds-entrada) > .kds-input__accion {
    align-self: stretch;
    min-width: calc(var(--kds-control-alto, 2.375rem) - 2px);
    justify-content: center;
    margin: 0;
    border-radius: 0;
    background: transparent;
    color: var(--kds-texto, #212529);
    font-size: var(--kds-fs-3, 1rem);
}

.kds-input:has(> .kds-entrada) > .kds-input__accion:hover { background: var(--kds-superficie-2, #f8f9fa); }

.kds-input:has(> .kds-entrada) > .kds-input__accion.is-copiado,
.kds-input:has(> .kds-entrada) > .kds-input__accion.is-copiado:hover {
    background: var(--kds-exito-fondo, color-mix(in srgb, #77b65d 12%, transparent));
    color: var(--kds-exito-texto, #306c2d);
}

.kds-input:has(> .kds-entrada) > .kds-input__accion.is-fallo,
.kds-input:has(> .kds-entrada) > .kds-input__accion.is-fallo:hover {
    background: var(--kds-aviso-fondo, color-mix(in srgb, #E8B30E 12%, transparent));
    color: var(--kds-aviso-texto, #334155);
}

.kds-input__accion[hidden] { display: none !important; }

.kds-campo {
    display: grid;
    gap: .375rem;
    margin: 0 0 1rem;
    min-width: 0;
}

.kds-campo__rotulo {
    display: block;
    color: var(--kds-texto, #212529);
    font-size: var(--kds-fs-2, .875rem);
    font-weight: var(--kds-peso-ui, 600);
    line-height: var(--kds-lh-ui, 1.4);
}

.kds-campo__ayuda,
.kds-campo__error {
    margin: 0;
    font-size: var(--kds-fs-2, .875rem);
    line-height: var(--kds-lh-ui, 1.4);
}

.kds-campo__ayuda { color: var(--kds-texto-2, #606060); }

.kds-campo__error {
    color: var(--kds-peligro-texto, var(--kds-peligro, #D03355));
    font-weight: var(--kds-peso-ui, 600);
}

.kds-campo__error:empty { display: none; }

.kds-opcion {
    display: inline-flex;
    align-items: flex-start;
    gap: .625rem;
    min-height: 1.5rem;
    color: var(--kds-texto, #212529);
    font-size: var(--kds-fs-3, 1rem);
    line-height: var(--kds-lh-texto, 1.5);
    cursor: pointer;
}

.kds-opcion__marca {
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    margin: .125rem 0 0;
    border: 1px solid var(--kds-borde-control, #dee2e6);
    border-radius: calc(var(--kds-radio, .375rem) / 2);
    background-color: var(--kds-superficie, #fff);
    background-position: center;
    background-repeat: no-repeat;
    appearance: none;
    cursor: pointer;
}

.kds-opcion__marca[type="radio"] { border-radius: 50%; }

.kds-opcion__marca:checked {
    border-color: var(--kds-marca, var(--kds-acento, #2EB8A8));
    background-color: var(--kds-marca, var(--kds-acento, #2EB8A8));
}

.kds-opcion__marca[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='m3.5 8.5 3 3 6-6.5'/%3e%3c/svg%3e");
    background-size: 80%;
}

.kds-opcion__marca[type="radio"]:checked {
    box-shadow: inset 0 0 0 .25rem var(--kds-superficie, #fff);
}

.kds-opcion__marca:focus-visible {
    outline: var(--kds-foco-ancho, 2px) solid var(--kds-foco, #2EB8A8);
    outline-offset: var(--kds-foco-sep, 2px);
}

.kds-opcion__marca:disabled { opacity: .5; cursor: not-allowed; }

.kds-campos {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--kds-aire-4, 1rem);
    min-width: 0;
}

.kds-campos > .kds-campo { flex: 2 1 10rem; }
.kds-campos > .kds-campo--angosto { flex: 1 1 6rem; }
.kds-campos > .kds-campo--ancho { flex: 3 1 14rem; }

@media (max-width: 479.98px) {
    .kds-campos:not(.kds-campos--juntos) > .kds-campo { flex-basis: 100%; }
}

.kds-grupo {
    display: grid;
    gap: var(--kds-aire-3, .75rem);
    min-width: 0;
    margin: 0 0 var(--kds-aire-4, 1rem);
    padding: 0;
    border: 0;
}

.kds-grupo--en-fila {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kds-aire-3, .75rem) var(--kds-aire-5, 1.5rem);
}

.kds-grupo__rotulo {
    width: 100%;
    margin: 0 0 var(--kds-aire-3, .75rem);
    padding: 0;
    color: var(--kds-texto, #212529);
    font-size: var(--kds-fs-2, .875rem);
    font-weight: var(--kds-peso-ui, 600);
    line-height: var(--kds-lh-ui, 1.4);
}

.kds-grupo__rotulo--titulo {
    font-size: var(--kds-fs-4, 1.25rem);
    font-weight: var(--kds-peso-fuerte, 700);
    line-height: var(--kds-lh-titulo, 1.2);
}

.kds-grupo__error {
    margin: 0;
    color: var(--kds-peligro-texto, var(--kds-peligro, #D03355));
    font-size: var(--kds-fs-2, .875rem);
    font-weight: var(--kds-peso-ui, 600);
    line-height: var(--kds-lh-ui, 1.4);
}

.kds-grupo__error:empty { display: none; }

.kds-grupo.is-invalid .kds-opcion__marca { border-color: var(--kds-peligro, #D03355); }

@media (prefers-reduced-motion: reduce) {
    .kds-entrada { transition: none; }
}