/* Inicio compacto: las áreas llevan a sus módulos. */
.inicio-bienvenida { padding: 0; }
.inicio-bienvenida h2 { margin: 0 0 8px; font-size: 25px; }
.inicio-bienvenida p { margin: 0; color: var(--suave); }
.inicio-seccion { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 26px 0 14px; }
.inicio-seccion h2 { margin: 0; font-size: 16px; }
.inicio-acceso { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.inicio-areas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.inicio-area { display: flex; align-items: center; gap: 14px; padding: 22px; min-width: 0; min-height: 112px; text-decoration: none; color: var(--tinta); }
.inicio-area:hover { border-color: var(--suave); }
.inicio-area-texto { flex: 1; min-width: 0; }
.inicio-area h3 { margin: 0 0 8px; font-size: 16px; }
.inicio-area small { color: var(--suave); font-size: 13px; }
.inicio-area > .ico, .inicio-area > .icono-circ { flex: none; }
.inicio-avisos { display: grid; gap: 10px; }
.inicio-aviso { background: var(--papel); border: 1px solid var(--linea); border-radius: 12px; padding: 16px; display: flex; align-items: center; gap: 12px; text-decoration: none; }
.inicio-aviso > span { flex: 1; }
.inicio-aviso small { display: block; color: var(--suave); margin-top: 4px; font-size: 12px; }
#inicio-areas, #inicio-pendientes { scroll-margin-top: 80px; }
@media (min-width: 900px) { .app.app-inicio { grid-template-columns: 164px minmax(0, 1fr); } .app-inicio > .lateral { display: none; } }
@media (max-width: 599px) { .inicio-areas { grid-template-columns: minmax(0, 1fr); } .inicio-bienvenida h2 { font-size: 21px; } .inicio-area { padding: 18px; min-height: 96px; } }
.area-movil { margin: 0 16px 12px; position: relative; }
.area-movil summary { padding: 10px 12px; background: var(--papel); border: 1px solid var(--linea); border-radius: 10px; font-size: 13px; }
.area-movil nav { padding: 12px; background: var(--papel); border: 1px solid var(--linea); border-radius: 10px; }
.area-movil nav > a { display: block; padding: 10px 8px; font-weight: 700; text-decoration: none; }
.area-movil .mov-modulo { padding-left: 24px; font-weight: 400; }
.area-movil a[aria-current] { background: var(--marca-suave); border-radius: 8px; }
.secciones-modulo { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 22px; padding-bottom: 12px; border-bottom: 1px solid var(--linea); }
.secciones-modulo a { text-decoration: none; font-size: 13px; padding: 8px 12px; border-radius: 8px; color: var(--suave); }
.secciones-modulo a.activa { color: var(--tinta); background: var(--marca-suave); font-weight: 700; }
.riel .sun-nombre { font-weight: 700; font-size: 21px; letter-spacing: .12em; }
.riel .sun-sub { font-size: 11px; color: var(--g400); }
@media (min-width: 900px) {
  .app { grid-template-columns: 164px 214px minmax(0, 1fr); }
  .riel { align-items: stretch; padding: 22px 12px 16px; }
  .riel .riel-sello { flex-direction: column; align-items: flex-start; gap: 2px; margin: 0 0 20px; padding: 0 10px; }
  .riel > a, .riel .abajo a { width: 100%; flex-direction: row; gap: 10px; text-align: left; font-size: 12px; padding: 12px 10px; }
  .riel .ico { flex: none; width: 19px; height: 19px; }
  .riel a.activa::before { left: -12px; }
  .riel .abajo { align-items: stretch; }
  .lateral { overflow-y: auto; }
  .lateral .modulos-area a { flex-wrap: wrap; font-size: 13px; }
  .lateral .modulos-area .estado-construccion { margin-left: 29px; font-size: 10px; }
  .migas { white-space: normal; flex-wrap: wrap; font-size: 12px; }
  .migas a { text-decoration: none; color: var(--suave); }
  .barra-esc { min-height: 64px; height: auto; padding-top: 10px; padding-bottom: 10px; }
  .area-movil { display: none; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .app { grid-template-columns: 145px 190px minmax(0, 1fr); }
  .barra-esc { padding-left: 18px; padding-right: 18px; }
  .fecha-chip { display: none; }
}
@media (min-width: 900px) and (max-width: 1399px) {
  .hist-cols { display: none; }
  .hist-fila { display: flex; flex-wrap: wrap; gap: 10px 16px; }
  .hist-fecha, .hist-fila .puntos-cadena, .hist-estado { flex-basis: 100%; }
  .hist-links { flex-wrap: wrap; }
}
@media (max-width: 899px) {
  body:has(.area-movil[open]) .pestanas-movil { display: none; }
}
@media print { .area-movil, .secciones-modulo { display: none; } }

/* ── Pulido (05-10) ── */
/* Las tarjetas de cada área: los módulos en una grilla, como las áreas del inicio */
.area-modulos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 14px; }
.area-modulo { display: flex; align-items: center; gap: 14px; padding: 20px; min-height: 96px; text-decoration: none; color: var(--tinta); }
.area-modulo > .ico:first-child { width: 40px; height: 40px; padding: 10px; border-radius: 12px; background: var(--gris); color: var(--suave); flex: none; }
.area-modulo > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.area-modulo strong { font-family: var(--letra-titulos); font-size: 16px; font-weight: 600; }
.area-modulo small { color: var(--suave); font-size: 13px; }
.area-modulo > .ico:last-child { color: var(--tenue); flex: none; }
/* el «verde» al pasar el mouse, solo donde hay mouse: en el celular quedaba pegado después de tocar */
@media (hover: hover) {
  .area-modulo:hover, .inicio-area:hover { border-color: var(--linea-fuerte); box-shadow: var(--sombra2); color: var(--tinta); }
}
@media (hover: none) { .inicio-area:hover, .area-modulo:hover { color: var(--tinta); } }
/* El selector de área del celular: una píldora clara con su flecha, no el triángulo del navegador */
.area-movil { margin: 0 16px 4px; }
.area-movil summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer;
                      padding: 11px 14px; border-radius: 14px; font-weight: 700; color: var(--tinta); box-shadow: var(--sombra); }
