/* Identidad de Inversiones H&G. Se carga después de estilo.css y conta.css y solo
   en la instalación de H&G. Colores tomados del logo: azul marino #050E35 y
   petróleo #0A3A55 sobre fondo hueso. Líneas finas, sin sombras ni cajas de color. */

:root{
  --azul:#050E35; --azul2:#0A3A55; --azul-tenue:#EEF0F2; --azul-borde:#C9D0D8;
  --amar:#F6F1E4; --amar-bd:#B89A55; --amar-tx:#5E4712;
  --verde:#0A3A55; --verde-tenue:#EAF0F3;
  --ambar:#7A5410; --ambar-tenue:#F6F0E3;
  --rojo:#7E2F22; --rojo-tenue:#F5ECE9;
  --tinta:#1B2240; --tinta2:#565C73; --tinta3:#6A6F84;
  --papel:#F7F6F2; --sup:#FFFFFF; --sup2:#FBFAF7; --linea:#E4E1D8; --linea2:#EDEBE5;
  --barra:#FFFFFF; --barra-tx:#050E35;
  --sombra:none;
  --display:'IBM Plex Sans',system-ui,sans-serif;
  --cuerpo:'IBM Plex Sans',system-ui,sans-serif;
  --titulo:'Cormorant Garamond',Georgia,serif;
  --radio:2px;
}
:root[data-tema="oscuro"]{
  --azul:#ECEAE3; --azul2:#9CC3D8; --azul-tenue:#17213A; --azul-borde:#2C3A58;
  --amar:#2E2716; --amar-bd:#B89A55; --amar-tx:#E4CF9A;
  --verde:#9CC3D8; --verde-tenue:#132233;
  --ambar:#E0B26A; --ambar-tenue:#2B2314;
  --rojo:#E8A194; --rojo-tenue:#2E1B19;
  --tinta:#ECEAE3; --tinta2:#B3B7C6; --tinta3:#959AAE;
  --papel:#090E1D; --sup:#0F1629; --sup2:#121A30; --linea:#26304A; --linea2:#1C2540;
  --barra:#0F1629; --barra-tx:#ECEAE3;
  --sombra:none;
}

body{font-size:14px}
::selection{background:#050E35;color:#FFFFFF}

/* encabezado: blanco, con la marca en letra de remate fino */
.top{border-bottom:1px solid var(--linea)}
.top-in{max-width:1220px;margin:0 auto;padding:16px 20px}
.marca{display:flex;align-items:center;gap:18px;font-family:var(--titulo);font-weight:600;font-size:19px;letter-spacing:.3em;color:var(--azul)}
.marca span{display:block;padding-left:18px;border-left:1px solid var(--linea);font-family:var(--cuerpo);font-size:10.5px;font-weight:500;letter-spacing:.18em;opacity:1;color:var(--tinta2)}
.top .quien{opacity:1;color:var(--azul);text-decoration:none;border-bottom:1px solid var(--linea);padding-bottom:1px}
.top button,.top a.enl{border:1px solid var(--linea);border-radius:var(--radio);color:var(--tinta2);font-weight:400}
.top button:hover,.top a.enl:hover{background:transparent;border-color:var(--azul);color:var(--azul)}

/* secciones */
.nav-conta{background:var(--sup)}
.nav-conta .in{gap:28px}
.nav-conta a{padding:12px 0 11px;font-weight:400;color:var(--tinta2);border-bottom-width:1.5px}
.nav-conta a:hover{color:var(--azul)}
.nav-conta a[aria-current="page"]{color:var(--azul);border-bottom-color:var(--azul);font-weight:500}
.nav-sub{background:var(--papel);border-bottom:1px solid var(--linea)}
.nav-sub .in{gap:24px}
.nav-sub a{padding:10px 0 9px;font-size:12px;letter-spacing:.06em;color:var(--tinta3);border-bottom-width:1px}
.nav-sub a:hover{color:var(--azul)}
.nav-sub a[aria-current="page"]{color:var(--azul);border-bottom-color:var(--azul);font-weight:500}
.top a.enl[aria-current="page"]{border-color:var(--azul);color:var(--azul)}

/* títulos */
.wrap{padding:40px 20px 64px}
.cab{margin-bottom:28px;gap:20px}
.cab h2{font-family:var(--titulo);font-weight:500;font-size:40px;line-height:1.05;letter-spacing:0;color:var(--azul)}
.cab .sub{margin-top:10px;color:var(--tinta3)}
.movil .cab h2{font-size:32px}
.tarj-cab h3{font-family:var(--titulo);font-size:22px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--azul)}
.rot,.formu label.et,.tile .k,table.lista th,.periodo .mini{font-weight:500;letter-spacing:.14em;color:var(--tinta2)}

