/* Estilos propios de WinMaster USA, sobre AdminLTE 3. */

/* ---------------------------------------------------------------------------
   Casillas de verificacion

   Antes cada casilla salia con el dibujo por omision del navegador, que cambia
   entre Chrome, Firefox y Edge y no se parece a nada mas de la aplicacion.
   Aqui se dibujan a mano: cuadro redondeado, verde de la casa al marcarse y
   palomita blanca.

   La regla es general a proposito. Las once casillas del sistema son etiquetas
   <asp:CheckBox> del propio marcado (ninguna la crea codigo ni un complemento),
   asi que no hay nada de terceros que pueda quedar afectado. El interruptor del
   login sigue con su propio aspecto porque .switch_1 gana en especificidad.

   La palomita va escapada ("\2713") en vez de escrita tal cual: asi esta hoja
   sigue siendo ASCII y no depende de como se decodifique el archivo.
   --------------------------------------------------------------------------- */
input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
    padding: 0;
    border: 2px solid #b7bcc8;
    border-radius: .25rem;
    background: #fff;
    vertical-align: -.25rem;
    position: relative;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

input[type="checkbox"]:checked {
    background: #acc825;
    border-color: #acc825;
}

input[type="checkbox"]:checked::before {
    content: "\2713";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    line-height: .85rem;
    text-align: center;
}

/* Marca de foco propia: sin esto, quitar el dibujo del navegador deja tambien
   sin contorno a quien navega con el tabulador. */
input[type="checkbox"]:focus-visible,
input[type="checkbox"]:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(172, 200, 37, .45);
}

input[type="checkbox"]:disabled {
    background: #e9ecef;
    border-color: #ced4da;
    cursor: not-allowed;
}

input[type="checkbox"]:disabled:checked {
    background: #ced4da;
    border-color: #ced4da;
}

/* asp:CheckBox con Text emite <input><label for>: el texto tambien selecciona,
   asi que conviene que se vea pulsable y no quede pegado al cuadro. */
input[type="checkbox"] + label {
    margin-left: .4rem;
    margin-bottom: 0;
    cursor: pointer;
    vertical-align: middle;
}

/* El interruptor del login es otro control y va antes que la casilla comun:
   hay que deshacer el cuadro y la palomita que pone la regla general. */