.area-movil summary::-webkit-details-marker { display: none; }
.area-movil summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--tenue); border-bottom: 2px solid var(--tenue);
                             transform: rotate(45deg) translateY(-2px); transition: transform .15s; flex: none; }
.area-movil[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.area-movil nav { margin-top: 6px; box-shadow: var(--sombra2); border-radius: 14px; }
.area-movil nav > a { border-radius: 10px; color: var(--tinta); }
/* El inicio: el saludo es el título; no se repite «Inicio» */
@media (min-width: 900px) { main:has(> .inicio-sun) > .titulo-pagina { display: none; } main:has(> .inicio-sun) > .sub-pagina { margin-bottom: 6px; } }
/* en el celular el selector va montado sobre el borde del encabezado oscuro, y el contenido parte justo debajo */
@media (max-width: 899px) {
  .area-movil { position: relative; z-index: 3; margin: -22px 16px 0; }
  .area-movil ~ main { margin-top: 0; border-radius: 0; padding-top: 14px; }
}

/* ── Inicio v2 (05-10): el resumen del día, lo que hay que revisar y todos los módulos a un toque ── */
.inicio-v2 { display: flex; flex-direction: column; gap: 6px; max-width: 1100px; }
.inicio-hero { display: none; }
/* En el celular el saludo ya está en el encabezado oscuro: de la franja queda solo el acceso principal, ancho y arriba */
@media (max-width: 899px) {
  .inicio-hero:has(.inicio-acceso) { display: block; margin-top: 4px; }
  .inicio-hero:has(.inicio-acceso) .inicio-hero-tx { display: none; }
  .inicio-hero .inicio-acceso { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 16px;
    border-radius: var(--radio-chico); background: var(--g900); color: #fff; font-weight: 700; font-size: 16px; text-decoration: none; }
  .inicio-hero .inicio-acceso .ico { color: var(--marca); }
}
.inicio-v2 .inicio-seccion { margin: 18px 0 10px; justify-content: flex-start; }
.inicio-cuenta { min-width: 24px; padding: 1px 8px; border-radius: 999px; background: var(--alerta-suave); color: var(--alerta); font-size: 12.5px; font-weight: 700; text-align: center; }
.inicio-v2 .inicio-aviso, .inicio-al-dia { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra);
                                            padding: 14px 16px; display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--tinta); }