/* piezas: esquinas casi rectas, sin sombras */
.btn,.campo,.tarj,.tile,.aviso,.msj,.alerta,details.part,.foto,.opcs label,.chk,.totales,.foto-campo,.seg{border-radius:var(--radio)}
.tarj,.tile,.alerta,details.part{box-shadow:none}
.tarj{border-color:var(--linea)}
.tarj-cab{background:var(--sup);padding:16px 18px 12px;border-bottom-color:var(--linea2)}
.btn{font-weight:500}
.btn.pri{background:var(--azul);border-color:var(--azul);color:#FFFFFF;font-weight:500;letter-spacing:.04em}
.btn.pri:hover{background:var(--azul2);border-color:var(--azul2);filter:none}
.btn.lleno{text-transform:uppercase;letter-spacing:.2em;font-size:12px;padding:13px}
.btn:focus-visible,.campo:focus{outline:2px solid var(--azul2);outline-offset:1px}
.btn[aria-pressed="true"]{background:var(--azul-tenue);border-color:var(--azul);color:var(--azul)}
.seg{background:transparent;padding:0;gap:6px}
:root[data-tema="oscuro"] .btn.pri{background:#ECEAE3;border-color:#ECEAE3;color:#050E35}
:root[data-tema="oscuro"] .btn.pri:hover{background:#9CC3D8;border-color:#9CC3D8}

/* cifras del mes: una franja con líneas finas, no cajas */
:root .tiles{gap:0;border-top:1px solid var(--azul);border-bottom:1px solid var(--linea);margin-bottom:40px}
:root .tiles>.tile{background:transparent;border:0;border-left:1px solid var(--linea);border-radius:0;padding:22px 24px}
:root .tiles>.tile:first-child{border-left:0;padding-left:0}
.tile .k{font-size:10.5px}
.tile .v{font-family:var(--cuerpo);font-size:28px;font-weight:400;letter-spacing:0;margin-top:10px;color:var(--azul)}
.tile .v{font-variant-numeric:tabular-nums}
.tile .n{margin-top:6px;color:var(--tinta3)}
:root .tiles>.tile.bien .v,:root .tiles>.tile.ojo .v,:root .tiles>.tile.acento .v{color:var(--azul)}
:root .tiles>.tile.mal .v,:root .tiles>.tile.mal .k{color:var(--rojo)}
:root .tiles>.tile.mal .k::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor;margin-right:8px;vertical-align:1px}

/* estados: un punto y el texto, sin fondo de color */
.pill{background:transparent!important;padding:0;font-size:12.5px;font-weight:500;gap:8px}
.pill .punto{width:7px;height:7px}
.pill.in .punto,.pill.ok .punto{width:5px;height:5px;background:transparent;border:1px solid currentColor}
.pill.nu{color:var(--tinta3)}

/* tablas: encabezado con línea marina, filas con línea fina */
table.lista{font-size:13.5px}
table.lista th{background:transparent;font-size:10.5px;padding:12px 14px 10px;border-bottom:1px solid var(--azul)}
table.lista td{padding:12px 14px}
table.lista tbody tr:hover td{background:var(--sup2)}
table.lista tfoot td{background:transparent;border-top:1px solid var(--azul);color:var(--azul);font-weight:600}
table.lista tr.sel td{background:var(--azul-tenue)}
table.lista tr.sel td:first-child{box-shadow:inset 2px 0 0 var(--azul)}
.nom{font-weight:500;color:var(--azul)}
.nom small{color:var(--tinta3);margin-top:2px}
table.lista tr.n1 td{font-family:var(--cuerpo);font-weight:600;background:transparent;color:var(--azul)}
table.estado tr.tot td{font-family:var(--cuerpo);border-top-color:var(--azul);color:var(--azul)}
table.estado tr.sub td{background:transparent}
.fila-dato{padding:12px 0}
.fila-dato b{font-weight:500;color:var(--azul)}

/* tablero: la página respira, sin recuadros (como en el machote aprobado) */
.abierto .tarj{background:transparent;border:0}
.abierto .tarj-cab{background:transparent;padding:0 0 14px;border-bottom:0;min-height:48px;align-items:flex-end}
.abierto .tarj-cab h3{font-size:26px}
.abierto .tarj-cpo{padding:0}
.abierto .tarj-cpo .fila-dato:first-child{border-top:1px solid var(--azul)}
.abierto table.lista th:first-child,.abierto table.lista td:first-child{padding-left:0}
.abierto table.lista th:last-child,.abierto table.lista td:last-child{padding-right:0}
.abierto .sep{background:transparent;margin:28px 0}
.abierto .dos{gap:56px}

/* otras piezas */
details.part .pid{font-family:var(--cuerpo);font-weight:600;color:var(--azul)}
.alerta h4{font-family:var(--cuerpo);font-weight:600;color:var(--azul)}
.alerta .tira{width:2px}
.aviso.info{background:var(--sup2);border-color:var(--linea)}
.msj.success{background:var(--sup);border-color:var(--azul2)}
.totales{background:var(--sup2);border-color:var(--linea)}
.opcs label:has(input:checked){border-color:var(--azul);background:var(--azul-tenue)}
.opcs input,.chk input{accent-color:var(--azul)}
.foto-campo{border-style:dashed;border-color:var(--azul-borde);background:var(--sup);color:var(--azul)}

/* vista del ejecutivo en el teléfono */
.cifras-ej{border-top-color:var(--azul)}
.cifras-ej .k{font-weight:500;letter-spacing:.14em;color:var(--tinta2)}
.cifras-ej .v{font-weight:400;color:var(--azul)}
.cifras-ej .mal{color:var(--rojo)}
.btn.subir{margin:22px 0}
.movil .tarj{border:0;background:transparent}
.movil .tarj-cpo{padding:0}
.item{padding:16px 0;border-bottom-color:var(--linea)}
.item .l1 b{font-weight:500;color:var(--azul)}

/* pantalla de ingreso */
.entrada-hg{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;max-width:380px;margin:0 auto}
.entrada-hg .logo{margin:0;width:100%;max-width:340px}
.entrada-hg .logo img{display:block;width:100%;height:auto}
.entrada-hg .logo-oscuro{display:none!important}
:root[data-tema="oscuro"] .entrada-hg .logo-claro{display:none!important}
:root[data-tema="oscuro"] .entrada-hg .logo-oscuro{display:block!important}
.entrada-hg .raya{width:40px;height:1px;background:var(--azul);margin:36px 0 16px}
.entrada-hg .sistema{margin:0;font-family:var(--titulo);font-weight:500;font-size:15px;letter-spacing:.32em;text-transform:uppercase;color:var(--azul)}
.entrada-hg form{width:100%;margin-top:44px}
.entrada-hg label{display:block;margin:20px 0 8px;font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta2)}
.entrada-hg .campo{width:100%;height:46px;padding:0 14px;font-size:15px;border-color:#D6D3C9;color:var(--azul)}
:root[data-tema="oscuro"] .entrada-hg .campo{border-color:var(--linea)}
.entrada-hg .btn{width:100%;margin-top:28px;height:48px;font-size:12px;letter-spacing:.24em;text-transform:uppercase}
.entrada-hg .error{margin-top:14px;font-size:12.5px;color:var(--rojo)}
.entrada-hg .pie{margin:64px 0 0;font-size:12px;color:var(--tinta3);text-align:center}
.entrada-hg .pie .empresa{white-space:nowrap}

@media (max-width:820px){
  .cab h2{font-size:32px}
  :root .tiles>.tile{padding:18px 16px}
  :root .tiles>.tile:nth-child(odd){border-left:0;padding-left:0}
  .marca{font-size:16px;gap:12px}
  .marca span{padding-left:12px}
}

/* fichas y formularios en H&G */
.formu input[type=text],.formu input[type=number],.formu input[type=date],.formu input[type=email],.formu input[type=search],
.formu select,.formu textarea,table.lista.lineas select,table.lista.lineas input{border-radius:var(--radio)}
.formu .chk-l input,.formu input[type=radio]{accent-color:var(--azul)}

/* tablero del contador */
.abierto .tarj-cpo a.pend:first-child{border-top:1px solid var(--azul)}
a.pend b{font-weight:500}
a.pend{border-bottom-color:var(--linea)}