/* ============================================================
   SICCOFIN - Estilos de la pagina de Login

   Diseno CLARO de UNA columna: fondo gris-azulado muy suave, una
   tarjeta blanca centrada con el logo arriba y un filete superior
   azul -> verde (los dos colores del logotipo). El color se usa con
   mesura: primario en titulo y boton, acento solo en filete y foco.

   COLORES: Login.aspx.cs inyecta las variables --lg-* leyendo del
   Web.config (appSettings LoginColorPrimario / LoginColorAcento).
   Los valores de respaldo de cada var() son los mismos por defecto.

   *** REGLA DE ORO (aprendida rompiendo el login tres veces) ***
   NUNCA cambiar la propiedad 'display' de los <table>, <tr>, <td>
   ni de .Caption dentro de #Content. Es el layout en TABLA del
   logon de XAF: al tocarlo, o el formulario se descuadra o las
   etiquetas se traslapan con los cuadros de texto. Sobre esos
   elementos SOLO se ajusta tipografia, color, borde y relleno.
   Y nunca 'background:' abreviado sobre controles DevExpress
   (borra sus sprites): usar background-color.
   ============================================================ */

html, body.Dialog {
    height: 100%;
    margin: 0;
    padding: 0;
}

body.Dialog {
    font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
    color: #1B2A41;
    background-color: #EEF2F7;
    /* Dos halos muy tenues con los colores del logo; el resto es papel claro. */
    background-image:
        radial-gradient(circle at 12% 10%, rgba(var(--lg-p-rgb, 31, 58, 95), .10), transparent 42%),
        radial-gradient(circle at 90% 92%, rgba(var(--lg-a-rgb, 78, 154, 46), .12), transparent 46%);
    background-attachment: fixed;
}

/* Centrado de la tarjeta. position:static anula el posicionamiento
   absoluto que la plantilla de XAF aplica a .PageContent. */
#PageContent.lg-page {
    position: static !important;
    width: auto !important;
    height: auto !important;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    box-sizing: border-box;
    overflow: visible !important;
}

#PageContent.lg-page form {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* ============================================================
   TARJETA: una columna (marca / encabezado / formulario / pie)
   ============================================================ */
.lg-card {
    display: grid;
    grid-template-columns: 1fr;
    width: 430px;
    max-width: 100%;
    background-color: #fff;
    border: 1px solid #E1E8F0;
    border-radius: 16px;
    box-shadow:
        0 1px 2px rgba(27, 42, 65, .06),
        0 18px 44px -18px rgba(27, 42, 65, .28);
    overflow: hidden;
    position: relative;
    animation: lg-in .4s cubic-bezier(.16, 1, .3, 1);
}

/* Filete superior: los dos colores del logotipo. */
.lg-card::before {
    content: "";
    display: block;
    height: 5px;
    background-image: linear-gradient(90deg, var(--lg-p, #1F3A5F) 0%, var(--lg-p, #1F3A5F) 55%, var(--lg-a, #4E9A2E) 100%);
}

@keyframes lg-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .lg-card { animation: none; }
}

/* ============================================================
   MARCA (logo + nombre + descripcion)
   ============================================================ */
.lg-brand {
    text-align: center;
    padding: 34px 40px 0;
}

.lg-brand .lg-logo {
    display: inline-block;
}

.lg-brand .lg-logo img {
    max-height: 74px;
    max-width: 100%;
    display: block;
}

.lg-brand h1 {
    margin: 16px 0 0;
    font-size: 21px;
    font-weight: 700;
    color: var(--lg-p, #1F3A5F);
    letter-spacing: .24em;
    /* compensa el espaciado de la ultima letra para que quede centrado */
    padding-left: .24em;
}

.lg-brand p {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: #6B7A8D;
}

/* ============================================================
   ENCABEZADO DEL FORMULARIO
   ============================================================ */
.lg-head {
    margin: 24px 40px 0;
    padding-top: 22px;
    border-top: 1px solid #E8EDF3;
    text-align: left;
}

.lg-head h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1B2A41;
}

.lg-head p {
    margin: 4px 0 0;
    font-size: 13px;
    color: #6B7A8D;
}

/* ============================================================
   Zona del formulario XAF
   ============================================================ */
.lg-card #Content {
    padding: 16px 40px 4px !important;
    text-align: center;
}

/* El logon de XAF se auto-centra con posicionamiento absoluto; dentro de la
   tarjeta eso lo desalinea. Se fuerza flujo normal y centrado. */
.lg-card #Content > div,
.lg-card #Content > table,
.lg-card #Content div[style*="absolute"],
.lg-card #Content table[style*="absolute"] {
    position: static !important;
    left: auto !important;
    top: auto !important;
    margin: 0 auto !important;
    float: none !important;
}

.lg-card #Content table {
    width: 100% !important;
    max-width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: left;
}

