:root {
    --azul-oscuro: #203a43;
    --azul: #2c5364;
    --azul-claro: #38678f;
    --gris-fondo: #f2f5f9;
    --borde: #d7e3ec;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Segoe UI", Arial, sans-serif;
    background: var(--gris-fondo);
    color: #1a1a2e;
}

.sie-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(90deg, #0f2027, var(--azul-oscuro), var(--azul));
    color: #fff;
    padding: 10px 24px;
}

.sie-marca { display: flex; align-items: baseline; gap: 10px; }
.sie-logo { font-size: 22px; font-weight: 700; letter-spacing: 2px; color: #9fd3e6; }
.sie-sub { font-size: 13px; opacity: .8; }

.sie-herramientas { display: flex; align-items: center; gap: 12px; }
.sie-usuario { font-weight: 600; }
.sie-empresa { font-size: 12px; background: rgba(255,255,255,.15); padding: 3px 10px; border-radius: 10px; }

.inline { display: inline; margin: 0; }
.btn-cerrar {
    background: #e08e0b;
    color: #fff;
    border: 0;
    border-radius: 6px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 13px;
}
.btn-cerrar:hover { background: #cf7f04; }

.sie-main { padding: 24px; }

.tarjeta-login {
    max-width: 380px;
    margin: 60px auto;
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(44, 83, 100, .12);
}
.tarjeta-cuerpo { padding: 28px; }

.logo-entrada { text-align: center; margin-bottom: 18px; }
.emblem {
    width: 64px; height: 64px;
    margin: 0 auto 10px auto;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--azul-oscuro), var(--azul-claro));
    color: #9fd3e6;
    font-weight: 700; letter-spacing: 2px;
    border-radius: 16px;
    font-size: 20px;
}
.ayuda { color: #6b7d88; font-size: 13px; margin: 4px 0 0 0; }

.form-login label { display: block; margin: 12px 0 4px; font-size: 13px; font-weight: 600; color: var(--azul); }
.form-login input, .form-login select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--borde);
    border-radius: 8px;
    font-size: 14px;
}
.form-login input:focus, .form-login select:focus { outline: 2px solid var(--azul-claro); border-color: transparent; }

.btn-primario {
    margin-top: 18px;
    width: 100%;
    background: var(--azul);
    color: #fff;
    border: 0;
    border-radius: 8px;
    padding: 12px;
    font-size: 15px;
    cursor: pointer;
}
.btn-primario:hover { background: var(--azul-oscuro); }

