/* =================== TEMA RICHIE (15/10/2026) ===================
   Capa de diseño encima de la anterior (estilo Bravo): menú acero oscuro a toda la altura, fondo gris claro,
   paneles blancos redondeados, acento naranja para las acciones principales.
   Está en un archivo aparte (tema-richie.css): si se apaga (Apariencia → Anterior), queda el diseño anterior de app.css. */
:root {
  --acero: #17202b;
  --acero-2: #222d3a;
  --acero-3: #2a3646;
  --acero-texto: #c9d2dc;
  --acento: #c2560f;
  --acento-claro: #fdebdd;
  --tinta: #1d2530;
  --gris-texto: #5b6675;
  --linea: #dde2e8;
  --azul: #1f2a37;          /* antes azul Bravo: ahora acero (chips activos, pasos, bordes de foco) */
  --azul-osc: #1f2a37;
  --azul-link: #1d4f86;
  --azul-claro: #e9eef4;
  --verde: var(--acento);   /* botones "verdes" = acción principal en naranja */
  --fondo: #eef1f4;
  --fila-1: #fff;
  --fila-2: #fff;
  --texto: var(--tinta);
  --texto-suave: var(--gris-texto);
  --borde: #d3d9e0;
  --menu-ancho: 236px;
  font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
html, body { background: var(--fondo); }
body { color: var(--tinta); font-variant-numeric: tabular-nums; }

/* logo */
.logo-ic { width: 34px; height: 34px; flex: none; border-radius: 9px; overflow: hidden; background: var(--acento); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-family: Archivo, sans-serif; font-weight: 800; font-size: 21px; line-height: 1; }
.logo-tx { display: flex; flex-direction: column; line-height: 1.1; }
.logo-tx b { font-family: Archivo, sans-serif; font-weight: 800; font-size: 21px; letter-spacing: -.3px; }
.logo-tx small { display: block; font-size: 11px; font-weight: 500; color: #8d99a8; letter-spacing: 0; }
.logo { display: flex; align-items: center; gap: 10px; color: var(--tinta); font-size: inherit; }

/* barra de arriba (compu/tablet): a la derecha del menú, sin sombra, con el logo en el menú */
.barra { left: var(--menu-ancho); background: var(--fondo); box-shadow: none; border-bottom: 1px solid transparent; }
.barra .logo { display: none; }
.barra .usuario { color: var(--tinta); font-weight: 600; }
.barra .empresa { color: var(--tinta); background: #fff; border: 1px solid var(--borde); border-radius: 999px; padding: 7px 14px; font-weight: 700; font-size: 14px; }
.barra .empresa:hover { text-decoration: none; border-color: var(--acero); }
.btn-icono { color: var(--tinta); }
.btn-icono:hover { background: #e2e7ed; }

/* menú lateral oscuro */
.menu { top: 0; background: var(--acero); padding: 0 0 60px; }
body.modo-prueba .menu { top: 26px; }
.menu a.menu-logo { display: flex; align-items: center; gap: 10px; padding: 20px 20px 22px; color: #fff; text-transform: none; letter-spacing: 0; font-size: 14px; background: none; }
.menu-logo .logo-tx b { color: #fff; }
.menu a:not(.menu-logo) { color: var(--acero-texto); text-transform: none; font-size: 14px; font-weight: 500; letter-spacing: 0; padding: 11px 14px; margin: 2px 12px; border-radius: 8px; gap: 12px; }
.menu a svg.i { display: inline-block; width: 19px; height: 19px; }
.menu a:not(.menu-logo):hover { background: var(--acero-2); color: #fff; }
.menu a.activo { background: var(--acero-3); color: #fff; font-weight: 600; box-shadow: inset 3px 0 0 var(--acento); }
.menu a.menu-cotizar { background: var(--acento); color: #fff; font-weight: 700; justify-content: center; margin: 0 12px 14px; padding: 12px; }
.menu a.menu-cotizar:hover, .menu a.menu-cotizar.activo { background: var(--acento); filter: brightness(.88); color: #fff; box-shadow: none; }
.menu .separador { background: var(--acero-3); margin: 10px 16px; }
.menu .plegar { background: var(--acero-2); color: var(--acero-texto); }
.menu .plegar svg.i { color: var(--acero-texto); }
body.plegado .menu-logo, body:not(.desplegado) .menu-logo { justify-content: flex-start; }
body.plegado .menu-logo .logo-tx { display: none; }
body.plegado .menu-logo { padding: 20px 15px 22px; }
body.plegado .menu a:not(.menu-logo) { margin: 2px 8px; padding: 11px 0; }

/* títulos y paneles */
.titulo { background: none; color: var(--tinta); font-family: Archivo, sans-serif; font-size: 26px; font-weight: 800; letter-spacing: -.4px; padding: 0 0 4px; margin-bottom: 14px; min-height: 0; }
.titulo .sub { color: var(--gris-texto); font-family: "IBM Plex Sans", sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0; opacity: 1; }
.panel { border: 1px solid var(--linea); border-radius: 14px; overflow: hidden; }
.panel > h3 { background: #fff; color: var(--tinta); font-family: Archivo, sans-serif; font-weight: 800; font-size: 17px; padding: 14px 18px; border-bottom: 1px solid #e6eaef; }
.panel > h3 svg.i { color: var(--acento); }
.panel > h3 .der { color: var(--gris-texto); font-family: "IBM Plex Sans", sans-serif; font-weight: 500; }
.aviso { border-radius: 10px; }

/* buscador, chips y filtros */
.buscador { border-radius: 10px; border-color: var(--borde); overflow: hidden; }
.buscador input::placeholder { color: #7d8896; }
.buscador .btn-filtros { background: #f6f7f9; color: var(--tinta); }
.filtros { border-radius: 0 0 10px 10px; }
.chip { border-color: var(--borde); }
.chip.activo { background: var(--acero); border-color: var(--acero); }

/* listas: tarjeta blanca con filas separadas por una línea */
.lista { background: #fff; border: 1px solid var(--linea); border-radius: 14px; overflow: hidden; }
.lista .cab { background: #f6f8fa; color: var(--gris-texto); font-size: 12px; border-bottom: 1px solid #e6eaef; top: auto; position: static; }
.lista .fila { border-bottom: 1px solid #edf0f3; }
.lista a.fila:hover { filter: none; background: #f6f8fa; }
.lista .nombre { color: var(--tinta); font-size: 16px; }
.lista .detalle { color: var(--gris-texto); font-weight: 600; }
.lista .vacia { background: #fff; }
.paginas { border-radius: 8px; overflow: hidden; border-color: var(--borde); }
.paginas button { color: var(--tinta); }
.paginas button.activo { background: var(--acero); }
.pie-lista .info { color: var(--gris-texto); }

/* botones */
.btn { border-radius: 10px; background: var(--acero); font-weight: 600; }
.btn.gris { background: #fff; color: var(--tinta); border-color: var(--borde); }
.btn.verde { background: var(--acento); }
.btn.grande { font-weight: 700; }
.acciones { background: none; border: 0; gap: 8px; }
.acciones .btn { flex: 0 1 auto; border-radius: 10px; }
.acciones .btn:not(.verde):not(.rojo) { background: #fff; color: var(--tinta); border: 1px solid var(--borde); }
.fab { background: var(--acento); }

/* cifras */
.cifra { border: 1px solid var(--linea); border-left-width: 1px; border-radius: 14px; padding: 12px 16px; }
.cifra .et { font-size: 12px; letter-spacing: .3px; }
.cifra .v { font-family: Archivo, sans-serif; font-weight: 800; }
.cifra.verde { border-color: var(--acento); box-shadow: inset 0 0 0 1px var(--acento); }

/* campos de ficha */
.valor { background: #f6f8fa; border-color: #e3e7ec; border-radius: 8px; overflow: hidden; }
.valor .ic { border-right-color: #e3e7ec; color: var(--gris-texto); }
.valor .tx { color: var(--tinta); font-weight: 600; }
.entrada { border-color: var(--borde); border-radius: 8px; }
.entrada:focus { outline-color: var(--acero); border-color: var(--acero); }
.pestanas { border-bottom-color: #e2e7ed; gap: 4px; }
.pestanas button { color: var(--gris-texto); border-radius: 8px 8px 0 0; }
.pestanas button.activo { background: none; color: var(--tinta); box-shadow: inset 0 -3px 0 var(--acento); }

/* cotizador */
.tile { border-radius: 12px; }
.tile-n { color: var(--tinta); }
.cliente-elegido { background: #f6f8fa; border-color: #e3e7ec; border-radius: 10px; }
.cliente-elegido .n { color: var(--tinta); }
.linea { border-radius: 10px; }
.totales-barra { border-top: 1px solid var(--linea); box-shadow: 0 -4px 14px rgba(23, 32, 43, .08); }
.totales-barra .t.total b { font-family: Archivo, sans-serif; font-weight: 800; color: var(--tinta); }
.art-agregar .btn.verde { background: var(--acero); }
.condiciones { border-radius: 10px; }
.condiciones summary { color: var(--tinta); }
.cat-migas button { color: var(--azul-link); }

/* diálogos */
.dialogo { border-radius: 14px; overflow: hidden; }
.dialogo h3 { background: var(--acero); font-family: Archivo, sans-serif; font-weight: 800; }

/* ingreso */
.login { background: var(--acero); }
.login form { border-radius: 16px; overflow: hidden; }
.login .logo { justify-content: center; padding: 30px 0 12px; }
.login .logo .logo-tx b { font-size: 30px; }

/* tablet: menú angosto solo con íconos */
@media (max-width: 1099px) {
  body:not(.desplegado) .menu-logo .logo-tx { display: none; }
  body:not(.desplegado) .menu-logo { padding: 20px 15px 22px; }
  body:not(.desplegado) .menu a:not(.menu-logo) { margin: 2px 8px; padding: 11px 0; }
}
/* celular: barra de arriba oscura con el logo, sin menú lateral */
@media (max-width: 699px) {
  .barra { left: 0; background: var(--acero); }
  .barra .logo { display: flex; }
  .barra .logo .logo-tx b { color: #fff; font-size: 19px; }
  .barra .logo .logo-tx small { display: none; }
  .barra .logo-ic { width: 30px; height: 30px; }
  .barra .empresa { background: var(--acero-3); color: #fff; border-color: var(--acero-3); }
  .barra .btn-icono { color: #fff; }
  .barra .btn-icono:hover { background: var(--acero-3); }
  .titulo { font-size: 22px; margin: 0 0 10px; padding: 0; }
  .tabs a.activo { color: var(--tinta); box-shadow: inset 0 3px 0 var(--acento); }
}
/* listas como tarjetas (tablet vertical y celular) */
@media (max-width: 899px) {
  .lista { background: none; border: 0; border-radius: 0; overflow: visible; }
  .lista .fila { background: #fff !important; border: 1px solid var(--linea); border-radius: 12px; }
}


.logo-ic img { width: 100%; height: 100%; display: block; object-fit: cover; }
.barra button.usuario { background: none; border: 0; padding: 4px 6px; border-radius: 8px; cursor: pointer; font: inherit; }
.barra button.usuario:hover { background: rgba(0,0,0,.06); }
.login-logo { display: block; width: 100%; aspect-ratio: 766 / 567; object-fit: cover; }
@media (max-width: 760px) { .solo-compu { display: none !important; } }