.inicio-v2 .inicio-aviso > span:nth-child(2), .inicio-al-dia > span:last-child { flex: 1; min-width: 0; }
.inicio-v2 .inicio-aviso strong, .inicio-al-dia strong { display: block; font-size: 15px; }
.inicio-v2 .inicio-aviso small, .inicio-al-dia small { display: block; margin-top: 2px; color: var(--suave); font-size: 13px; }
.inicio-aviso-ico { width: 40px; height: 40px; border-radius: 12px; flex: none; display: flex; align-items: center; justify-content: center;
                    background: var(--alerta-suave); color: var(--alerta); }
.inicio-aviso-ico.ok { background: var(--ok-suave); color: var(--ok); }
.inicio-v2 .inicio-aviso > .ico:last-child { color: var(--tenue); flex: none; }
.inicio-grupos { display: grid; gap: 14px; }
.inicio-grupo { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; }
.inicio-grupo-cab { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--linea); text-decoration: none;
                    font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); background: var(--gris-cab); }
.inicio-modulos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.inicio-modulo { display: flex; align-items: center; gap: 12px; padding: 14px 16px; text-decoration: none; color: var(--tinta);
                 border-bottom: 1px solid var(--linea); border-right: 1px solid var(--linea); margin: 0 -1px -1px 0; }
.inicio-modulo-ico { width: 38px; height: 38px; border-radius: 11px; background: var(--marca-suave); color: var(--marca-fuerte); flex: none;
                     display: flex; align-items: center; justify-content: center; }
.inicio-modulo-tx { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.inicio-modulo strong { font-size: 14.5px; }
.inicio-modulo small { color: var(--suave); font-size: 12.5px; line-height: 1.35; }
.inicio-modulo.pendiente .inicio-modulo-ico { background: var(--gris); color: var(--tenue); }
.inicio-modulo.pendiente strong { color: var(--suave); }
@media (hover: hover) { .inicio-modulo:hover { background: var(--fondo); color: var(--tinta); } .inicio-v2 .inicio-aviso:hover { border-color: var(--linea-fuerte); color: var(--tinta); } }
@media (min-width: 900px) {
  /* en el computador el saludo va en una franja oscura, como el encabezado del celular */
  main:has(> .inicio-v2) > .sub-pagina { display: none; }
  .inicio-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px 28px; border-radius: var(--radio);
                 background: var(--g800); color: #fff; }
  .inicio-hero .eyebrow { color: var(--g400); }
  .inicio-hero h2 { margin: 6px 0 4px; font-size: 28px; color: #fff; }
  .inicio-hero p { margin: 0; color: #c9d0d6; } .inicio-hero p b { color: #fff; }
  .inicio-hero-btn { display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 11px 16px; border-radius: var(--radio-chico);
                     background: var(--marca); color: var(--g900); font-weight: 700; text-decoration: none; }
  .inicio-hero-btn:hover { color: var(--g900); filter: brightness(1.05); }
  .inicio-v2 > section:not(.inicio-hero) { display: block; }
  .inicio-v2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); column-gap: 22px; align-items: start; }
  .inicio-hero { grid-column: 1 / -1; }
}

/* ── Páginas de cada área v2 (05-10): una tarjeta por módulo, con sus secciones a un toque ── */
.area-v2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 14px; align-items: start; max-width: 1100px; }
.area-tarjeta { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; }
.area-tarjeta-cab { display: flex; align-items: center; gap: 14px; padding: 16px 18px; text-decoration: none; color: var(--tinta); }
.area-tarjeta-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.area-tarjeta-tx strong { font-family: var(--letra-titulos); font-size: 16.5px; font-weight: 600; }
.area-tarjeta-tx small { color: var(--suave); font-size: 13px; }
.area-tarjeta-cab > .ico:last-child { color: var(--tenue); flex: none; }
.area-secciones { display: flex; flex-direction: column; border-top: 1px solid var(--linea); }
.area-secciones a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 18px 11px 70px;
                    font-size: 14px; color: var(--tinta); text-decoration: none; border-top: 1px solid var(--linea); }
