/* Controles de Windows 10 para las pantallas clon (ADR-0005): mismas medidas en píxeles que el
   diseñador original (fuente en puntos × 96/72, redondeado hacia arriba como GDI: 10 pt = 14 px)
   y colores del sistema. */
:root {
    --control: #f0f0f0;          /* SystemColors.Control */
    --ventana: #ffffff;          /* SystemColors.Window */
    --borde-caja: #7a7a7a;
    --boton: #e1e1e1;
    --borde-boton: #adadad;
    --activo: #0078d7;
    --activo-fondo: #e5f1fb;
    --pulsado: #005499;
    --pulsado-fondo: #cce4f7;
}

html,
body.clon {
    margin: 0;
    height: 100%;
    background: var(--control);
    color: #000;
    font: 11px "Microsoft Sans Serif", "MS Sans Serif", Tahoma, sans-serif;
    overflow: hidden;
}

/* El formulario a su tamaño de diseño; el script lo escala y lo centra. */
.ventana {
    position: absolute;
    left: 0;
    top: 0;
    background: var(--control);
    transform-origin: 0 0;
}

.ventana > form,
.ventana > div {
    position: relative;
    width: 100%;
    height: 100%;
}

.ventana .control {
    position: absolute;
    box-sizing: border-box;
    margin: 0;
}

/* Label con AutoSize: TextRenderer pone el texto 2 px a la derecha y 1 px más abajo que el
   navegador en la misma posición (medido con Arial 13 px y Microsoft Sans Serif 15 px). */
.etiqueta {
    padding: 1px 0 0 2px;
    white-space: nowrap;
    line-height: normal;
}

.caja {
    border: 1px solid var(--borde-caja);
    background: var(--ventana);
    padding: 1px 2px;
    outline: none;
    color: #000;
}

/* Borde del tema de Windows 10 (aero.msstyles 19041): encima #171717, con el foco #0078D7 (gana
   el foco aunque el ratón esté encima). */
.caja:hover {
    border-color: #171717;
}

.caja:focus {
    border-color: var(--activo);
}

.mayusculas {
    text-transform: uppercase;
}

.boton {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 3px 2px 4px;
    border: 1px solid var(--borde-boton);
    background: var(--boton);
    color: #000;
    font: 11px "Microsoft Sans Serif", "MS Sans Serif", Tahoma, sans-serif;
    cursor: default;
}

.boton:hover {
    background: var(--activo-fondo);
    border-color: var(--activo);
}

.boton:focus {
    outline: none;
    border-color: var(--activo);
}

.teclado .boton:focus span {
    outline: 1px dotted #000;
}

.boton img {
    display: block;
    width: 32px;
    height: 32px;
}

/* Negrita de una fuente que no tiene negrita (Microsoft Sans Serif): GDI la simula engordando cada
   letra 1 px y separándolas más que el navegador. Fuente normal, 1 px de sombra y 0,6 px entre
   letras da el mismo ancho que TextRenderer con 16 px (con 15 px, 0,55 px). */
.negrita-gdi {
    font-weight: normal !important;
    text-shadow: 1px 0 0 currentColor;
    letter-spacing: 0.6px;
}

/* Visible = False, aunque el control tenga su propio display. */
[hidden] {
    display: none !important;
}

/* PictureBox con SizeMode Normal: la imagen en 0,0 y recortada. El BackgroundImage va en línea con
   su posición calculada (ImageLayout.Center solo centra si la imagen cabe; si no, la deja en 0). */
.foto {
    overflow: hidden;
}

.foto > img {
    position: absolute;
    left: 0;
    top: 0;
}

/* BorderStyle.Fixed3D: borde hundido de 2 px. Las líneas claras (abajo y derecha) se quedan con
   las esquinas de arriba a la derecha y abajo a la izquierda, como DrawEdge. No ocupa sitio:
   el contenido va 2 px hacia dentro (padding o posiciones). */
.hundido {
    box-shadow:
        inset -1px -1px 0 #ffffff,
        inset 1px 1px 0 #a0a0a0,
        inset -2px -2px 0 #e3e3e3,
        inset 2px 2px 0 #696969;
}

