/* Financial Operations by ACardenas · lenguaje visual SAP Fiori (tema Horizon claro). */
:root {
  --fondo: #F5F6F7; --superficie: #FFFFFF; --superficie-2: #FAFAFA;
  --texto: #1D2D3E; --texto-2: #556B82; --texto-3: #758CA4;
  --borde: #D9D9D9; --borde-suave: #E5E5E5; --borde-campo: #8396A8;
  --marca: #0070F2; --marca-hover: #0064D9; --marca-suave: #EBF8FF; --marca-fondo: #D1EFFF;
  --positivo: #256F3A; --positivo-fondo: #F5FAE5; --negativo: #AA0808; --negativo-fondo: #FFEAF4;
  --critico: #B44F00; --critico-fondo: #FFF8D6; --info-fondo: #E1F4FF;
  --sombra-1: 0 0 0.125rem rgba(34,53,72,.15), 0 0.125rem 0.25rem rgba(34,53,72,.15);
  --sombra-2: 0 0 0.125rem rgba(34,53,72,.15), 0 0.5rem 1rem rgba(34,53,72,.15);
  --radio: 0.75rem; --radio-ch: 0.5rem;
  --fuente: "IBM Plex Sans", "72", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 14px/1.45 var(--fuente); }
a { color: var(--marca); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.icono { width: 1rem; height: 1rem; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.saltar { position: absolute; left: -999px; } .saltar:focus { left: 1rem; top: .5rem; z-index: 100; background: #fff; padding: .5rem; }

/* Shell bar */
.shell { position: sticky; top: 0; z-index: 40; height: 3.25rem; background: var(--superficie); box-shadow: var(--sombra-1);
  display: flex; align-items: center; gap: 1rem; padding: 0 1rem; }
.shell-marca { display: flex; align-items: center; gap: .625rem; color: var(--texto); font-weight: 700; font-size: 1rem; white-space: nowrap; }
.shell-marca:hover { text-decoration: none; }
.shell-logo { width: 2rem; height: 2rem; border-radius: .5rem; background: var(--marca); color: #fff; display: grid; place-items: center;
  font-size: .75rem; font-weight: 700; letter-spacing: .02em; }
.shell-por { font-weight: 400; color: var(--texto-2); }
.shell-empresa { display: inline-flex; align-items: center; gap: .25rem; color: var(--texto); font-weight: 600; font-size: .875rem;
  border-left: 1px solid var(--borde); padding: .375rem .5rem .375rem .75rem; border-radius: 0 .375rem .375rem 0; white-space: nowrap; }
.shell-empresa:hover { background: #EFF1F2; text-decoration: none; }
.shell-empresa .icono { width: 1rem; height: 1rem; color: var(--texto-2); }
.empresas { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.empresa-tarjeta { width: 100%; text-align: left; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra-1); padding: 1rem 1.125rem; display: flex; gap: .875rem; align-items: center; cursor: pointer; font: inherit; color: var(--texto); }
.empresa-tarjeta:hover { border-color: var(--marca); }
.empresa-tarjeta:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.empresa-tarjeta .icono { width: 1.75rem; height: 1.75rem; color: var(--marca); flex: none; }
.empresa-tarjeta b { display: block; font-size: 1rem; }
.empresa-tarjeta.actual { border-color: var(--marca); box-shadow: 0 0 0 1px var(--marca); }
.shell-buscar { flex: 1; max-width: 36rem; margin: 0 auto; position: relative; }
.shell-buscar input { width: 100%; height: 2.25rem; border: 1px solid transparent; border-radius: 1.125rem; background: #EFF1F2;
  padding: 0 1rem 0 2.25rem; font: inherit; color: var(--texto); }
.shell-buscar input:focus { background: #fff; border-color: var(--marca); outline: none; }
.shell-buscar .icono { position: absolute; left: .875rem; top: .625rem; color: var(--texto-2); }
.shell-acciones { display: flex; align-items: center; gap: .25rem; margin-left: auto; }
.shell-boton { width: 2.25rem; height: 2.25rem; border-radius: .5rem; display: grid; place-items: center; color: var(--texto-2); }
.shell-boton:hover { background: var(--fondo); color: var(--marca); text-decoration: none; }
.avatar { width: 2rem; height: 2rem; border-radius: 50%; background: #5D36FF; color: #fff; display: grid; place-items: center; font-size: .75rem; font-weight: 600; }

/* Encabezado de página (dynamic page header) */
.cabecera { background: var(--superficie); padding: 1rem 2rem 0; box-shadow: 0 1px 0 var(--borde-suave); }
.migas { font-size: .875rem; color: var(--texto-2); display: flex; gap: .375rem; align-items: center; flex-wrap: wrap; }
.migas .icono { width: .75rem; height: .75rem; }
.titulo-fila { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .5rem 0 1rem; }
h1 { font-size: 1.5rem; font-weight: 700; margin: 0; line-height: 1.25; }
.subtitulo { color: var(--texto-2); margin-top: .125rem; }
.acciones { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.atributos { display: flex; gap: 2.5rem; flex-wrap: wrap; padding-bottom: 1rem; }
.atributo b { display: block; font-weight: 400; color: var(--texto-2); font-size: .8125rem; }
.atributo span { font-weight: 600; }
.atributo .grande { font-size: 1.375rem; font-weight: 400; }
.pestanas { display: flex; gap: 2rem; margin-top: .25rem; overflow-x: auto; }
.pestanas a { padding: .75rem 0; color: var(--texto-2); border-bottom: 3px solid transparent; font-weight: 600; white-space: nowrap; }
.pestanas a:hover { color: var(--marca); text-decoration: none; }
.pestanas a.activa { color: var(--marca); border-bottom-color: var(--marca); }

.contenido { padding: 1rem 2rem 3rem; max-width: 1600px; }

/* Botones */
.btn { display: inline-flex; align-items: center; gap: .375rem; height: 2.25rem; padding: 0 .875rem; border-radius: var(--radio-ch);
  border: 1px solid #BCC3CA; background: var(--superficie); color: var(--marca); font: 600 .875rem var(--fuente); cursor: pointer;
  white-space: nowrap; transition: background .15s, border-color .15s; }
.btn:hover { background: var(--marca-suave); border-color: var(--marca); text-decoration: none; }
.btn.enfasis { background: var(--marca); border-color: var(--marca); color: #fff; }
.btn.enfasis:hover { background: var(--marca-hover); }
.btn.fantasma { border-color: transparent; background: transparent; }
.btn.fantasma:hover { background: var(--marca-suave); }
.btn.peligro { color: var(--negativo); }
.btn.peligro:hover { background: var(--negativo-fondo); border-color: var(--negativo); }
.btn:disabled { opacity: .4; cursor: default; background: var(--superficie); border-color: #BCC3CA; }

/* Campos */
.campo { display: flex; flex-direction: column; gap: .25rem; }
.campo > span { font-size: .8125rem; color: var(--texto-2); }
input, select { font: inherit; color: var(--texto); height: 2.25rem; border: 1px solid var(--borde-campo); border-radius: .25rem;
  background: var(--superficie); padding: 0 .625rem; }
input:hover, select:hover { border-color: var(--marca); }
input:focus, select:focus { outline: 2px solid var(--marca); outline-offset: -1px; }
input[type=file] { border: 1px dashed var(--borde-campo); padding: .375rem; height: auto; }

/* Barra de filtros */
.filtros { background: var(--superficie); border-radius: var(--radio); box-shadow: var(--sombra-1); padding: 1rem;
  display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: 1rem; }
.filtros .campo input[type=search] { min-width: 18rem; }

/* Tarjetas y tablas */
.tarjeta { background: var(--superficie); border-radius: var(--radio); box-shadow: var(--sombra-1); margin-bottom: 1rem; overflow: hidden; }
.tarjeta-barra { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .75rem 1rem;
  border-bottom: 1px solid var(--borde-suave); }
.tarjeta-barra h2 { font-size: 1rem; font-weight: 700; margin: 0; }
.tarjeta-cuerpo { padding: 1rem; }
.tabla-cont { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
th { text-align: left; font-weight: 400; color: var(--texto-2); padding: .625rem 1rem; border-bottom: 1px solid var(--borde-suave);
  background: var(--superficie); white-space: nowrap; }
td { padding: .625rem 1rem; border-bottom: 1px solid var(--borde-suave); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tr.nav { cursor: pointer; }
tr.nav:hover td { background: var(--fondo); }
td.flecha { width: 2rem; color: var(--texto-3); padding-left: 0; }
.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nw { white-space: nowrap; }
.sec { color: var(--texto-2); font-size: .8125rem; }
tr.total td { font-weight: 700; border-top: 1px solid var(--borde); }
.vacio { text-align: center; color: var(--texto-2); padding: 3rem 1rem; }
.vacio .icono { width: 2.5rem; height: 2.5rem; color: var(--texto-3); stroke-width: 1.5; display: block; margin: 0 auto .75rem; }

/* Estados (object status) */
.estado { display: inline-flex; align-items: center; gap: .25rem; font-size: .8125rem; font-weight: 600; padding: .0625rem .375rem;
  border-radius: .25rem; white-space: nowrap; }
.estado.positivo { color: var(--positivo); background: var(--positivo-fondo); }
.estado.negativo { color: var(--negativo); background: var(--negativo-fondo); }
.estado.critico { color: var(--critico); background: var(--critico-fondo); }
.estado.info { color: var(--marca); background: var(--info-fondo); }
.estado.neutro { color: var(--texto-2); background: #EFF1F2; }
.positivo-txt { color: var(--positivo); } .negativo-txt { color: var(--negativo); }

/* Message strip */
.aviso { display: flex; gap: .625rem; align-items: flex-start; border-radius: var(--radio-ch); padding: .625rem .875rem; margin: 0 0 1rem;
  border: 1px solid; }
.aviso .texto { white-space: pre-line; }
.aviso .icono { margin-top: .125rem; }
.aviso.info { background: var(--info-fondo); border-color: #A6E0FF; }
.aviso.info .icono { color: var(--marca); }
.aviso.exito { background: var(--positivo-fondo); border-color: #BDE986; }
.aviso.exito .icono { color: var(--positivo); }
.aviso.error { background: var(--negativo-fondo); border-color: #FFC3E0; }
.aviso.error .icono { color: var(--negativo); }
.aviso.alerta { background: var(--critico-fondo); border-color: #FFDF72; }
.aviso.alerta .icono { color: var(--critico); }

/* Launchpad */
.grupo { margin: 1.5rem 0 .75rem; font-size: 1rem; font-weight: 700; }
.mosaicos { display: flex; flex-wrap: wrap; gap: 1rem; }
.mosaico { width: 11rem; height: 11rem; background: var(--superficie); border-radius: 1rem; box-shadow: var(--sombra-1); padding: 1rem;
  display: flex; flex-direction: column; color: var(--texto); transition: box-shadow .2s; }
.mosaico:hover { box-shadow: var(--sombra-2); text-decoration: none; }
.mosaico h3 { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.25; }
.mosaico .sub { color: var(--texto-2); font-size: .875rem; margin-top: .125rem; }
.mosaico .kpi { margin-top: auto; display: flex; align-items: flex-end; gap: .25rem; color: var(--marca); }
.mosaico .kpi .icono { width: 2rem; height: 2rem; stroke-width: 1.5; margin-right: auto; color: var(--texto-3); }
.mosaico .kpi strong { font-size: 2rem; font-weight: 300; line-height: 1; font-variant-numeric: tabular-nums; }
.mosaico .kpi small { font-size: .75rem; color: var(--texto-2); padding-bottom: .25rem; }
.mosaico .pie { font-size: .75rem; color: var(--texto-2); margin-top: .5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mosaico.ancho { width: 23rem; }

/* Tarjetas analíticas (KPI) */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.kpi-tarjeta { background: var(--superficie); border-radius: var(--radio); box-shadow: var(--sombra-1); padding: 1rem; }
.kpi-tarjeta b { display: block; font-weight: 600; }
.kpi-tarjeta .sub { color: var(--texto-2); font-size: .8125rem; }
.kpi-tarjeta strong { display: block; font-size: 2rem; font-weight: 300; margin-top: .75rem; font-variant-numeric: tabular-nums; line-height: 1.1; }
.kpi-tarjeta .barra-kpi { height: .375rem; background: #EFF1F2; border-radius: .25rem; margin-top: .75rem; overflow: hidden; }
.kpi-tarjeta .barra-kpi i { display: block; height: 100%; background: var(--marca); border-radius: .25rem; }
.rejilla-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr)); gap: 1rem; }
.rejilla-2 .tarjeta { margin-bottom: 0; }
.rejilla-2 + .nota { margin-top: 1rem; }

/* Formularios en sección */
.form-fila { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; }
.nota { color: var(--texto-2); font-size: .8125rem; margin: .5rem 0 0; }
code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .8125rem; background: var(--fondo); padding: .0625rem .3125rem; border-radius: .25rem; }


/* Diálogo */
dialog { border: 0; border-radius: 1rem; box-shadow: var(--sombra-2); padding: 0; width: min(28rem, 92vw); color: var(--texto); }
dialog::backdrop { background: rgba(0, 0, 0, .45); }
.dialogo-cab { padding: 1rem 1.25rem; border-bottom: 1px solid var(--borde-suave); font-weight: 700; font-size: 1rem; }
.dialogo-cuerpo { padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; }
.dialogo-pie { padding: .75rem 1.25rem; border-top: 1px solid var(--borde-suave); display: flex; justify-content: flex-end; gap: .5rem; background: var(--superficie-2); }

@media (max-width: 768px) {
  .shell-empresa, .shell-buscar { display: none; }
  .cabecera, .contenido { padding-left: 1rem; padding-right: 1rem; }
  .filtros .campo input[type=search] { min-width: 0; width: 100%; }
  .rejilla-2 { grid-template-columns: 1fr; }
  .mosaico { width: calc(50% - .5rem); }
  .mosaico.ancho { width: 100%; }
  .atributos { gap: 1.25rem; }
}
@media (max-width: 480px) { .shell-nombre { display: none; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Dashboard y gráficas */
.series { --serie-1: #2a78d6; --serie-2: #eb6834; --serie-3: #1baf7a; }
.heroe { background: var(--superficie); border-radius: var(--radio); box-shadow: var(--sombra-1); padding: 1.25rem 1.5rem; margin-bottom: 1rem;
  display: flex; gap: 2.5rem; flex-wrap: wrap; align-items: flex-end; }
.heroe b { display: block; font-weight: 600; }
.heroe .sub { color: var(--texto-2); font-size: .8125rem; }
.heroe .cifra-heroe { font-size: 3.25rem; font-weight: 600; line-height: 1.05; letter-spacing: -.01em; margin-top: .375rem; }
.delta { font-size: .8125rem; font-weight: 600; display: inline-flex; gap: .25rem; align-items: center; margin-top: .375rem; }
.delta.bien { color: var(--positivo); } .delta.mal { color: var(--negativo); } .delta.igual { color: var(--texto-2); }
.kpi-tarjeta .delta { display: flex; }
.grafica { position: relative; min-height: 120px; }
.grafica svg { display: block; overflow: visible; font-family: var(--fuente); }
.grafica .hit { cursor: default; outline: none; }
.grafica .hit:hover, .grafica .hit:focus { fill: rgba(0, 112, 242, .05); }
.grafica rect[tabindex]:focus-visible { outline: 2px solid var(--marca); }
.grafica-leyenda { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .8125rem; color: var(--texto-2); margin-bottom: .5rem; }
.grafica-leyenda span { display: inline-flex; align-items: center; gap: .375rem; }
.tt-clave { display: inline-block; flex-shrink: 0; }
.tt-clave.linea { width: .875rem; height: 2px; border-radius: 1px; }
.tt-clave.caja { width: .625rem; height: .625rem; border-radius: 2px; }
.grafica-tooltip { position: absolute; z-index: 10; pointer-events: none; background: var(--superficie); border-radius: var(--radio-ch);
  box-shadow: var(--sombra-2); padding: .5rem .75rem; font-size: .8125rem; min-width: 9rem; }
.tt-cab { color: var(--texto-2); margin-bottom: .25rem; }
.tt-fila { display: flex; align-items: center; gap: .5rem; white-space: nowrap; }
.tt-fila b { font-variant-numeric: tabular-nums; color: var(--texto); }
.tt-fila span { color: var(--texto-2); }
.rejilla-dash { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.rejilla-dash .tarjeta { margin-bottom: 0; }
@media (max-width: 960px) { .rejilla-dash { grid-template-columns: 1fr; } }
details.tabla-vista summary { cursor: pointer; color: var(--marca); font-weight: 600; padding: .75rem 1rem; }

/* Acceso y usuarios */
.acceso { min-height: 100vh; display: grid; place-items: center; padding: 1rem;
  background: linear-gradient(160deg, #EBF8FF 0%, var(--fondo) 55%); }
.acceso-tarjeta { width: min(24rem, 100%); background: var(--superficie); border-radius: 1rem; box-shadow: var(--sombra-2); padding: 2rem; }
.acceso-tarjeta .shell-marca { margin-bottom: 1.5rem; }
.acceso-tarjeta h1 { font-size: 1.25rem; margin-bottom: .25rem; }
.acceso-tarjeta form { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.25rem; }
.acceso-tarjeta .btn { justify-content: center; height: 2.5rem; }
.menu-usuario { position: relative; }
.menu-usuario summary { list-style: none; cursor: pointer; border-radius: 50%; }
.menu-usuario summary::-webkit-details-marker { display: none; }
.menu-usuario .menu { position: absolute; right: 0; top: 2.75rem; z-index: 50; width: 15rem; background: var(--superficie);
  border-radius: var(--radio); box-shadow: var(--sombra-2); padding: .5rem 0; }
.menu-usuario .menu-cab { padding: .5rem 1rem .75rem; border-bottom: 1px solid var(--borde-suave); margin-bottom: .25rem; }
.menu-usuario .menu-cab b { display: block; }
.menu-usuario .menu a, .menu-usuario .menu button { display: flex; gap: .5rem; align-items: center; width: 100%; padding: .5rem 1rem;
  background: none; border: 0; font: inherit; color: var(--texto); cursor: pointer; text-align: left; }
.menu-usuario .menu a:hover, .menu-usuario .menu button:hover { background: var(--fondo); text-decoration: none; }
tr.inactivo td { color: var(--texto-3); }