.lg-card .dxflFormLayout {
    margin: 0 auto !important;
}

/* Neutralizar el marco del dialogo interno de XAF */
.lg-card .Dialog, .lg-card .DialogContent,
.lg-card .DialogWindow, .lg-card .DialogBody {
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    position: static !important;
    margin: 0 auto !important;
}

/* Limpieza del cromo interno del logon (marcos y fondos del tema) */
.lg-card #Content table,
.lg-card #Content td,
.lg-card #Content div,
.lg-card #Content fieldset {
    background-color: transparent !important;
    border: 0 none !important;
}

/* Ocultar imagenes decorativas del template (icono usuario/llave y del boton).
   El logo institucional vive fuera de #Content. */
.lg-card #Content img {
    display: none !important;
}

/* COMPACTAR el espacio muerto del template SIN romper la tabla: se colapsa la
   ALTURA de las celdas vacias; conservan su display:table-cell. */
.lg-card #Content td {
    line-height: 1.35;
}

.lg-card #Content td:empty {
    line-height: 0 !important;
    font-size: 0 !important;
    padding: 0 !important;
    height: 0 !important;
}

.lg-card #Content tr[style*="height"] td {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Encabezado vacio del template (61px) y relleno de LogonContent (100px):
   son DIV / padding de tabla, seguro de tocar. */
.lg-card #Content #Logon_UPHeader,
.lg-card #Content #headerTableDiv,
.lg-card #Content .headerTable {
    display: none !important;
}

.lg-card #Content table.LogonContent {
    padding: 0 !important;
}

/* Texto general del template */
.lg-card #Content,
.lg-card #Content td,
.lg-card #Content span {
    color: #42526A !important;
    font-size: 13.5px;
    font-weight: 400;
}

/* Etiquetas de los campos. NO cambiar su display (son <td> del layout). */
.lg-card #Content .Caption,
.lg-card #Content .dxflCaptionCell,
.lg-card #Content label {
    color: #42526A !important;
    font-weight: 600 !important;
    font-size: 12.5px !important;
    letter-spacing: .01em;
    text-transform: none;
    white-space: nowrap;
    vertical-align: middle;
    padding-bottom: 6px !important;
}

/* ============================================================
   Editores (usuario / contrasena)
   ============================================================ */
.lg-card #Content table.dxeTextBox,
.lg-card #Content table.dxeButtonEdit,
.lg-card #Content table.dxeTextBoxSys,
.lg-card #Content table.dxeButtonEditSys,
.lg-card #Content .dxeTextBox,
.lg-card #Content .dxeButtonEdit {
    background-color: #F7F9FC !important;
    border: 1px solid #D8E0EA !important;
    border-radius: 10px !important;
    width: 100% !important;
    box-sizing: border-box;
    margin-bottom: 14px !important;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.lg-card #Content table.dxeTextBox:hover,
.lg-card #Content table.dxeButtonEdit:hover {
    border-color: #B9C6D6 !important;
}

/* Celda que contiene el <input> (td.dxic): solo padding. */
.lg-card #Content .dxeEditArea,
.lg-card #Content td.dxeEditAreaSys,
.lg-card #Content td.dxic {
    background-color: transparent !important;
    color: #1B2A41 !important;
    font-size: 14.5px !important;
    padding: 12px 14px !important;
}

.lg-card #Content td.dxic input {
    width: 100% !important;
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    font-size: 14.5px !important;
    color: #1B2A41 !important;
}

/* Foco: borde primario + halo del acento (verde del logo). */
.lg-card #Content table.dxeFocused,
.lg-card #Content .dxeFocused {
    border-color: var(--lg-p, #1F3A5F) !important;
    box-shadow: 0 0 0 4px rgba(var(--lg-a-rgb, 78, 154, 46), .22) !important;
    background-color: #fff !important;
}

/* ============================================================
   BOTON "Iniciar sesion"
   XAF lo rinde como un MENU de DevExpress:
     div#Logon_UPPopupActions > .ACH > .dxmLite_* > .dxm-main
       > ul.dxm-image-l > li.dxm-item > a.dxm-content > span
   ============================================================ */
.lg-card #Content #Logon_UPPopupActions,
.lg-card #Content #Logon_PopupActions,
.lg-card #Content .ACH,
.lg-card #Content div[class*="dxmLite"],
.lg-card #Content .dxm-main,
.lg-card #Content ul.dxm-image-l {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    text-align: center !important;
    margin: 10px 0 2px !important;
    box-sizing: border-box !important;
}

/* Este <ul> es del MENU, no de la tabla del logon: aqui si es seguro. */
.lg-card #Content ul.dxm-image-l,
.lg-card #Content .dxm-main ul {
    display: block !important;
    list-style: none !important;
    padding: 0 !important;
}

.lg-card #Content li.dxm-item {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background-color: transparent !important;
    border: none !important;
    list-style: none !important;
}