.alerta { padding: 10px 12px; border-radius: 8px; margin-bottom: 10px; font-size: 13px; }
.alerta.error { background: #fdecea; color: #b03a2e; border-left: 4px solid #b03a2e; }
.alerta.aviso { background: #fff4e5; color: #7e5b12; border-left: 4px solid #e08e0b; }
.alerta.ok-msg { background: #eafaf1; color: #146b3a; border-left: 4px solid #27ae60; }
.alerta.ok-msg a { color: #146b3a; font-weight: 600; }

.panel.ancho { grid-column: 1 / -1; }
.form-pagos input, .form-pagos select { width: 100%; padding: 9px 11px; border: 1px solid var(--borde); border-radius: 8px; font-size: 14px; }
.form-pagos label { display: block; font-size: 12px; font-weight: 600; color: var(--azul); margin: 8px 0 4px; }
.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.fila-mora { margin-top: 10px; align-items: end; }
.fila-mora .chk { display: flex; align-items: center; gap: 8px; padding: 10px 0; }
.fila-mora .chk input { width: auto; }
.btn-peligro { background: #c0392b; }
.btn-peligro:hover { background: #a93226; }
.notita { color: #7a6a4f; font-size: 11px; margin-top: 10px; }
.fila-activa td { background: #eaf3f8 !important; font-weight: 600; }
.barra-busqueda label { padding: 10px 0; font-weight: 600; color: var(--azul); font-size: 13px; }
.barra-busqueda input[type="number"], .barra-busqueda select { padding: 10px 12px; border: 1px solid var(--borde); border-radius: 8px; font-size: 14px; }
.tabla-resumen { max-width: 480px; }
.validation-summary-errors { list-style: none; padding: 10px 12px; margin: 0 0 10px 0; background: #fdecea; color: #b03a2e; border-left: 4px solid #b03a2e; border-radius: 8px; font-size: 13px; }

.bienvenida h1 { margin: 0 0 6px 0; color: var(--azul-oscuro); }
.bienvenida p { color: #52646f; margin: 0; }

.menu-modulos h2 { color: var(--azul); border-bottom: 2px solid var(--azul); padding-bottom: 6px; }
.grupo h3 { color: var(--azul-claro); margin: 18px 0 8px; }
.tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }

.modulo {
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: 10px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-decoration: none;
    color: var(--azul-oscuro);
    font-weight: 600;
    cursor: default;
}
.modulo .estado { font-size: 11px; font-weight: 500; color: #e08e0b; }
.modulo.en-progreso { opacity: .85; }
.modulo.listo { border-color: #27ae60; }
.modulo .estado-ok { font-size: 11px; font-weight: 600; color: #15803d; background: #eafaf1; align-self: flex-start; padding: 2px 8px; border-radius: 10px; }

.barra-busqueda { display: flex; gap: 10px; margin: 14px 0 18px; max-width: 720px; }
.barra-busqueda input { flex: 1; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 8px; font-size: 14px; }
.btn-buscar { width: auto; margin-top: 0; padding: 10px 22px; }

.boton-atras { color: var(--azul); text-decoration: none; font-size: 13px; font-weight: 600; }
.boton-atras:hover { color: var(--azul-oscuro); }

.tabla-datos { border-collapse: collapse; width: 100%; background: #fff; border: 1px solid var(--borde); border-radius: 8px; overflow: hidden; font-size: 13px; }
.tabla-datos thead th { background: var(--azul); color: #fff; text-align: left; padding: 8px 10px; }
.tabla-datos td { padding: 7px 10px; border-bottom: 1px solid var(--borde); }
.tabla-datos tr:nth-child(even) td { background: #f7fafc; }
.tabla-datos tr:hover td { background: #eaf3f8; }

.btn-mini { background: var(--azul-claro); color: #fff; text-decoration: none; font-size: 12px; padding: 4px 10px; border-radius: 6px; }
.btn-mini:hover { background: var(--azul); }

.columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin: 16px 0; }
.columnas.tres { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.panel { background: #fff; border: 1px solid var(--borde); border-radius: 10px; padding: 16px; }
.panel h3 { margin: 0 0 10px; color: var(--azul); font-size: 14px; border-bottom: 1px solid var(--borde); padding-bottom: 6px; }

.ficha { margin: 0; display: grid; grid-template-columns: 110px 1fr; row-gap: 5px; }
.ficha dt { color: #6b7d88; font-size: 12px; font-weight: 600; }
.ficha dd { margin: 0; font-size: 13px; }

.resumen-deuda { margin-top: 10px; font-size: 13px; color: var(--azul-oscuro); background: #eef3f6; padding: 8px 12px; border-radius: 8px; display: inline-block; }
.pago-pendiente td { background: #fdecea80; }
.pago-cubierto td { background: #ffffff; }
.tabla-datos tr.pago-pendiente:hover td { background: #fdecea; }.cascaron-rojo td, .cascaron-rojo th, .nota-roja { color: #c0392b !important; }
.fila-duplicada td { background: #fff6d6 !important; }
.fila-planta td { background: #eef3e6 !important; }
.form-linea { display: flex; gap: 10px; align-items: center; }
.form-linea select { padding: 6px 10px; border: 1px solid var(--borde); border-radius: 6px; }
.tabla-scroll { overflow-x: auto; }
.tabla { border-collapse: collapse; width: 100%; font-size: 12px; }
.tabla th, .tabla td { padding: 6px 8px; border: 1px solid #d8e2ea; text-align: right; }
.tabla thead th { background: var(--azul); color: #fff; text-align: center; }
.tabla tbody th { text-align: left; background: #eef3f6; }
.tabla tbody td:nth-child(2) { text-align: right; }