.switch_1 input[type="checkbox"] {
    font-size: 10px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 3.5em;
    height: 1.5em;
    background: #ddd;
    border: 0;
    border-radius: 3em;
    vertical-align: middle;
    position: relative;
    cursor: pointer;
    outline: none;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.switch_1 input[type="checkbox"]:checked::before {
    content: none;
}

/* El outline:none de arriba deja el interruptor sin marca de foco: quien navega
   con el tabulador no ve donde esta. Se devuelve una marca propia, con el verde
   de la casa, en lugar del contorno del navegador. */
.switch_1 input[type="checkbox"]:focus-visible {
    box-shadow: 0 0 0 3px rgba(172, 200, 37, .55);
}

/* Respaldo para navegadores sin :focus-visible */
.switch_1 input[type="checkbox"]:focus {
    box-shadow: 0 0 0 3px rgba(172, 200, 37, .55);
}

.switch_1 [type="checkbox"]:checked {
    background: #acc545;
}

.switch_1 [type="checkbox"]:after {
    position: absolute;
    content: "";
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    background: #fff;
    -webkit-box-shadow: 0 0 .25em rgba(0,0,0,.3);
    box-shadow: 0 0 .25em rgba(0,0,0,.3);
    -webkit-transform: scale(.7);
    transform: scale(.7);
    left: 0;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.switch_1 [type="checkbox"]:checked:after {
    left: calc(100% - 1.5em);
}
.switch_1 label {
    font-size: 1.2em;
    margin-left: 10px;
    line-height: 1.5em;
}


/*.img_prev {
    display: flex;
    margin: 0 auto;
    min-width: 250px;
    min-height: 250px;
    max-width: 250px;
    max-height: 250px;
    padding: 5px;*/
    /*min-height:400px;*/
    /*border: 4px dotted rgba(0,0,0,0.2);
    justify-content: center;
}
    .img_prev img {
        max-width: 240px;
        max-height: 240px;
        cursor: pointer;
    }*/

.img_prev {
    position: relative; /* Contenedor relativo */
    width: 300px; /* Ancho fijo deseado */
    height: 240px; /* Altura fija deseada */
    margin: 0 auto; /* Centrar horizontalmente */
    background-color: #f5f5f5; /* Opcional: color de fondo cuando no hay imagen */
    display: flex;
    align-items: center; /* Centrar imagen verticalmente */
    justify-content: center; /* Centrar imagen horizontalmente */
    border: 1px solid #ddd; /* Opcional: borde del contenedor */
    transition: height 0.3s; /* transición suave al cambiar la altura */
}

    .img_prev img {
        max-width: 100%;
        max-height: 100%;
        display: block;
    }

    .img_prev button {
        position: absolute; /* Posición absoluta respecto al contenedor */
        top: 5px;
        right: 5px;
        z-index: 10;
        padding: 0.25rem 0.5rem;
        font-size: 0.8rem;
    }

.img_guia {
    position: relative;
    width: auto;
    height: auto; /* altura por defecto cuando hay imagen */
    max-height: 240px; /* altura por defecto cuando hay imagen */
    margin: 0 auto;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
    transition: height 0.3s; /* transición suave al cambiar la altura */
}

    .img_guia img {
        max-width: 100%;
        display: block;
    }

.hover-zoom {
    transition: transform 0.3s ease-in-out;
}

    .hover-zoom:hover {
        transform: scale(1.05);
    }




/* CSS para que el dropdown chosen se vea igual a los campos de bootstrap*/
/* Estilos para que Chosen se vea como un form-control de Bootstrap */
.chosen-container .chosen-single {
    background-color: #fff;
    border: 1px solid #d1d3e2;
    border-radius: 0.25rem;
    height: calc(1.5em + 0.75rem + 2px) !important;
    line-height: calc(1.5em + 0.75rem + 2px) !important;
    padding: 0.375rem 0.75rem;
    font-size: .8rem;
    font-weight: 400;
    line-height: 1.5;
    color: #6c757d;
}

    .chosen-container .chosen-single div b {
        background-image: none !important;
    }

.chosen-container .chosen-drop {
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    font-size: .8rem;
}

.chosen-container .chosen-search input[type=text] {
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    padding: 0.375rem 0.75rem;
    font-size: .8rem;
    box-shadow: none;
}

.chosen-container-active .chosen-single {
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Para el focus */
}

.chosen-container .chosen-results li {
    padding: 0.375rem 0.75rem;
}

    .chosen-container .chosen-results li.highlighted {
        background-color: #e9ecef;
    }



.border-left-primary {
    border-left: .25rem solid var(--primary) !important
}

.border-bottom-primary {
    border-bottom: .25rem solid var(--primary) !important
}

.border-left-secondary {
    border-left: .25rem solid var(--secondary) !important
}

.border-bottom-secondary {
    border-bottom: .25rem solid var(--secondary) !important
}

.border-left-success {
    border-left: .25rem solid #1cc88a !important
}

.border-bottom-success {
    border-bottom: .25rem solid #1cc88a !important
}

.border-left-info {
    border-left: .25rem solid #36b9cc !important
}

.border-bottom-info {
    border-bottom: .25rem solid #36b9cc !important
}

.border-left-warning {
    border-left: .25rem solid #f6c23e !important
}

.border-bottom-warning {
    border-bottom: .25rem solid #f6c23e !important
}

.border-left-danger {
    border-left: .25rem solid #e74a3b !important
}

.border-bottom-danger {
    border-bottom: .25rem solid #e74a3b !important
}

.border-left-light {
    border-left: .25rem solid #f8f9fc !important
}

.border-bottom-light {
    border-bottom: .25rem solid #f8f9fc !important
}

.border-left-dark {
    border-left: .25rem solid #5a5c69 !important
}

.border-bottom-dark {
    border-bottom: .25rem solid #5a5c69 !important
}

.text-gray-100 {
    color: #f8f9fc !important
}

.text-gray-200 {
    color: #eaecf4 !important
}

.text-gray-300 {
    color: #dddfeb !important
}

.text-gray-400 {
    color: #d1d3e2 !important
}

.text-gray-500 {
    color: #b7b9cc !important
}

.text-gray-600 {
    color: #858796 !important
}

.text-gray-700 {
    color: #6e707e !important
}

.text-gray-800 {
    color: #5a5c69 !important
}

.text-gray-900 {
    color: #3a3b45 !important
}

/* ── Modal overlay (paneles server-side que actúan como modal) ── */
.wm-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.wm-modal-overlay .modal-dialog {
    margin: 0;
    max-height: 90vh;
    overflow-y: auto;
}

.btn-flotante {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    z-index: 1050; /* por encima del contenido */
    transition: all 0.3s ease;
}

    .btn-flotante:hover {
        transform: scale(1.1);
        background-color: #0069d9; /* tono más oscuro al pasar el mouse */
    }

/* ---------------------------------------------------------------------------
   Indicador de espera  (Controls/LoadingOverlay.ascx)

   Reemplaza al overlay anterior: fondo casi opaco, un GIF de 250px y el texto
   "Please Wait..." parpadeando. El parpadeo se elimino (un texto que se apaga
   cada segundo es un problema de accesibilidad) y el GIF tambien, porque una
   imagen animada no puede atenuarse cuando se pide reducir movimiento.

   Se usa la misma marca en dos lugares: la version de UpdateProgress para los
   postbacks parciales y una copia estatica que JavaScript muestra durante los
   postbacks completos.
   --------------------------------------------------------------------------- */
.wm-loading {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Velo claro en vez de casi negro: deja ver que la pagina sigue ahi. */
    background: rgba(15, 23, 42, .45);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    animation: wm-loading-fade .15s ease-out;
}

.wm-loading[hidden] {
    display: none;
}

/* Barra superior: se ve aunque la pagina este desplazada y el centro quede
   fuera de la vista. */
.wm-loading__bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    overflow: hidden;
    background: rgba(172, 200, 37, .25);
}

.wm-loading__bar span {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -40%;
    width: 40%;
    background: linear-gradient(90deg, rgba(172, 200, 37, 0), #acc825, rgba(172, 200, 37, 0));
    animation: wm-loading-slide 1.1s ease-in-out infinite;
}

.wm-loading__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 12rem;
    max-width: calc(100vw - 2rem);
    padding: 1.75rem 2.25rem;
    border-radius: .75rem;
    background: #fff;
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .28);
    animation: wm-loading-pop .2s ease-out;
}