/* El <a> ES la superficie real del boton */
.lg-card #Content li.dxm-item > a.dxm-content,
.lg-card #Content a.dxm-content {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 13px 18px !important;
    text-align: center !important;
    text-decoration: none !important;
    background-color: var(--lg-p, #1F3A5F) !important;
    background-image: none !important;
    border: none !important;
    border-radius: 10px !important;
    box-shadow: 0 6px 16px -6px rgba(var(--lg-p-rgb, 31, 58, 95), .55);
    transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.lg-card #Content a.dxm-content:hover {
    background-color: var(--lg-p-osc, #162B47) !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -8px rgba(var(--lg-p-rgb, 31, 58, 95), .60);
}

.lg-card #Content a.dxm-content:active {
    transform: translateY(0);
}

.lg-card #Content a.dxm-content:focus-visible {
    outline: 3px solid rgba(var(--lg-a-rgb, 78, 154, 46), .55);
    outline-offset: 2px;
}

/* Rotulo SIEMPRE blanco (gana a la regla general de color de #Content) */
.lg-card #Content li.dxm-item,
.lg-card #Content li.dxm-item *,
.lg-card #Content li.dxm-item a,
.lg-card #Content li.dxm-item span,
.lg-card #Content li.dxm-item td {
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    letter-spacing: .02em;
    text-transform: none;
}

/* Variante dxbButton, por si el tema lo rinde asi */
.lg-card #Content .dxbButton,
.lg-card #Content .dxbButtonSys,
.lg-card #Content div.dxbButton,
.lg-card #Content a.dxbButton,
.lg-card #Content div.dxbButtonSys,
.lg-card #Content input[type="submit"] {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    background-color: var(--lg-p, #1F3A5F) !important;
    background-image: none !important;
    border: none !important;
    border-radius: 10px !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    padding: 13px 20px !important;
    margin: 10px 0 4px !important;
    cursor: pointer;
}

.lg-card .dxbButtonHover,
.lg-card .dxbButtonHover.dxbButtonSys,
.lg-card #Content .dxbButton:hover {
    background-color: var(--lg-p-osc, #162B47) !important;
}

.lg-card .dxbButton .dxb,
.lg-card .dxbButtonSys .dxb,
.lg-card #Content .dxbButton *,
.lg-card #Content .dxbButtonSys * {
    color: #fff !important;
    background-color: transparent !important;
    font-weight: 600 !important;
}

/* Mensajes de error de autenticacion */
.lg-card .xafErrorMessage, .lg-card .ErrorInfo, .lg-card .dxeErrorCell {
    color: #B42318 !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
}

/* ============================================================
   Pie
   ============================================================ */
.lg-footer {
    text-align: center;
    color: #8A97A8;
    font-size: 11.5px;
    margin: 8px 40px 0;
    padding: 14px 0 22px;
    border-top: 1px solid #E8EDF3;
}

.lg-footer a {
    color: var(--lg-p, #1F3A5F) !important;
    text-decoration: none;
    background-color: transparent !important;
    padding: 0 !important;
    font-weight: 600;
}

.lg-footer a:hover {
    text-decoration: underline;
}

/* ============================================================
   Responsivo
   ============================================================ */
@media (max-width: 480px) {
    .lg-card { border-radius: 14px; }
    .lg-brand { padding: 28px 22px 0; }
    .lg-brand .lg-logo img { max-height: 60px; }
    .lg-head { margin: 20px 22px 0; }
    .lg-card #Content { padding: 14px 22px 4px !important; }
    .lg-footer { margin: 8px 22px 0; }
}

/* Mensaje del template de XAF ("¡Bienvenido! Por favor ingrese..."): duplica el
   subtitulo de .lg-head. Se oculta el <span> (en linea), NO su celda. */
.lg-card #Content [testfield="LogonText"],
.lg-card #Content span.StaticText {
    display: none !important;
}

/* El sistema entrega las etiquetas en MAYUSCULAS ("NOMBRE DE USUARIO:"). En el
   login se muestran en tipo oracion: minusculas + primera letra mayuscula.
   Solo text-transform: no se toca el display de la celda. */
.lg-card #Content td.Caption,
.lg-card #Content .dxflCaptionCell {
    text-transform: lowercase !important;
}

.lg-card #Content td.Caption::first-letter,
.lg-card #Content .dxflCaptionCell::first-letter {
    text-transform: uppercase !important;
}

/* El menu de DevExpress trae rellenos propios (4 + 2 + 3 px) que dejaban el
   boton mas angosto y corrido respecto a los cuadros de texto. */
.lg-card #Content #Logon_PopupActions,
.lg-card #Content .ACH,
.lg-card #Content .dxm-main,
.lg-card #Content li.dxm-item {
    padding-left: 0 !important;
    padding-right: 0 !important;
}