.area-secciones a:first-child { border-top: 0; }
.area-secciones a .ico { color: var(--tenue); width: 14px; height: 14px; }
.area-tarjeta.pendiente { box-shadow: none; background: transparent; border-style: dashed; }
.area-tarjeta.pendiente .inicio-modulo-ico { background: var(--gris); color: var(--tenue); }
.area-tarjeta.pendiente strong { color: var(--suave); }
@media (hover: hover) { .area-tarjeta-cab:hover, .area-secciones a:hover { background: var(--fondo); color: var(--tinta); } }
/* ── Páginas de área v3: el mismo lenguaje del inicio ── */
.area-v3 { display: flex; flex-direction: column; gap: 16px; max-width: 1100px; }
.area-v3 .inicio-modulos { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.area-v3 .inicio-modulo { padding: 18px; }
.inicio-hero-ico { display: none; }
@media (min-width: 900px) {
  main:has(> .area-v3) > :is(.titulo-pagina, .sub-pagina) { display: none; }
  .area-v3 { display: flex; }
  .inicio-hero-ico { display: flex; width: 64px; height: 64px; border-radius: 18px; background: var(--g700); color: var(--marca); align-items: center; justify-content: center; flex: none; }
  .inicio-hero-ico .ico { width: 30px; height: 30px; }
}
.area-v3 > .inicio-grupo, .area-v3 > .inicio-hero { width: 100%; align-self: stretch; grid-column: 1 / -1; }
/* las cifras del resumen del área: cada una lleva a su módulo */
.area-cifras { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 12px; }
.area-cifra { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; background: var(--papel); border: 1px solid var(--linea);
              border-radius: var(--radio); box-shadow: var(--sombra); text-decoration: none; color: var(--tinta); }
.area-cifra-rot { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--suave); }
.area-cifra b { font-family: var(--letra-titulos); font-size: 30px; font-weight: 600; line-height: 1.15; letter-spacing: -.01em; }
.area-cifra small { font-size: 12.5px; color: var(--suave); }
.area-cifra.alerta { border-color: var(--alerta-borde); background: var(--alerta-suave); } .area-cifra.alerta b { color: var(--alerta); }
.area-cifra.ok b { color: var(--ok); }
.area-v3 .inicio-seccion { margin: 6px 0 -4px; }
@media (hover: hover) { .area-cifra:hover { border-color: var(--linea-fuerte); color: var(--tinta); } }
.area-v3 > * { width: 100%; grid-column: 1 / -1; }
@media (max-width: 599px) { .area-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .area-cifra { padding: 14px; } .area-cifra b { font-size: 24px; } }

/* ── Módulos (05-10): las secciones del módulo como pestañas de verdad, con su raya abajo, distintas de las píldoras de cada pantalla ── */
.secciones-modulo { flex-wrap: nowrap; gap: 4px; margin: 0 0 22px; padding: 0; border-bottom: 1px solid var(--linea-fuerte);
                    overflow-x: auto; scrollbar-width: none; }
.secciones-modulo::-webkit-scrollbar { display: none; }
.secciones-modulo a { flex: none; position: relative; padding: 10px 14px 12px; border-radius: 0; font-size: 14.5px; font-weight: 600; color: var(--suave); background: none; }
.secciones-modulo a.activa { background: none; color: var(--tinta); font-weight: 700; }
.secciones-modulo a.activa::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--marca-fuerte); }
@media (hover: hover) { .secciones-modulo a:hover { color: var(--tinta); } }
@media (max-width: 899px) { .secciones-modulo { margin: 0 -16px 18px; padding: 0 8px; background: var(--papel); } }

/* En el celular, quien tiene la barra de abajo ya navega con ella: no se repiten las secciones arriba */
@media (max-width: 899px) { .secciones-modulo.con-menu { display: none; } }

