/* ============================================================================
   Checks.css — Estilo ÚNICO y MODERNO de checkbox para TODO el proyecto.
   Cargado DESPUÉS de Homogeneo.css en App.razor para tener prioridad.

   Cubre:
     1) Radzen <RadzenCheckBox>  -> .rz-chkbox / .rz-chkbox-box / .rz-chkbox-icon
        (y la variante antigua .rz-checkbox / .rz-checkbox-box)
     2) Inputs nativos  <input type="checkbox">
     3) Armoniza el switch de Radzen (.rz-switch) para que NO se estire
        a ancho completo dentro de un RadzenFormField (bug "pastilla gris").

   NO toca label.cont-check (checkbox redondo de selección de filas en grids):
   ese estilo vive en Contabilidad.css y se respeta tal cual.

   Paleta:  primario #4088BD   ·  borde #c4ccd6   ·  texto #2c3e50
   ============================================================================ */

:root {
    --chk-size: 20px;
    --chk-radius: 6px;
    --chk-border: #c4ccd6;
    --chk-primary: #4088BD;
    --chk-ring: rgba(64, 136, 189, .15);
    --chk-label: #2c3e50;
}

/* ----------------------------------------------------------------------------
   1) RADZEN CHECKBOX  (Material theme, Radzen 8.x => .rz-chkbox-box)
      Se cubre TAMBIÉN la variante .rz-checkbox-box por seguridad.
      Importante: NO ocultamos el input ni cambiamos el DOM; solo reestilamos
      la caja visible para que Radzen mantenga el manejo de clics.
   ---------------------------------------------------------------------------- */

/* Contenedor: nunca a ancho completo (esto evita el estirado dentro de
   form-fields / contenedores con width:100%) */
.rz-chkbox,
.rz-checkbox {
    display: inline-flex !important;
    align-items: center;
    width: auto !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    vertical-align: middle;
}

/* La caja visible: cuadrado redondeado fijo, jamás estirado */
.rz-chkbox .rz-chkbox-box,
.rz-checkbox .rz-checkbox-box,
.rz-chkbox-box,
.rz-checkbox-box {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto !important;
    width: var(--chk-size) !important;
    height: var(--chk-size) !important;
    min-width: var(--chk-size) !important;
    max-width: var(--chk-size) !important;
    padding: 0 !important;
    border: 2px solid var(--chk-border) !important;
    border-radius: var(--chk-radius) !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    box-shadow: none !important;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
    cursor: pointer;
}

/* Hover / foco: anillo azul sutil */
.rz-chkbox .rz-chkbox-box:hover,
.rz-checkbox .rz-checkbox-box:hover,
.rz-chkbox-box:hover,
.rz-checkbox-box:hover,
.rz-chkbox-box.rz-state-focused,
.rz-checkbox-box.rz-state-focused {
    border-color: var(--chk-primary) !important;
    box-shadow: 0 0 0 3px var(--chk-ring) !important;
}

/* Estado marcado: fondo y borde primario */
.rz-chkbox-box.rz-state-active,
.rz-checkbox-box.rz-state-active,
.rz-chkbox .rz-chkbox-box.rz-state-active,
.rz-checkbox .rz-checkbox-box.rz-state-active {
    background: var(--chk-primary) !important;
    background-color: var(--chk-primary) !important;
    border-color: var(--chk-primary) !important;
}

/* Marcado + foco: conservar el anillo */
.rz-chkbox-box.rz-state-active.rz-state-focused,
.rz-checkbox-box.rz-state-active.rz-state-focused {
    box-shadow: 0 0 0 3px var(--chk-ring) !important;
}

/* Glifo de check de Radzen: blanco, centrado, tamaño acorde a la caja */
.rz-chkbox-box .rz-chkbox-icon,
.rz-checkbox-box .rz-checkbox-icon {
    color: #ffffff !important;
    font-size: 15px !important;
    line-height: 1 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    transition: opacity .12s ease;
}

/* El icono solo se ve cuando está activo */
.rz-chkbox-box .rz-chkbox-icon,
.rz-checkbox-box .rz-checkbox-icon {
    opacity: 0;
}
.rz-chkbox-box.rz-state-active .rz-chkbox-icon,
.rz-checkbox-box.rz-state-active .rz-chkbox-icon {
    opacity: 1;
}

/* Estado deshabilitado */
.rz-chkbox.rz-state-disabled,
.rz-checkbox.rz-state-disabled,
.rz-chkbox-box.rz-state-disabled,
.rz-checkbox-box.rz-state-disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* Etiqueta que acompaña al checkbox de Radzen (si la hay) */
.rz-chkbox + label,
.rz-checkbox + label,
.rz-chkbox-label {
    font-weight: 400;
    color: var(--chk-label);
    vertical-align: middle;
    margin-left: 8px;
    cursor: pointer;
}

/* ----------------------------------------------------------------------------
   2) CHECKBOX NATIVO  <input type="checkbox">
      Se excluye explícitamente el de label.cont-check (grids), que se gestiona
      en Contabilidad.css y debe seguir oculto+sustituido por .cont-check-box.
   ---------------------------------------------------------------------------- */

input[type="checkbox"]:not(.cont-check input):not([role="switch"]) {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    flex: 0 0 auto;
    display: inline-block;
    width: var(--chk-size);
    height: var(--chk-size);
    min-width: var(--chk-size);
    margin: 0 6px 0 0;
    padding: 0;
    border: 2px solid var(--chk-border);
    border-radius: var(--chk-radius);
    background: #ffffff;
    vertical-align: middle;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
    position: relative;
}