.wm-loading__spinner {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    border: 4px solid rgba(172, 200, 37, .22);
    border-top-color: #acc825;
    animation: wm-loading-spin .8s linear infinite;
}

.wm-loading__text {
    margin-top: 1rem;
    font-size: .95rem;
    font-weight: 600;
    color: #495057;
    text-align: center;
}

@keyframes wm-loading-spin {
    to { transform: rotate(360deg); }
}

@keyframes wm-loading-slide {
    0%   { left: -40%; }
    100% { left: 100%; }
}

@keyframes wm-loading-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes wm-loading-pop {
    from { opacity: 0; transform: translateY(.5rem) scale(.96); }
    to   { opacity: 1; transform: none; }
}

/* El bloque general de "reducir movimiento" deja las animaciones en .001ms, y
   eso congelaria el anillo justo cuando es la unica senal de que algo esta
   pasando. Aqui se le devuelve el giro, mas lento, y la barra deslizante se
   cambia por un tinte fijo. */
@media (prefers-reduced-motion: reduce) {
    .wm-loading,
    .wm-loading__card {
        animation: none !important;
    }

    .wm-loading__spinner {
        animation: wm-loading-spin 1.8s linear infinite !important;
    }

    .wm-loading__bar span {
        animation: none !important;
        left: 0 !important;
        width: 100% !important;
        background: #acc825;
        opacity: .55;
    }
}

