/*
 * Emprendiendo prioriza lectura operativa. El módulo genera la mayor parte de
 * su HTML en runtime, por eso estas reglas viven en una capa propia: evitan que
 * una tarjeta nueva vuelva a heredar tipografías de 8–10 px o texto apagado.
 */
.emprendiendo-readable,
.emprendiendo-modal {
  --emp-body-size: var(--app-text-size, .875rem);
  --emp-meta-size: var(--app-meta-size, .75rem);
  --emp-control-size: var(--app-control-size, .875rem);
  --emp-line-height: 1.45;
}

/* Etiquetas y metadatos: 12 px es el mínimo legible. Los párrafos de ayuda,
   estados vacíos y texto de lectura pasan a 14 px, como Movimientos. */
.emprendiendo-readable #emprendiendo-content :is(.text-\[8px\], .text-\[9px\], .text-\[10px\], .text-\[11px\]),
.emprendiendo-modal :is(.text-\[8px\], .text-\[9px\], .text-\[10px\], .text-\[11px\]) {
  font-size: var(--emp-meta-size);
  line-height: var(--emp-line-height);
}

.emprendiendo-readable #emprendiendo-content :is(p, li, .text-xs),
.emprendiendo-modal :is(p, li, .text-xs) {
  font-size: var(--emp-body-size);
  line-height: 1.5;
}

.emprendiendo-readable #emprendiendo-content :is(.text-sm, h3),
.emprendiendo-modal :is(.text-sm, h3) {
  line-height: 1.35;
}

/* En todos los temas, la explicación que permite interpretar una cifra debe
   conservar contraste suficiente; la jerarquía se expresa con tamaño y peso. */
.emprendiendo-readable #emprendiendo-content [class*="text-txt2/"],
.emprendiendo-modal [class*="text-txt2/"] {
  color: var(--text-secondary) !important;
  opacity: 1;
}

.emprendiendo-readable #emprendiendo-content .leading-tight,
.emprendiendo-modal .leading-tight {
  line-height: var(--emp-line-height);
}

/* No ocultar una descripción, categoría o cuenta solo porque comparte fila
   con una cifra o acción. Las tarjetas crecen antes de cortar información. */
.emprendiendo-readable #emprendiendo-content .truncate {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.emprendiendo-readable #emprendiendo-content .emp-summary-card {
  align-items: flex-start;
}

.emprendiendo-readable #emprendiendo-content .emp-kpi-grid {
  grid-template-columns: minmax(0, 1fr);
}

.emprendiendo-readable #emprendiendo-content .emp-kpi-grid > .neon-card,
.emprendiendo-readable #emprendiendo-content .emp-summary-card.neon-card {
  padding: 1rem;
}

.emprendiendo-readable #emprendiendo-content .emp-data-row {
  align-items: flex-start;
}

.emprendiendo-readable #emprendiendo-content .emp-data-row > :first-child {
  min-width: 0;
}

/* Campos coherentes con Dashboard: compactos en escritorio y con 44 px de
   alto para conservar una interacción táctil cómoda. */
.emprendiendo-readable :is(input, select, textarea),
.emprendiendo-modal :is(input, select, textarea) {
  font-size: var(--emp-control-size) !important;
  min-height: 44px;
  line-height: 1.35;
}

/* `:not(.hidden)` es obligatorio aquí: forzar `display` con dos clases propias
   le gana al `.hidden` de Tailwind, y un chip oculto ("Volver a utilizar" /
   "Eliminar lista") seguía viéndose. Ver el mismo caso en app-readable.css. */
.emprendiendo-readable :is(.link-chip, .neon-cta):not(.hidden),
.emprendiendo-modal :is(.link-chip, .neon-cta):not(.hidden) {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Los selects buscables reemplazan el <select> por un botón que hereda sus
   clases; este refuerzo conserva el mismo tamaño táctil en ese reemplazo. */
.emprendiendo-readable .ss-trigger,
.emprendiendo-modal .ss-trigger {
  font-size: var(--emp-control-size) !important;
  min-height: 44px;
}

.emprendiendo-readable button:not([data-action="cart-qty"]):not([data-action="cart-remove"]):not(.glossary-trigger),
.emprendiendo-modal button:not(.glossary-trigger) {
  min-height: 44px;
}

/* El (i) comparte la huella compacta del Dashboard; nunca debe heredar el
   mínimo táctil de los botones de acción de Emprendimiento. */
.emprendiendo-readable .glossary-trigger,
.emprendiendo-modal .glossary-trigger {
  min-height: 16px;
}

/* El selector de cobro contiene etiquetas breves, no un segundo texto de
   ayuda. La explicación accesible vive en su (i) contextual. */
.emprendiendo-readable #pos-modo {
  font-size: var(--emp-meta-size) !important;
}

/* Agendamientos concentra siete acciones en una sola fila. Estas fechas no
   pueden heredar los 44 px de los botones de formulario: en la antigua columna
   de 260 px el mínimo ensanchaba las pistas y montaba los días entre sí. */
.emprendiendo-readable #emprendiendo-content .emp-appointments-layout {
  grid-template-columns: minmax(0, 1fr);
}

.emprendiendo-readable #emprendiendo-content :is(.emp-appointment-calendar-week, .emp-appointment-calendar-grid) {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  min-width: 0;
}

.emprendiendo-readable #emprendiendo-content .emp-appointment-calendar-day {
  width: 100%;
  min-width: 0;
  min-height: clamp(32px, 8vw, 40px) !important;
  aspect-ratio: 1;
}

@media (min-width: 768px) {
  .emprendiendo-readable #emprendiendo-content .emp-appointments-layout {
    grid-template-columns: minmax(280px, 300px) minmax(0, 1fr);
  }
}

@media (min-width: 480px) {
  .emprendiendo-readable #emprendiendo-content .emp-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 640px) {
  .emprendiendo-readable #emprendiendo-content .emp-summary-card {
    align-items: center;
  }
}

@media (min-width: 768px) {
  .emprendiendo-readable #emprendiendo-content .emp-kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 479px) {
  .emprendiendo-readable #emprendiendo-content .emp-summary-card {
    display: block;
  }

  .emprendiendo-readable #emprendiendo-content .emp-summary-card > .link-chip {
    width: 100%;
    margin-top: .75rem;
  }

  .emprendiendo-readable #emprendiendo-content .emp-data-row {
    flex-direction: column;
    gap: .35rem;
  }

  .emprendiendo-readable #emprendiendo-content .emp-data-row > :last-child {
    align-self: stretch;
    text-align: left;
    flex-wrap: wrap;
  }

  .emprendiendo-modal form .grid.grid-cols-2,
  .emprendiendo-readable #emprendiendo-content .neon-card > .grid.grid-cols-2:not(.emp-kpi-grid) {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Misma excepción que el Dashboard: móvil o puntero táctil usa 16 px para
   evitar zoom al enfocar campos; el selector de cobro sigue compacto. */
@media (any-pointer: coarse), (max-width: 639px) {
  .emprendiendo-readable :is(input, select, textarea),
  .emprendiendo-modal :is(input, select, textarea),
  .emprendiendo-readable .ss-trigger,
  .emprendiendo-modal .ss-trigger {
    font-size: 1rem !important;
  }

  .emprendiendo-readable #pos-modo {
    font-size: var(--emp-meta-size) !important;
  }
}