/* ZYTRONIX UPDATE 127 - estados visibles de validación */
:root{
    --ztx-field-valid:#22c55e;
    --ztx-field-valid-glow:rgba(34,197,94,.22);
    --ztx-field-invalid:#ef4444;
    --ztx-field-invalid-glow:rgba(239,68,68,.24);
}

input.ztx-field-valid:not([type="checkbox"]):not([type="radio"]),
select.ztx-field-valid,
textarea.ztx-field-valid{
    border-color:var(--ztx-field-valid)!important;
    box-shadow:0 0 0 2px var(--ztx-field-valid-glow),inset 0 0 0 1px rgba(34,197,94,.16)!important;
    background-image:linear-gradient(135deg,rgba(34,197,94,.055),rgba(34,197,94,0))!important;
}

input.ztx-field-invalid:not([type="checkbox"]):not([type="radio"]),
select.ztx-field-invalid,
textarea.ztx-field-invalid{
    border-color:var(--ztx-field-invalid)!important;
    box-shadow:0 0 0 2px var(--ztx-field-invalid-glow),inset 0 0 0 1px rgba(239,68,68,.18)!important;
    background-image:linear-gradient(135deg,rgba(239,68,68,.065),rgba(239,68,68,0))!important;
}

input.ztx-field-valid[type="checkbox"],input.ztx-field-valid[type="radio"]{accent-color:var(--ztx-field-valid)!important}
input.ztx-field-invalid[type="checkbox"],input.ztx-field-invalid[type="radio"]{accent-color:var(--ztx-field-invalid)!important;outline:2px solid var(--ztx-field-invalid);outline-offset:3px}

/* ZYTRONIX UPDATE 544 · ESTADO/ERROR EN CABECERA DEL CAMPO */
.ztx-field-feedback-host{position:relative!important}
.ztx-field-feedback{
    display:none;
    position:absolute;
    z-index:6;
    top:0;
    right:0;
    width:auto;
    max-width:min(64%,360px);
    margin:0;
    padding:2px 7px;
    border:1px solid rgba(239,68,68,.62);
    border-radius:999px;
    background:rgba(84,16,27,.92);
    color:#ffd4d8;
    box-shadow:0 0 9px rgba(239,68,68,.14);
    font-size:8px;
    font-weight:900;
    line-height:1.2;
    letter-spacing:.02em;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    pointer-events:none;
}
.ztx-field-feedback.is-visible{display:inline-flex;align-items:center}

.ztx-validation-summary{
    position:relative;
    z-index:8;
    margin:0 0 16px!important;
    border:1px solid rgba(239,68,68,.78)!important;
    box-shadow:0 12px 30px rgba(127,29,29,.20),0 0 0 1px rgba(239,68,68,.08)!important;
}
.ztx-validation-summary strong{display:inline-block;margin-right:5px}
.ztx-validation-summary ul{margin:9px 0 0 18px;padding:0}
.ztx-validation-summary li{margin:4px 0;line-height:1.35}

.theme-light .ztx-field-feedback{background:#fff0f1;color:#a51d2d;border-color:rgba(185,28,28,.42)}
.theme-light input.ztx-field-valid:not([type="checkbox"]):not([type="radio"]),
.theme-light select.ztx-field-valid,
.theme-light textarea.ztx-field-valid{background-image:linear-gradient(135deg,rgba(34,197,94,.07),rgba(255,255,255,0))!important}
.theme-light input.ztx-field-invalid:not([type="checkbox"]):not([type="radio"]),
.theme-light select.ztx-field-invalid,
.theme-light textarea.ztx-field-invalid{background-image:linear-gradient(135deg,rgba(239,68,68,.07),rgba(255,255,255,0))!important}

@media (prefers-reduced-motion:no-preference){
    input.ztx-field-valid,input.ztx-field-invalid,select.ztx-field-valid,select.ztx-field-invalid,textarea.ztx-field-valid,textarea.ztx-field-invalid{transition:border-color .16s ease,box-shadow .16s ease,background-image .16s ease}
}

/* UPDATE 544: en formularios angostos el aviso sigue arriba, sin agregar una fila debajo del control. */
@media(max-width:620px){.ztx-field-feedback{max-width:58%;font-size:7.5px;padding:2px 5px}}