/* ===== Botones Cotizar / Venta ===== */
.btn-cotizacion {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
    border: none;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(37,99,235,0.3);
    transition: all 0.2s ease;
}
.btn-cotizacion:hover,
.btn-cotizacion:focus {
    background: linear-gradient(135deg, #1d4ed8, #1e40af);
    box-shadow: 0 4px 12px rgba(37,99,235,0.4);
    transform: translateY(-1px);
    color: #fff;
}

.btn-venta {
    background: linear-gradient(135deg, #059669, #047857);
    color: #fff;
    border: none;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(5,150,105,0.3);
    transition: all 0.2s ease;
}
.btn-venta:hover,
.btn-venta:focus {
    background: linear-gradient(135deg, #047857, #065f46);
    box-shadow: 0 4px 12px rgba(5,150,105,0.4);
    transform: translateY(-1px);
    color: #fff;
}

/* Alerta PDF generado */
.pdf-generated-alert {
    animation: fadeInDown 0.4s ease;
    border-radius: 8px;
}
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== Login Page ===== */
.login-wrapper {
    display: flex;
    min-height: 100vh;
    font-family: 'Montserrat', sans-serif;
    background: #f0f2f5;
}

/* Panel izquierdo decorativo */
.login-brand-panel {
    flex: 0 0 42%;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.login-brand-panel::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 30% 70%, rgba(255,255,255,0.08) 0%, transparent 60%);
    pointer-events: none;
}

.login-brand-panel::after {
    content: '';
    position: absolute;
    bottom: -20%;
    right: -20%;
    width: 60%;
    height: 60%;
    background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);
    pointer-events: none;
}

.login-brand-content {
    text-align: center;
    color: #fff;
    z-index: 1;
    padding: 2rem;
    animation: fadeInUp 0.6s ease;
}

.login-brand-icon {
    font-size: 4rem;
    margin-bottom: 1.5rem;
    color: #acc825;
}

.login-brand-content h2 {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    letter-spacing: 1px;
}

.login-brand-content p {
    font-size: 1rem;
    opacity: 0.8;
    font-weight: 300;
    max-width: 280px;
    margin: 0 auto;
    line-height: 1.5;
}

/* Panel derecho formulario */
.login-form-panel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: #fff;
}

.login-form-container {
    width: 100%;
    max-width: 400px;
}

.login-logo-img {
    max-width: 180px;
    height: auto;
}

.login-title {
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.25rem;
    font-size: 1.6rem;
}

.login-subtitle {
    color: #94a3b8;
    font-size: 0.9rem;
    margin-bottom: 1.75rem;
    font-weight: 400;
}

.login-field-group {
    margin-bottom: 1.25rem;
}

.login-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.login-input {
    border: 2px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 0.7rem 1rem !important;
    font-size: 0.95rem !important;
    transition: all 0.2s ease !important;
    background: #f8fafc !important;
}

.login-input:focus {
    border-color: #acc825 !important;
    box-shadow: 0 0 0 3px rgba(172, 200, 37, 0.18) !important;
    background: #fff !important;
}

.login-input::placeholder {
    color: #cbd5e1;
}