input[type="checkbox"]:not(.cont-check input):not([role="switch"]):hover,
input[type="checkbox"]:not(.cont-check input):not([role="switch"]):focus {
    border-color: var(--chk-primary);
    box-shadow: 0 0 0 3px var(--chk-ring);
    outline: none;
}

input[type="checkbox"]:not(.cont-check input):not([role="switch"]):checked {
    background: var(--chk-primary);
    border-color: var(--chk-primary);
}

/* Marca de check dibujada con CSS para el input nativo */
input[type="checkbox"]:not(.cont-check input):not([role="switch"]):checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1.5px;
    width: 5px;
    height: 9px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

input[type="checkbox"]:not(.cont-check input):not([role="switch"]):disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* ----------------------------------------------------------------------------
   3) RADZEN SWITCH — toggle moderno (pista + círculo) y SIN el recuadro
      del RadzenFormField. Arregla el "blob" verde y la "línea alrededor"
      de "¿Tanque Lleno?" y de todos los switches del proyecto.
   ---------------------------------------------------------------------------- */

/* Estructura real Radzen 8.5.1:
     .rz-switch                 -> contenedor (pista)
     .rz-switch-circle          -> RELLENO de la pista (Radzen lo pinta verde al activar)
     .rz-switch-circle::before  -> el thumb (círculo que se desliza)
*/

/* Pista (contenedor) */
.rz-switch {
    box-sizing: border-box !important;
    position: relative !important;
    display: inline-block !important;
    flex: 0 0 auto !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 24px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer;
    vertical-align: middle;
}

/* Relleno de la pista: gris apagado, azul encendido (NO verde) */
.rz-switch .rz-switch-circle {
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    border-radius: 999px !important;
    background: #c4ccd6 !important;
    box-shadow: none !important;
    transition: background-color .18s ease !important;
}
.rz-switch.rz-switch-checked .rz-switch-circle {
    background: var(--chk-primary) !important;
}

/* Thumb (círculo que se desliza) */
.rz-switch .rz-switch-circle::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 3px !important;
    width: 18px !important;
    height: 18px !important;
    margin: -9px 0 0 0 !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3) !important;
    transition: transform .18s ease !important;
    transform: none !important;
}
.rz-switch.rz-switch-checked .rz-switch-circle::before {
    transform: translateX(20px) !important;
}

/* Foco */
.rz-switch:focus,
.rz-switch:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px var(--chk-ring) !important;
}

/* Deshabilitado */
.rz-switch.rz-state-disabled,
.rz-switch .rz-switch-circle.rz-disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* Quitar el recuadro del RadzenFormField cuando contiene un switch O un checkbox
   (la "línea alrededor"); la etiqueta de texto se mantiene. */
.rz-form-field:has(.rz-switch),
.rz-form-field:has(.rz-switch) > fieldset,
.rz-form-field:has(.rz-switch) .rz-form-field-content,
.rz-form-field:has(.rz-chkbox),
.rz-form-field:has(.rz-chkbox) > fieldset,
.rz-form-field:has(.rz-chkbox) .rz-form-field-content,
.rz-form-field:has(.rz-checkbox),
.rz-form-field:has(.rz-checkbox) > fieldset,
.rz-form-field:has(.rz-checkbox) .rz-form-field-content {
    border: none !important;
    box-shadow: none !important;
}

/* Form-field con switch/checkbox: etiqueta ARRIBA y control DEBAJO.
   El label vive DENTRO de .rz-form-field-content (flotando, position:absolute),
   por eso ponemos el CONTENT en columna y el label estático arriba. */
.rz-form-field:has(.rz-switch) .rz-form-field-content,
.rz-form-field:has(.rz-chkbox) .rz-form-field-content,
.rz-form-field:has(.rz-checkbox) .rz-form-field-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    width: auto !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* La etiqueta: estática y ARRIBA (order:-1), legible, sin flotar ni transformar */
.rz-form-field:has(.rz-switch) .rz-form-field-label,
.rz-form-field:has(.rz-chkbox) .rz-form-field-label,
.rz-form-field:has(.rz-checkbox) .rz-form-field-label {
    position: static !important;
    transform: none !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    order: -1 !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    font-size: .8rem !important;
    font-weight: 600 !important;
    color: var(--chk-label) !important;
    line-height: 1.2 !important;
    max-width: none !important;
    white-space: normal !important;
}

/* El control (switch/checkbox) debajo, sin estirarse */
.rz-form-field:has(.rz-switch) .rz-form-field-content > .rz-switch,
.rz-form-field:has(.rz-chkbox) .rz-form-field-content > .rz-chkbox,
.rz-form-field:has(.rz-checkbox) .rz-form-field-content > .rz-checkbox {
    order: 0 !important;
    flex: 0 0 auto !important;
}

/* Quitar el outline verde del checkbox (conservando el aro azul por box-shadow) */
.rz-chkbox-box,
.rz-checkbox-box,
.rz-chkbox,
.rz-checkbox {
    outline: none !important;
}

/* Quitar la sombra/outline verde de foco del propio campo */
.rz-form-field.rz-state-focused:has(.rz-switch) .rz-form-field-content,
.rz-form-field.rz-state-focused:has(.rz-chkbox) .rz-form-field-content,
.rz-form-field.rz-state-focused:has(.rz-checkbox) .rz-form-field-content {
    outline: none !important;
    box-shadow: none !important;
}

/* Alinea switches/checkboxes embebidos a la izquierda del form-field */
.rz-form-field-content .rz-switch,
.rz-form-field-content .rz-chkbox,
.rz-form-field-content .rz-checkbox {
    align-self: flex-start;
}