/* Resumen de área en el celular: si quedan en número impar, la última ocupa el ancho (no queda sola a la mitad) */
@media (max-width: 899px) { .area-cifra:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* ── La portada (D196, D199; mockup portada-por-concepto) ─────────────────────────────────────────────────────
   Fondo oscuro como el riel, las aplicaciones de la persona agrupadas por área, íconos de línea sin color y solo el
   número rojo de lo pendiente. En el computador 7 por fila; en el celular 3, sin scroll hacia el lado. */
body.portada-pagina { min-height: 100vh; color: #f2f4f6;
  background: radial-gradient(1200px 700px at 15% -10%, #24343a 0%, transparent 60%),
              radial-gradient(900px 600px at 100% 110%, #221f33 0%, transparent 60%), var(--g900);
  }
.portada { --p-suave: #9aa3ac; --p-linea: rgba(255, 255, 255, .09); --p-baldosa: rgba(255, 255, 255, .055);
  --p-baldosa-h: rgba(255, 255, 255, .11); max-width: 1072px; margin: 0 auto; padding: 0 16px 24px; overflow-x: hidden; }
.portada a { color: inherit; text-decoration: none; }
.portada-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.portada-arriba { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 0; }
.portada-sello { display: flex; align-items: center; gap: 10px; min-width: 0; }
.portada-sello b { font-weight: 700; letter-spacing: .14em; font-size: 19px; }
.portada-sello span { color: var(--p-suave); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.portada-sello span::before { content: "·"; margin-right: 8px; }
.portada-yo { display: flex; align-items: center; gap: 10px; text-align: right; min-width: 0; }
.portada-yo-tx b { display: block; font-size: 14px; }
.portada-yo-tx small { display: block; color: var(--p-suave); font-size: 12.5px; }
.portada-avatar { width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 700;
  background: rgba(255, 255, 255, .12); border: 1px solid var(--p-linea); }
.portada-toca { margin-top: 4px; padding: 14px 16px; border: 1px solid var(--p-linea); border-radius: 12px; background: rgba(255, 255, 255, .04); }
.portada-toca h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 14px; font-weight: 700; letter-spacing: 0; }
.portada-punto { width: 8px; height: 8px; border-radius: 4px; background: #e0a040; flex: none; }
.portada-cuenta { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #d9534a; color: #fff;
  font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.portada-toca ul { list-style: none; margin: 0; padding: 0; }
.portada-aviso { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--p-linea); }
.portada-toca li:first-child .portada-aviso { border-top: 0; }
.portada-aviso-ico { color: #e0a040; display: grid; place-items: center; }
.portada-aviso-tx { flex: 1; min-width: 0; font-size: 14px; }
.portada-aviso-tx b { font-weight: 600; margin-right: 8px; }
.portada-aviso-tx small { color: var(--p-suave); font-size: 13px; }
.portada-aviso > .ico:last-child { color: var(--p-suave); flex: none; }
.portada-aviso:hover b { text-decoration: underline; }
.portada-grilla { padding: 28px 0 32px; display: grid; gap: 28px; }
.portada-grupo h2 { margin: 0 0 14px; font: 600 12px/1.3 var(--letra); letter-spacing: .1em; text-transform: uppercase; color: var(--p-suave); }
.portada-grupo h2 span { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 8px; }
.portada-apps { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 24px 14px; }
.portada .portada-app { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: 14px; line-height: 1.3; text-align: center; color: #f2f4f6; }
.portada-ico { width: 72px; height: 72px; border-radius: 18px; background: var(--p-baldosa); border: 1px solid var(--p-linea);
  display: grid; place-items: center; color: #e6e9ec; transition: background .15s, transform .15s; }
.portada-ico .ico { width: 32px; height: 32px; }
.portada-app:hover .portada-ico, .portada-app:focus-visible .portada-ico { background: var(--p-baldosa-h); transform: translateY(-2px); }
.portada-app.pronto { opacity: .45; }
.portada-app small { display: block; color: var(--p-suave); font-size: 11.5px; margin-top: -8px; }
.portada-num { position: absolute; top: -6px; left: calc(50% + 24px); min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: #d9534a; color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; z-index: 1; }
.portada-pie { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; padding-top: 20px; border-top: 1px solid var(--p-linea);
  font-size: 13.5px; color: var(--p-suave); }
.portada-pie a, .portada-pie button { display: inline-flex; align-items: center; gap: 6px; color: var(--p-suave); }
.portada-pie button { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.portada-pie a:hover, .portada-pie button:hover { color: #fff; }
.portada-pie form { margin: 0; }
@media (max-width: 900px) { .portada-apps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .portada-apps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 8px; }
  .portada-ico { width: 64px; height: 64px; } .portada-ico .ico { width: 28px; height: 28px; }
  .portada .portada-app { font-size: 13px; } .portada-num { left: calc(50% + 20px); }
  .portada-yo-tx { display: none; }
  .portada-aviso-tx b, .portada-aviso-tx small { display: block; }
  .portada-grupo h2 span { display: block; margin: 2px 0 0; }
}

/* La barra del celular de Contabilidad, solo con íconos (D212, mockup del cierre contable): con «Facturación» y «Cierre del mes» el área
   tiene 8 módulos y, con «Yo», 9 pestañas no caben con su nombre en 375 px. El nombre va solo en la pestaña abierta; el
   lector de pantalla lee todos (aria-label). */
@media (max-width: 899px) {
  .pestanas-movil.solo-iconos { padding: 6px 4px; }
  .pestanas-movil.solo-iconos a { min-width: 0; font-size: 0; gap: 0; justify-content: center; white-space: nowrap; }
  .pestanas-movil.solo-iconos a.activa { flex: 1.7; font-size: 10.5px; gap: 2px; }
  .pestanas-movil.solo-iconos a .ico { width: 36px; padding: 5px 8px; }
}

/* ── Interfaz nueva (mockup de la reestructura, cerrado el 15-10) ─────────────────────────────────────────────
   En el computador: una sola barra blanca (SUN, la empresa, todos los módulos de la persona y «Mi cuenta» abajo) y,
   arriba, una barra con el nombre del módulo y todas sus secciones. Sin el riel oscuro de áreas ni las migas.
   El celular sigue igual. */
@media (min-width: 900px) {
  .app, .app.app-inicio { grid-template-columns: 252px minmax(0, 1fr); }
  .app > .riel { display: none; }
  .app-inicio > .lateral { display: flex; }
  .lateral { padding: 20px 14px 14px; gap: 2px; }
  .lateral .nv-sello { display: flex; align-items: center; gap: 10px; padding: 0 6px 16px; color: var(--tinta); text-decoration: none; }
  .lateral .nv-sello b { font-weight: 700; font-size: 17px; letter-spacing: .16em; }
  .lateral .nv-empresa { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; padding: 10px 12px; border: 1px solid var(--linea);
    border-radius: 14px; background: var(--fondo); color: var(--tinta); text-decoration: none; line-height: 1.2; }
  .lateral .nv-empresa img { width: 36px; height: 36px; border-radius: 50%; object-fit: contain; background: #fff; flex: none; }
  .lateral .nv-empresa b { display: block; font-family: var(--letra-titulos); font-weight: 600; font-size: 15px; }
  .lateral .nv-empresa small { display: block; font-size: 12px; color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lateral .modulos-area a { font-size: 14.5px; flex-wrap: nowrap; }
  .lateral .nv-raya { display: block; height: 1px; margin: 6px 10px; background: var(--linea); }
  .barra-enc { gap: 8px; padding: 0 28px; height: 60px; min-height: 60px; align-items: stretch; background: var(--papel); }
  .barra-enc .be-mod { display: flex; align-items: center; margin-right: 18px; font-family: var(--letra-titulos); font-weight: 600; font-size: 18px; white-space: nowrap; }
  .barra-enc .be-nav { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
  .barra-enc .be-nav::-webkit-scrollbar { display: none; }
  .barra-enc .be-nav a { display: flex; align-items: center; padding: 0 14px; color: var(--suave); font-weight: 600; font-size: 14px;
    text-decoration: none; border-bottom: 3px solid transparent; white-space: nowrap; }
  .barra-enc .be-nav a:hover { color: var(--tinta); }
  .barra-enc .be-nav a.activa { color: var(--tinta); border-bottom-color: var(--marca-fuerte); }
  .barra-enc .fecha-chip { align-self: center; margin-left: auto; }
  /* las secciones ya están en la barra de arriba: dentro de la pantalla no se repiten */
  main > .secciones-modulo { display: none; }
}

/* El Inicio nuevo: lo que hay que hacer, en filas parejas */
.inicio-nuevo { display: flex; flex-direction: column; gap: 22px; max-width: 880px; }
.inicio-nuevo .in-tit { margin: 0 0 10px; font-size: 17px; }
.in-lista { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; }
.in-fila { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-top: 1px solid var(--linea); color: var(--tinta); text-decoration: none; }
.in-fila:first-child { border-top: 0; }
.in-ico, .in-num { width: 40px; height: 40px; border-radius: 12px; flex: none; display: flex; align-items: center; justify-content: center;
  background: var(--marca-suave); color: var(--marca-fuerte); font-weight: 700; }
.in-num { background: var(--alerta-suave); color: var(--alerta); }
.in-tx { flex: 1; min-width: 0; }
.in-tx b { display: block; font-size: 15px; }
.in-tx small { display: block; margin-top: 2px; color: var(--suave); font-size: 13px; }
.in-ir { flex: none; padding: 8px 14px; border-radius: var(--radio-chico); border: 1px solid var(--linea-fuerte); font-weight: 700; font-size: 13.5px; }
.in-fila:first-child .in-ir { background: var(--g900); border-color: var(--g900); color: #fff; }
.in-fila > .ico:last-child { color: var(--tenue); flex: none; }
.in-vacio { display: flex; align-items: center; gap: 8px; margin: 0; padding: 16px 18px; background: var(--ok-suave); color: var(--ok); border-radius: var(--radio); font-weight: 600; }
@media (hover: hover) { .in-fila:hover { background: var(--fondo); color: var(--tinta); } }
@media (min-width: 900px) { main:has(> .inicio-nuevo) > .titulo-pagina { font-size: 26px; } }

/* Interfaz nueva de la tienda: todas sus pantallas al centro con el mismo ancho, y las cifras de arriba en blanco
   (como el mockup), no en la franja oscura del celular. */
@media (min-width: 900px) {
  .rol-tienda .app main { max-width: 940px; margin-left: auto; margin-right: auto; }
  .rol-tienda .cifras-pc .base-plan, .rol-tienda .cifras-pc > div { background: var(--papel); color: var(--tinta); border: 1px solid var(--linea); box-shadow: var(--sombra); }
  .rol-tienda .cifras-pc .base-plan small, .rol-tienda .cifras-pc small { color: var(--suave) !important; }
  .rol-tienda .cifras-pc .base-plan b, .rol-tienda .cifras-pc b { color: var(--tinta) !important; }
  .rol-tienda .cifras-pc .base-plan > div, .rol-tienda .cifras-pc > div > div { border-color: var(--linea) !important; }
}
@media (min-width: 900px) {
  /* adentro, cada bloque ocupa el ancho de la pantalla (antes cada una tenía su propio ancho y quedaban disparejas) */
  .rol-tienda .app main > * { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
}

/* ── Ajustes 19-10 (Camila): que se vea bien con la pantalla al 100 % y al 125 %, la empresa arriba junto a la fecha
   y un fondo con más vida ─────────────────────────────────────────────────────────────────────────────────────── */
@media (min-width: 900px) {
  /* el contenido al centro, con un ancho cómodo, en todas las áreas (antes quedaba pegado a la izquierda) */
  .app .principal > main { width: 100%; max-width: 1120px; margin-left: auto; margin-right: auto; padding: 28px 40px 48px; }
  .app .principal > main > .inicio-nuevo { max-width: none; }
  .rol-tienda .app main { max-width: 1000px; }
  /* la barra lateral: más compacta para que los módulos quepan sin barra de desplazamiento a la vista */
  .lateral { padding: 18px 12px 12px; scrollbar-width: none; }
  .lateral::-webkit-scrollbar { display: none; }
  .lateral .nv-sello { padding: 0 8px 14px; }
  .lateral .modulos-area { gap: 1px; }
  .lateral .modulos-area a { padding: 7px 10px; font-size: 14px; min-height: 0; }
  .lateral .modulos-area a .ico { width: 17px; height: 17px; }
  .lateral .nv-raya { margin: 5px 10px; }
  .lateral .quien { padding: 10px 8px; }
  /* la empresa, arriba a la derecha, al lado de la fecha */
  .barra-enc .be-der { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: none; }
  .barra-enc .be-der .fecha-chip { margin-left: 0; }
  .be-empresa { display: flex; align-items: center; gap: 9px; padding: 5px 12px 5px 6px; border: 1px solid var(--linea); border-radius: 999px;
    background: var(--papel); color: var(--tinta); text-decoration: none; line-height: 1.15; }
  .be-empresa img { width: 28px; height: 28px; border-radius: 50%; object-fit: contain; background: #fff; flex: none; }
  .be-empresa b { display: block; font-size: 13.5px; font-weight: 700; }
  .be-empresa small { display: block; font-size: 11.5px; color: var(--suave); }
  .be-empresa:hover { border-color: var(--linea-fuerte); color: var(--tinta); }
  /* el fondo: un gris claro con un brillo suave del color de la marca arriba, en vez de un gris plano */
  .app .principal { background: var(--fondo); }
  .barra-enc { background: color-mix(in srgb, var(--papel) 88%, transparent); backdrop-filter: blur(8px); }
}
/* pantallas medianas (125 % de escala en un portátil): un poco menos de aire */
@media (min-width: 900px) and (max-width: 1600px) {
  .app .principal > main { padding: 22px 28px 40px; }
  .app, .app.app-inicio { grid-template-columns: 232px minmax(0, 1fr); }
  .barra-enc { padding: 0 20px; }
  .barra-enc .be-mod { margin-right: 8px; font-size: 17px; }
  .be-empresa small { display: none; }
}
/* portátil de 1280–1400 px: las pestañas más juntas y el selector sin su segunda línea, para que no se corte la última
   pestaña («Historial» de Compras quedaba tapada; tablas, 28-10) */
@media (min-width: 900px) and (max-width: 1400px) {
  .barra-enc .be-nav a { padding: 0 10px; }
  .be-emp-sel .emp-sel > summary small { display: none; }
}
@media (min-width: 900px) {
  /* el contenido sin fondo propio: se ve el fondo con su brillo y sus puntos, parejo de lado a lado */
  .app .principal > main { background: transparent; border-radius: 0; box-shadow: none; }
}
/* con la pantalla al 100 % en un monitor grande todo se veía chico: se agranda un poco (como si fuera ~110 %) */
@media (min-width: 1760px) { html { zoom: 1.1; } }

/* ── Paleta (Camila, 19-10, opción C): blanco y negro con detalles en azul petróleo; el verde queda solo para los
   estados («Listo», «Enviado»). Va sobre el color de cada empresa (html:root gana al :root que pone base.html). ── */
html:root { --marca: #2f5d6b; --marca-fuerte: #2f5d6b; --marca-suave: #eef1f3; --fondo: #f4f5f6; }
.avatar, .pestanas-movil a.activa .ico { color: #fff; }
/* Un solo selector de empresa, arriba a la derecha (Camila, 19-10): el de cada módulo (Compras, Banco, Cobranza…)
   sube aquí y filtra; la tarjeta de empresa ya no lleva al inicio. */
@media (min-width: 900px) {
  .be-emp-sel { position: relative; display: flex; }
  .be-emp-sel .emp-sel.en-lateral { display: block; margin: 0; }
  .be-emp-sel .emp-sel > summary { display: flex; align-items: center; gap: 9px; padding: 5px 12px 5px 6px; border: 1px solid var(--linea);
    border-radius: 999px; background: var(--papel); cursor: pointer; list-style: none; min-height: 0; box-shadow: none; }
  .be-emp-sel .emp-sel > summary::-webkit-details-marker { display: none; }
  .be-emp-sel .emp-sel > summary .emp-logo, .be-emp-sel .emp-sel > summary img { width: 28px !important; height: 28px !important; border-radius: 50%; }
  .be-emp-sel .emp-sel > summary b { font-size: 13.5px; } .be-emp-sel .emp-sel > summary small { font-size: 11.5px; }
  .be-emp-sel .emp-menu { left: auto; right: 0; }
}

/* La flecha para volver, al lado del título (Camila, 21-10). */
.titulo-pagina .titulo-atras { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; margin-right: 10px;
  border-radius: 10px; border: 1px solid var(--linea); background: var(--papel); color: var(--tinta); text-decoration: none; }
.titulo-pagina .titulo-atras[hidden] { display: none; }
.titulo-pagina .titulo-atras:hover { border-color: var(--linea-fuerte); background: var(--gris); }
.titulo-pagina .titulo-atras .ico { width: 18px; height: 18px; }

/* ── Barra lateral por grupos, como DBNet pero blanca (Camila, 27-10; la probó oscura y no la convenció): cada área
   se abre y se cierra con su flecha; abierta solo la del módulo en el que se está. */
@media (min-width: 900px) {
  .lateral .nv-grupo > summary { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; cursor: pointer;
    list-style: none; font-weight: 700; font-size: 14px; color: var(--tinta); }
  .lateral .nv-grupo > summary:hover { background: var(--fondo); }
  .lateral .nv-grupo > summary::-webkit-details-marker { display: none; }
  .lateral .nv-grupo > summary .ico { width: 17px; height: 17px; flex: none; }
  .lateral .nv-grupo > summary span { flex: 1; }
  .lateral .nv-flecha { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(-45deg); opacity: .55; transition: transform .15s; flex: none; margin-right: 4px; }
  .lateral .nv-grupo[open] > summary .nv-flecha { transform: rotate(45deg); }
  .lateral .nv-grupo > a { padding-left: 38px !important; }
  .lateral .nv-grupo[open] { padding-bottom: 4px; }
}