/* Campos de captura (EasyComponentes/Inputs): EasyTextBox, EasySwitch y EasyImageInput.
   Solo tokens --easy-* con valores por omisión. Esquinas: todas salen de --easy-radio-base con la escala de la librería (ver easygrid.css). */

/* ---------- EasyTextBox ---------- */
.easy-campo {
    --easy-campo-bg: var(--easy-color-campo, #fff);
    --easy-campo-texto: var(--easy-color-campo-texto, #1f2430);
    --easy-campo-borde: var(--easy-color-campo-borde, #ced4da);
    --easy-campo-tenue: var(--easy-color-texto-tenue, #6b7280);
    --easy-campo-acento: var(--easy-color-primario, #940404);
    --easy-campo-foco: var(--easy-color-foco, rgba(148, 4, 4, .25));
    --easy-campo-peligro: var(--easy-color-peligro, #b42318);
    --easy-campo-radio: var(--easy-radio-base, 8px);
    --easy-campo-alto: 36px;
    display: block;
    min-width: 0;
    color: var(--easy-campo-texto);
    font-family: var(--easy-fuente-base, inherit);
    font-size: calc(14px * var(--easy-escala-fuente, 1));
}
.easy-campo.compacto { --easy-campo-alto: 30px; font-size: calc(13px * var(--easy-escala-fuente, 1)); }

.easy-campo-etiqueta { display: block; margin: 0 0 4px; font-size: calc(12px * var(--easy-escala-fuente, 1)); font-weight: 600; color: var(--easy-campo-tenue); }
.easy-campo-req { color: var(--easy-campo-peligro); }

.easy-campo-control {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: var(--easy-campo-alto);
    padding: 0 10px;
    background: var(--easy-campo-bg);
    color: inherit;
    border: 1px solid var(--easy-campo-borde);
    border-radius: var(--easy-campo-radio);
    font: inherit;
    outline: 0;
    transition: border-color .12s, box-shadow .12s;
}
.easy-campo-area { height: auto; padding: 8px 10px; resize: vertical; line-height: 1.4; }
.easy-campo-control::placeholder { color: var(--easy-campo-tenue); opacity: .8; }
.easy-campo:not(.deshabilitado):not(.solo-lectura) .easy-campo-control:hover { border-color: color-mix(in srgb, var(--easy-campo-acento) 45%, var(--easy-campo-borde)); }
.easy-campo-control:focus { border-color: var(--easy-campo-acento); box-shadow: 0 0 0 3px var(--easy-campo-foco); }

.easy-campo.may .easy-campo-control { text-transform: uppercase; }
.easy-campo.invalido .easy-campo-control { border-color: var(--easy-campo-peligro); }
.easy-campo.invalido .easy-campo-control:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--easy-campo-peligro) 25%, transparent); }
.easy-campo.deshabilitado .easy-campo-control { opacity: .6; background: color-mix(in srgb, var(--easy-campo-texto) 5%, var(--easy-campo-bg)); cursor: not-allowed; }
.easy-campo.solo-lectura .easy-campo-control { background: color-mix(in srgb, var(--easy-campo-texto) 3%, var(--easy-campo-bg)); }

.easy-campo .validation-message, .easy-campo-error { margin-top: 3px; font-size: calc(12px * var(--easy-escala-fuente, 1)); color: var(--easy-campo-peligro); }
.easy-campo-ayuda { margin-top: 3px; font-size: calc(12px * var(--easy-escala-fuente, 1)); color: var(--easy-campo-tenue); }

/* ---------- EasySwitch ---------- */
.easy-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--easy-color-texto, #1f2430);
    font-family: var(--easy-fuente-base, inherit);
    font-size: calc(14px * var(--easy-escala-fuente, 1));
    user-select: none;
}
.easy-switch.texto-izq { flex-direction: row-reverse; }
.easy-switch.deshabilitado { opacity: .55; cursor: default; }
.easy-switch input { position: absolute; width: 0; height: 0; opacity: 0; }

.easy-switch-pista {
    position: relative;
    flex: none;
    width: 40px;
    height: 22px;
    background: var(--easy-color-campo-borde, #ced4da);
    border-radius: calc(var(--easy-radio-base, 8px) * 2);
    transition: background .15s;
}
.easy-switch-pista::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
    transition: left .15s;
}
.easy-switch input:checked + .easy-switch-pista { background: var(--easy-color-primario, #940404); }
.easy-switch input:checked + .easy-switch-pista::after { left: 21px; }
.easy-switch input:focus-visible + .easy-switch-pista { box-shadow: 0 0 0 3px var(--easy-color-foco, rgba(148, 4, 4, .25)); }

/* ---------- EasyImageInput ---------- */
.easy-imagen { color: var(--easy-color-campo-texto, #1f2430); font-family: var(--easy-fuente-base, inherit); font-size: calc(14px * var(--easy-escala-fuente, 1)); }
.easy-imagen.deshabilitado { opacity: .6; }
.easy-imagen-etiqueta { display: block; margin: 0 0 4px; font-size: calc(12px * var(--easy-escala-fuente, 1)); font-weight: 600; color: var(--easy-color-texto-tenue, #6b7280); }
.easy-imagen-cuerpo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.easy-imagen-vista {
    flex: none;
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    overflow: hidden;
    border: 1px dashed var(--easy-color-campo-borde, #ced4da);
    border-radius: var(--easy-radio-base, 8px);
    background: color-mix(in srgb, var(--easy-color-campo-texto, #1f2430) 3%, var(--easy-color-campo, #fff));
    color: var(--easy-color-texto-tenue, #6b7280);
}
.easy-imagen-vista img { width: 100%; height: 100%; object-fit: contain; }

.easy-imagen-acciones { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.easy-imagen-boton { position: relative; overflow: hidden; }
.easy-imagen-boton input[type=file] { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.easy-imagen-boton:focus-within { border-color: var(--easy-color-primario, #940404); box-shadow: 0 0 0 3px var(--easy-color-foco, rgba(148, 4, 4, .25)); }
.easy-imagen-boton.deshabilitado { opacity: .55; pointer-events: none; }
.easy-imagen-archivo { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--easy-color-texto-tenue, #6b7280); font-size: calc(13px * var(--easy-escala-fuente, 1)); }
.easy-imagen-error { color: var(--easy-color-peligro, #b42318); font-size: calc(12px * var(--easy-escala-fuente, 1)); }

@media (prefers-reduced-motion: reduce) {
    .easy-campo-control, .easy-switch-pista, .easy-switch-pista::after { transition: none; }
}

/* ---------- EasyCheckBox ---------- */
.easy-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    margin: 0;
    padding: 4px 8px;
    border-radius: calc(var(--easy-radio-base, 8px) * .75);
    color: var(--easy-color-texto, #1f2430);
    font-family: var(--easy-fuente-base, inherit);
    font-size: calc(14px * var(--easy-escala-fuente, 1));
    cursor: pointer;
    user-select: none;
}
.easy-check.compacto { min-height: 24px; padding: 2px 4px; font-size: calc(13px * var(--easy-escala-fuente, 1)); }
.easy-check:hover:not(.deshabilitado) { background: var(--easy-color-hover, #f3f4f6); }
.easy-check.deshabilitado { opacity: .55; cursor: default; }
/* La casilla se dibuja a mano (appearance: none) para que sus esquinas sigan el "Radio de las esquinas" de la apariencia:
   base × .5 (con radio 0 queda cuadrada; con un radio grande llega a círculo, tope 50%). El tilde y el guion son máscaras
   que toman --easy-color-sobre-primario, así se ven con cualquier color primario. */
.easy-check input {
    --easy-check-radio: min(calc(var(--easy-radio-base, 8px) * .5), 50%);
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 16px;
    height: 16px;
    margin: 0;
    background: var(--easy-color-campo, #fff);
    border: 1.5px solid var(--easy-color-campo-borde, #ced4da);
    border-radius: var(--easy-check-radio);
    cursor: inherit;
    transition: background-color .12s, border-color .12s, box-shadow .12s;
}
.easy-check.compacto input { width: 14px; height: 14px; }
.easy-check input::after {
    content: "";
    width: 100%;
    height: 100%;
    background: var(--easy-color-sobre-primario, #fff);
    -webkit-mask: var(--easy-check-marca) center / 82% no-repeat;
    mask: var(--easy-check-marca) center / 82% no-repeat;
    opacity: 0;
    transform: scale(.6);
    transition: opacity .1s, transform .1s;
}
.easy-check input {
    --easy-check-marca: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
}
.easy-check input:indeterminate {
    --easy-check-marca: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M4 8h8'/%3E%3C/svg%3E");
}
.easy-check input:checked,
.easy-check input:indeterminate { background: var(--easy-color-primario, #940404); border-color: var(--easy-color-primario, #940404); }
.easy-check input:checked::after,
.easy-check input:indeterminate::after { opacity: 1; transform: none; }
.easy-check:hover:not(.deshabilitado) input:not(:checked):not(:indeterminate) { border-color: var(--easy-color-primario, #940404); }
.easy-check input:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--easy-color-foco, rgba(148, 4, 4, .25)); }
.easy-check.invalido input { border-color: var(--easy-color-peligro, #b42318); }
.easy-check.invalido input:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--easy-color-peligro, #b42318) 25%, transparent); }
@media (prefers-reduced-motion: reduce) { .easy-check input, .easy-check input::after { transition: none; } }
.easy-check-texto { min-width: 0; }

/* ---------- EasyNumberBox ---------- */
.easy-campo-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- EasyDatePicker ---------- */
.easy-fecha-campo { position: relative; }
.easy-fecha-input { padding-right: 38px; font-variant-numeric: tabular-nums; }
.easy-fecha-btn {
    position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
    display: grid; place-items: center; width: 28px; height: 28px; padding: 0;
    border: 0; border-radius: calc(var(--easy-campo-radio) * .75); background: transparent;
    color: var(--easy-campo-tenue); cursor: pointer; transition: color .12s, background-color .12s;
}
.easy-fecha-btn:hover:not(:disabled), .easy-fecha.abierto .easy-fecha-btn { color: var(--easy-campo-acento); background: color-mix(in srgb, var(--easy-campo-acento) 10%, transparent); }
.easy-fecha-btn:focus-visible { outline: 2px solid var(--easy-campo-acento); outline-offset: 1px; }
.easy-fecha-btn:disabled { cursor: not-allowed; opacity: .6; }
.easy-fecha.invalido .easy-fecha-btn { color: var(--easy-campo-peligro); }

/* Calendario emergente: position fixed, lo coloca easydatepicker.js */
.easy-fecha-popup {
    position: fixed; z-index: 10000; top: 0; left: 0; box-sizing: border-box; width: 292px; overflow: auto;
    padding: 10px; background: var(--easy-color-popup, #fff); color: var(--easy-campo-texto);
    border: 1px solid var(--easy-color-borde, #e5e7eb); border-radius: calc(var(--easy-campo-radio) * 1.25);
    box-shadow: var(--easy-sombra-popup, 0 10px 30px rgba(17, 24, 39, .18));
    font-size: calc(14px * var(--easy-escala-fuente, 1)); transform-origin: top center; animation: easy-fecha-entra var(--easy-duracion-entrada, .22s) ease-out;
}
.easy-fecha-popup:not([data-listo]) { visibility: hidden; }
.easy-fecha-popup.easy-fecha-arriba { transform-origin: bottom center; }
@keyframes easy-fecha-entra { from { opacity: 0; transform: translateY(-4px) scale(.99); } }

.easy-fecha-cab { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }
.easy-fecha-nav, .easy-fecha-titulo, .easy-fecha-dia, .easy-fecha-celda, .easy-fecha-accion {
    border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer;
    transition: background-color .12s, color .12s;
}
.easy-fecha-nav { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: calc(var(--easy-campo-radio) * .75); color: var(--easy-campo-tenue); }
.easy-fecha-titulo { flex: 1; height: 30px; padding: 0 8px; border-radius: calc(var(--easy-campo-radio) * .75); font-weight: 600; }
.easy-fecha-nav:hover, .easy-fecha-titulo:hover { background: color-mix(in srgb, var(--easy-campo-texto) 7%, transparent); color: var(--easy-campo-texto); }

.easy-fecha-dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.easy-fecha-dsem { display: grid; place-items: center; height: 26px; font-size: .8em; font-weight: 600; color: var(--easy-campo-tenue); }
.easy-fecha-dia { display: grid; place-items: center; aspect-ratio: 1; min-height: 34px; border-radius: calc(var(--easy-campo-radio) * .75); font-variant-numeric: tabular-nums; }
.easy-fecha-dia.otro { color: var(--easy-campo-tenue); opacity: .55; }
.easy-fecha-dia:hover:not(.sel):not(.deshab) { background: color-mix(in srgb, var(--easy-campo-texto) 8%, transparent); }
.easy-fecha-dia.hoy, .easy-fecha-celda.hoy { box-shadow: inset 0 0 0 1px var(--easy-campo-acento); }
.easy-fecha-dia.sel, .easy-fecha-celda.sel { background: var(--easy-campo-acento); color: var(--easy-color-sobre-primario, #fff); font-weight: 600; opacity: 1; }
.easy-fecha-dia.deshab, .easy-fecha-celda.deshab { opacity: .3; cursor: not-allowed; }

.easy-fecha-celdas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.easy-fecha-celda { height: 44px; border-radius: calc(var(--easy-campo-radio) * .75); }
.easy-fecha-celda:hover:not(.sel):not(.deshab) { background: color-mix(in srgb, var(--easy-campo-texto) 8%, transparent); }

.easy-fecha-nav:focus-visible, .easy-fecha-titulo:focus-visible, .easy-fecha-dia:focus-visible, .easy-fecha-celda:focus-visible, .easy-fecha-accion:focus-visible,
.easy-fecha-hora-num:focus-visible { outline: 2px solid var(--easy-campo-acento); outline-offset: 1px; }

.easy-fecha-hora { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--easy-color-borde, #e5e7eb); }
.easy-fecha-hora-et { margin-right: auto; font-weight: 600; color: var(--easy-campo-tenue); font-size: .9em; }
.easy-fecha-hora-num {
    box-sizing: border-box; width: 56px; height: 32px; padding: 0 6px; text-align: center; font: inherit; font-variant-numeric: tabular-nums;
    background: var(--easy-campo-bg); color: inherit; border: 1px solid var(--easy-campo-borde); border-radius: calc(var(--easy-campo-radio) * .75);
}

.easy-fecha-pie { display: flex; align-items: center; gap: 4px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--easy-color-borde, #e5e7eb); }
.easy-fecha-hora + .easy-fecha-pie { margin-top: 8px; }
.easy-fecha-espacio { flex: 1; }
.easy-fecha-accion { height: 30px; padding: 0 10px; border-radius: calc(var(--easy-campo-radio) * .75); color: var(--easy-campo-acento); font-weight: 600; }
.easy-fecha-accion:hover:not(:disabled) { background: color-mix(in srgb, var(--easy-campo-acento) 10%, transparent); }
.easy-fecha-accion:disabled { opacity: .4; cursor: not-allowed; }
.easy-fecha-primaria { background: var(--easy-campo-acento); color: var(--easy-color-sobre-primario, #fff); }
.easy-fecha-primaria:hover:not(:disabled) { background: color-mix(in srgb, var(--easy-campo-acento) 88%, black); }

@media (prefers-reduced-motion: reduce) { .easy-fecha-popup { animation: none; } .easy-fecha-btn, .easy-fecha-nav, .easy-fecha-dia, .easy-fecha-celda, .easy-fecha-accion { transition: none; } }