/* MenuStrip (ToolStripProfessionalRenderer con los colores del sistema) */
.barra-menu {
    background: linear-gradient(to right, #f0f0f0, #fcfcfc);
}

/* Button de WinForms con imagen y texto (TextImageRelation.Overlay): cada uno se alinea por su
   cuenta dentro del área útil, que empieza 4 px hacia dentro del borde. Aquí ImageAlign =
   TopCenter y TextAlign = BottomCenter; «medio» es MiddleCenter (sin imagen). */
.boton-wf {
    position: relative;
    box-sizing: border-box;
    padding: 0;
    border: 1px solid var(--borde-boton);
    background: var(--boton);
    color: #000;
    font: 13px Arial, sans-serif;
    cursor: default;
    outline: none;
}

.boton-wf:hover {
    border-color: var(--activo);
    background: var(--activo-fondo);
}

.boton-wf:focus {
    border-color: var(--activo);
}

.boton-wf:active {
    border-color: var(--pulsado);
    background: var(--pulsado-fondo);
}

/* BackColor propio (UseVisualStyleBackColor = False): el tema pinta el marco y el color de fondo
   va 4 px hacia dentro (ButtonStandardAdapter.PaintThemedButtonBackground). */
.boton-wf.con-fondo,
.boton-wf.con-fondo:hover,
.boton-wf.con-fondo:active {
    background: var(--fondo, #ffffff);
    box-shadow: inset 0 0 0 3px var(--boton);
}

.boton-wf.con-fondo:hover {
    box-shadow: inset 0 0 0 3px var(--activo-fondo);
}

.boton-wf.con-fondo:active {
    box-shadow: inset 0 0 0 3px var(--pulsado-fondo);
}

.boton-wf > .imagen {
    position: absolute;
    left: 3px;
    right: 3px;
    top: 3px;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.boton-wf > .imagen img {
    display: block;
}

/* El texto va abajo, en el área útil (114 px de ancho, menos los 2 px por lado que deja GDI al
   partir líneas). La distancia al borde está calibrada con TextRenderer, porque el navegador no
   pone la línea base donde GDI: 2 px con Arial 9,75 pt (13 px) y 4 px con Arial 10 pt (14 px,
   clase «arial10»). */
.boton-wf > .texto {
    position: absolute;
    left: 3px;
    right: 3px;
    padding: 0 2px;
    bottom: 2px;
    line-height: 16px;
    text-align: center;
    pointer-events: none;
}

/* GDI ajusta las letras a píxeles enteros y a 14 px le salen algo más estrechas. */
.boton-wf.arial10 {
    font-size: 14px;
    letter-spacing: -0.3px;
}

.boton-wf.arial10 > .texto {
    bottom: 4px;
}

/* Sin calibrar todavía con 13 px. */
.boton-wf.arial10 > .texto.medio {
    transform: translateY(calc(-50% - 2px));
}

.boton-wf > .texto.medio {
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
}

/* Button clásico: programas que no activan los estilos visuales (ROS300NR no llama a
   EnableVisualStyles ni tiene manifiesto; confirmado con una foto en Windows 10). Los colores salen
   del BackColor del botón: --cara (el fondo), --luz (arriba e izquierda) y --sombra (la línea de
   dentro de abajo y la derecha; la de fuera es negra). Blanco: luz blanca y sombra #555555. Con el
   foco es el botón predeterminado: marco negro de 1 px y el relieve 1 px más adentro. Pulsado:
   marco negro, marco de sombra y el contenido 1 px a la derecha y abajo. No cambia con el ratón
   encima. */
.boton-wf.clasico,
.boton-wf.clasico:hover {
    --cara: #ffffff;
    --luz: #ffffff;
    --sombra: #555555;
    border: 0;
    background: var(--cara);
    box-shadow: inset -1px -1px 0 #000, inset -2px -2px 0 var(--sombra), inset 1px 1px 0 var(--luz);
}

.boton-wf.clasico:focus {
    box-shadow: inset 0 0 0 1px #000, inset -2px -2px 0 #000, inset -3px -3px 0 var(--sombra), inset 2px 2px 0 var(--luz);
}

.boton-wf.clasico:active {
    box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px var(--sombra);
}

/* El área útil del clásico deja la imagen 2 px más abajo y el texto 1 px más arriba que con el
   tema (medido con Arial 9,75 y 10 pt). */
.boton-wf.clasico > .imagen {
    top: 5px;
}

/* Mismo ancho útil que con borde (4 px por lado): GDI+ parte «Consulta Tesoreria» en dos líneas. */
.boton-wf.clasico > .texto {
    left: 4px;
    right: 4px;
    bottom: 3px;
}

.boton-wf.clasico.arial10 > .texto {
    bottom: 5px;
}

.boton-wf.clasico:active > .imagen,
.boton-wf.clasico:active > .texto {
    translate: 1px 1px;
}

/* Rectángulo de foco punteado: Windows solo lo dibuja después de usar el teclado (clase «teclado»
   en <html>, la pone clon-windows.js). */
.teclado .boton-wf:focus::after {
    content: "";
    position: absolute;
    inset: 2px;
    border: 1px dotted #000;
    pointer-events: none;
}

/* En el clásico, 4 px hacia dentro del borde y con los puntos de DrawFocusRect: uno sí y uno no
   desde la esquina de arriba a la izquierda. Abajo y a la derecha empiezan en blanco porque el
   rectángulo tiene lados pares (botones de 122×80). */
.teclado .boton-wf.clasico:focus::after {
    inset: 4px;
    border: 0;
    background:
        repeating-linear-gradient(to right, #000 0 1px, transparent 1px 2px) top / 100% 1px no-repeat,
        repeating-linear-gradient(to bottom, #000 0 1px, transparent 1px 2px) left / 1px 100% no-repeat,
        repeating-linear-gradient(to right, transparent 0 1px, #000 1px 2px) bottom / 100% 1px no-repeat,
        repeating-linear-gradient(to bottom, transparent 0 1px, #000 1px 2px) right / 1px 100% no-repeat;
}

/* CheckBox de WinForms con estilos visuales. La casilla es la imagen de 13 px del tema de Windows
   10 (aero.msstyles 19041; las tiendas no tienen Windows 11, que la dibuja azul): img/clon/casilla.png
   lleva sin marcar y marcada × normal, encima, pulsada y desactivada. Va 1 px por debajo del borde
   de arriba del control (AutoSize, 17 px de alto). */
.casilla {
    display: block;
    white-space: nowrap;
    cursor: default;
}

.casilla > input {
    position: absolute;
    left: 0;
    top: 1px;
    width: 13px;
    height: 13px;
    margin: 0;
    appearance: none;
    background: url(/img/clon/casilla.png) 0 0 no-repeat;
    outline: none;
}

.casilla:hover > input { background-position: 0 -13px; }
.casilla:active > input { background-position: 0 -26px; }
.casilla > input:disabled { background-position: 0 -39px; }
.casilla > input:checked { background-position: 0 -52px; }
.casilla:hover > input:checked { background-position: 0 -65px; }
.casilla:active > input:checked { background-position: 0 -78px; }
.casilla > input:checked:disabled { background-position: 0 -91px; }

.casilla > .texto {
    position: absolute;
    top: 0;
    pointer-events: none;
}

.teclado .casilla > input:focus ~ .texto {
    outline: 1px dotted #000;
}

/* ComboBox DropDownList sin estilos visuales (Gpv.comboClasico), medido con WinForms: borde hundido
   de 2 px, botón de 17 px con relieve y flecha negra de 7 px; con el foco, el texto en blanco
   sobre azul con el punteado de foco (zona de 3 px hacia dentro y 20 a la derecha). */
.combo-clasico {
    position: absolute;
    box-sizing: border-box;
    background: var(--ventana);
    color: #000;
    font: 11px "Microsoft Sans Serif", "MS Sans Serif", Tahoma, sans-serif;
    cursor: default;
    outline: none;
    box-shadow:
        inset -1px -1px 0 #ffffff,
        inset 1px 1px 0 #a0a0a0,
        inset -2px -2px 0 #e3e3e3,
        inset 2px 2px 0 #696969;
}

/* El texto lo pinta el control nativo con GDI: 1 px más adentro y letras algo más estrechas. */
.combo-clasico > .valor {
    position: absolute;
    left: 3px;
    top: 3px;
    right: 20px;
    bottom: 3px;
    padding: 1px 0 0 1px;
    line-height: 14px;
    letter-spacing: -0.3px;
    white-space: nowrap;
    overflow: hidden;
}

/* El punteado de foco invierte los colores: un marco de 1 px con #FF8728 y negro alternos y el
   azul por dentro. Medido con WinForms. */
.combo-clasico:focus > .valor {
    background:
        repeating-linear-gradient(to right, #ff8728 0 1px, #000 1px 2px) top / 100% 1px no-repeat,
        repeating-linear-gradient(to right, #ff8728 0 1px, #000 1px 2px) bottom / 100% 1px no-repeat,
        repeating-linear-gradient(to bottom, #ff8728 0 1px, #000 1px 2px) left / 1px 100% no-repeat,
        repeating-linear-gradient(to bottom, #ff8728 0 1px, #000 1px 2px) right / 1px 100% no-repeat,
        linear-gradient(var(--activo), var(--activo)) 1px 1px / calc(100% - 2px) calc(100% - 2px) no-repeat;
    color: #fff;
}

.combo-clasico > .flecha {
    position: absolute;
    right: 2px;
    top: 2px;
    bottom: 2px;
    width: 17px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h7v1H0zM1 1h5v1H1zM2 2h3v1H2zM3 3h1v1H3z'/%3E%3C/svg%3E") 5px 7px no-repeat, var(--control);
    box-shadow:
        inset -1px -1px 0 #696969,
        inset -2px -2px 0 #a0a0a0,
        inset 1px 1px 0 #e3e3e3,
        inset 2px 2px 0 #ffffff;
}

.combo-clasico.abierto > .flecha {
    background-position: 6px 8px, 0 0;
    box-shadow: inset 0 0 0 1px #a0a0a0;
}

/* La lista desplegada: borde negro de 1 px y una fila de 13 px por opción. */
.combo-clasico-lista {
    position: absolute;
    z-index: 50;
    box-sizing: border-box;
    border: 1px solid #000;
    background: var(--ventana);
    color: #000;
    font: 11px "Microsoft Sans Serif", "MS Sans Serif", Tahoma, sans-serif;
    cursor: default;
}

.combo-clasico-lista > div {
    height: 13px;
    padding: 0 2px;
    line-height: 13px;
    white-space: nowrap;
}

.combo-clasico-lista > .marcada {
    background: var(--activo);
    color: #fff;
}

/* MessageBox de Windows 10 */
.msgbox-fondo {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    z-index: 1000;
}

.msgbox {
    min-width: 180px;
    max-width: min(460px, calc(100vw - 16px));
    background: var(--ventana);
    border: 1px solid #999;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    font: 12px "Segoe UI", Tahoma, sans-serif;
}

.msgbox-titulo {
    height: 30px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.msgbox-cerrar {
    width: 46px;
    height: 30px;
    border: 0;
    background: transparent;
    font: 16px "Segoe UI", sans-serif;
}

.msgbox-cerrar:hover {
    background: #e81123;
    color: #fff;
}

.msgbox-cuerpo {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 24px 26px 10px;
}

.msgbox-cuerpo img {
    width: 32px;
    height: 32px;
    flex: none;
}

.msgbox-texto {
    padding-top: 8px;
    white-space: pre-wrap;
}

.msgbox-cuerpo.sin-icono {
    padding-left: 12px;
}

.msgbox-cuerpo.sin-icono .msgbox-texto {
    padding-top: 0;
}

.msgbox-pie {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    padding: 11px 10px;
    background: var(--control);
}

.msgbox-pie button {
    min-width: 75px;
    height: 23px;
    border: 1px solid var(--borde-boton);
    background: var(--boton);
    font: 12px "Segoe UI", Tahoma, sans-serif;
    outline: none;
}

.msgbox-pie button:focus {
    border-color: var(--activo);
}

.msgbox-pie button:hover {
    background: var(--activo-fondo);
}

.msgbox-cerrar:disabled {
    color: #a0a0a0;
}

.msgbox-cerrar:disabled:hover {
    background: transparent;
    color: #a0a0a0;
}

/* Formulario modal dentro de la página (Gpv.ventanaModal): marco de Windows 10 medido con la foto de
   «Ingresar al banco...» de Caja: borde de 1 px, título blanco de 25 px con el icono del formulario
   y Segoe UI 9 pt, y la sombra de la ventana. */
.modal-fondo {
    position: absolute;
    inset: 0;
    z-index: 900;
}

.modal-ventana {
    position: absolute;
    border: 1px solid #686868;
    border-top-color: #707070;
    border-bottom-color: #707070;
    background: #ffffff;
    box-shadow: 0 0 7px rgba(0, 0, 0, 0.3);
}

.modal-titulo {
    position: relative;
    height: 25px;
    background: #ffffff;
    font: 12px "Segoe UI", Tahoma, sans-serif;
    color: #000000;
    user-select: none;
}

/* Gana a la separación de letras de .vb6 * (clon-vb6.css) cuando el modal va dentro de una ventana VB6. */
.modal-fondo .modal-titulo,
.modal-fondo .modal-nombre {
    letter-spacing: normal;
    text-shadow: none;
}

.modal-icono {
    position: absolute;
    left: 3px;
    top: 3px;
    width: 16px;
    height: 16px;
}

.modal-nombre {
    position: absolute;
    left: 23px;
    top: 0;
    line-height: 23px;
    white-space: pre;
}

.modal-cerrar {
    position: absolute;
    right: 0;
    top: 0;
    width: 30px;
    height: 25px;
    border: 0;
    padding: 0;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' shape-rendering='crispEdges'%3E%3Cpath d='M0 0L10 10M10 0L0 10' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") no-repeat 10px 7px;
}

.modal-cerrar:hover {
    background-color: #e81123;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' shape-rendering='crispEdges'%3E%3Cpath d='M0 0L10 10M10 0L0 10' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E");
}

.modal-cliente {
    position: relative;
    overflow: hidden;
}

/* Ventana de herramientas (BorderStyle 4/5), medida con la foto de «Albaranes Nuevos»: sin icono, el
   texto en 3 y la X de 19×19 (a 1 px del borde derecho y 2 del de arriba) con su aspa gruesa de 5×5;
   con el ratón encima, roja #C75050 y el aspa blanca. */
.herramienta .modal-icono {
    display: none;
}

.herramienta .modal-nombre {
    left: 3px;
}

.herramienta .modal-cerrar {
    right: 1px;
    top: 2px;
    width: 19px;
    height: 19px;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h2v1H0zM3 0h2v1H3zM1 1h3v1H1zM2 2h1v1H2zM1 3h3v1H1zM0 4h2v1H0zM3 4h2v1H3z'/%3E%3C/svg%3E") no-repeat 7px 7px;
}

.herramienta .modal-cerrar:hover {
    background-color: #c75050;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M0 0h2v1H0zM3 0h2v1H3zM1 1h3v1H1zM2 2h1v1H2zM1 3h3v1H1zM0 4h2v1H0zM3 4h2v1H3z'/%3E%3C/svg%3E");
}

/* BorderStyle Sizable (foto del cierre diario de Caja): título de 30 px, icono en 8,6, texto en 30 y
   los tres botones de 46 px con sus símbolos de 10 px. */
.redimensionable .modal-titulo {
    height: 30px;
}

.redimensionable .modal-icono {
    left: 8px;
    top: 6px;
}

.redimensionable .modal-nombre {
    left: 30px;
    line-height: 29px;
}

.redimensionable .modal-cerrar,
.redimensionable .modal-maximizar,
.redimensionable .modal-minimizar {
    position: absolute;
    top: 0;
    width: 46px;
    height: 30px;
    border: 0;
    padding: 0;
    background-color: transparent;
    background-repeat: no-repeat;
}

.redimensionable .modal-cerrar {
    background-position: 18px 9px;
}

.redimensionable .modal-maximizar {
    right: 46px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' shape-rendering='crispEdges'%3E%3Crect x='0.5' y='0.5' width='9' height='9' fill='none' stroke='%23000'/%3E%3C/svg%3E");
    background-position: 18px 9px;
}

.redimensionable .modal-minimizar {
    right: 92px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='1' shape-rendering='crispEdges'%3E%3Crect width='10' height='1' fill='%23000'/%3E%3C/svg%3E");
    background-position: 19px 14px;
}

.redimensionable .modal-maximizar:hover,
.redimensionable .modal-minimizar:hover {
    background-color: #e5e5e5;
}