/* Botón login */
.btn-login {
    background: linear-gradient(135deg, #2d2d2d, #1a1a1a);
    color: #acc825;
    border: none;
    border-radius: 10px;
    padding: 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
    transition: all 0.25s ease;
}

.btn-login:hover,
.btn-login:focus {
    background: linear-gradient(135deg, #acc825, #96b01e);
    color: #1a1a1a;
    box-shadow: 0 6px 20px rgba(172, 200, 37, 0.4);
    transform: translateY(-1px);
}

.btn-login:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* Footer */
.login-footer {
    text-align: center;
    margin-top: 2rem;
}

.login-divider {
    border-top: 1px solid #e2e8f0;
    margin-bottom: 1rem;
}

.login-version {
    display: block;
    font-size: 0.8rem;
    color: #94a3b8;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.login-credits {
    display: block;
    font-size: 0.75rem;
    color: #b0b8c4;
}

.login-credits-link {
    color: #acc825;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s;
}

.login-credits-link:hover {
    color: #96b01e;
    text-decoration: underline;
}

/* Animación entrada */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Responsive: en móvil el panel izquierdo se oculta (d-none d-md-flex) */
@media (max-width: 767.98px) {
    .login-form-panel {
        background: linear-gradient(180deg, #f0f4ff 0%, #fff 30%);
    }
    .login-form-container {
        max-width: 360px;
    }
}

/* ---------------------------------------------------------------------------
   Botones de descarga de documentos (PDF de dealer y de cliente)
   Sustituyen a los dos PNG con forma de icono de archivo. Se usan igual en el
   cotizador de ventanas y en el de vitrales.
   --------------------------------------------------------------------------- */
.wm-doc-btn {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 64px;              /* holgado para tocar con el dedo */
    padding: .75rem 1rem;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #cbd5e1;
    border-radius: .5rem;
    background-color: #fff;
    color: #1f2937;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    /* Solo color y sombra: mover la caja descuadraria la rejilla */
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.wm-doc-btn:hover,
.wm-doc-btn:focus {
    background-color: #f8fafc;
    border-color: #cbd5e1;
    box-shadow: 0 .25rem .75rem rgba(15, 23, 42, .12);
    color: #0f172a;
    text-decoration: none;
}

.wm-doc-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(172, 200, 37, .55);
}

/* Franja lateral: gris para la copia interna, verde de la casa para la del cliente */
.wm-doc-btn--dealer   { border-left-color: #5a5c69; }
.wm-doc-btn--customer { border-left-color: #acc825; }

.wm-doc-btn__icon {
    flex: 0 0 auto;
    margin-right: .875rem;
    font-size: 1.75rem;
    line-height: 1;
    color: #dc3545;
}

.wm-doc-btn__text  { flex: 1 1 auto; min-width: 0; }
.wm-doc-btn__title { display: block; font-weight: 700; font-size: .95rem; }

.wm-doc-btn__sub {
    display: block;
    font-size: .75rem;
    color: #475569;                /* slate-600: contraste suficiente */
    line-height: 1.3;
}

.wm-doc-btn__go {
    flex: 0 0 auto;
    margin-left: .75rem;
    color: #94a3b8;
}

.wm-doc-btn:hover .wm-doc-btn__go { color: #475569; }

/* ---------------------------------------------------------------------------
   Colores de ventana en el cotizador
   Los pinta un RadioButtonList cuyo texto lleva la imagen y el nombre, asi que
   el estilo va sobre la etiqueta que genera ASP.NET.
   --------------------------------------------------------------------------- */
.wm-colores label {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 .75rem;
    cursor: pointer;
    font-weight: 600;
    color: #495057;
}

/* El circulito del radio no se ve: con la palomita en la esquina de la imagen
   habia dos marcas para lo mismo y se prestaba a confusion. Se saca de la vista
   sin sacarlo del documento, porque sigue siendo el control de verdad -manda la
   seleccion al servidor, se recorre con el tabulador y las flechas, y es de
   quien cuelgan las reglas :checked de aqui abajo-. Por eso se esconde
   recortandolo y no con display:none, que lo dejaria fuera del tabulador y de
   los lectores de pantalla. */
.wm-colores input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    white-space: nowrap;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
}

/* Como el radio ya no se ve, el foco del teclado se dibuja sobre la imagen:
   sin esto, quien navegue con el tabulador no sabria donde esta. La segunda
   regla lo quita cuando el foco viene de un clic con el raton, que no lo
   necesita; los navegadores sin :focus-visible se quedan con la primera. */
.wm-colores input[type="radio"]:focus + label .wm-color-marco {
    outline: .1875rem solid #acc825;
    outline-offset: .1875rem;
}

.wm-colores input[type="radio"]:focus:not(:focus-visible) + label .wm-color-marco {
    outline: none;
}

/* Sin efecto al pasar el puntero: las imagenes de color no cambian de aspecto
   al pasar por encima. El cursor de mano de .wm-colores label ya indica que se
   pueden pulsar. */
/* 200 px de alto, como en Mexico: son fotos de la ventana completa y por
   debajo de ese tamano no se distingue el color del marco. */
.wm-color-img {
    max-height: 200px;
    max-width: 100%;
    border-radius: .35rem;
    display: block;
}

/* Marco de la imagen: existe solo para anclarle la palomita a la esquina. */
.wm-color-marco {
    position: relative;
    display: inline-block;
    line-height: 0;
}

/* El color elegido se marca con una palomita y no con un borde de color: un
   borde verde se confunde con el color de la ventana, sobre todo en el
   laminado oscuro. El radio marcado precede a su etiqueta, asi que se resuelve
   sin JavaScript.

   El simbolo va escapado ("\2713") en vez de escrito tal cual: asi esta hoja
   sigue siendo ASCII y no depende de como se decodifique el archivo. */
.wm-colores input[type="radio"]:checked + label .wm-color-marco::after {
    content: "\2713";
    position: absolute;
    top: -.4rem;
    right: -.4rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: #acc825;
    border: 2px solid #fff;
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.25rem;
    text-align: center;
    box-shadow: 0 .125rem .375rem rgba(0, 0, 0, .25);
}

/* El nombre del color elegido tambien se resalta, para quien no distinga bien
   la palomita verde sobre la imagen. */
.wm-colores input[type="radio"]:checked + label .wm-color-txt {
    color: #212529;
    font-weight: 700;
}

.wm-color-txt {
    display: block;
    margin-top: .5rem;
    font-size: .82rem;
}

/* ---------------------------------------------------------------------------
   Movimiento reducido
   A quien tenga activada la preferencia del sistema ("reducir movimiento") no
   se le muestran transiciones ni animaciones: a algunas personas les provocan
   mareo. Se acortan en vez de eliminarlas, para que los cambios de estado
   sigan viendose, solo que instantaneos.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}