/**
 * theme.css — repaso de diseño de FullTime
 *
 * No reemplaza el template base (main.css): redefine los tokens de color/
 * tipografía que ya existían y ajusta un puñado de componentes puntuales
 * (botones, tablas, modales, formularios) para que todas las pantallas usen
 * el mismo radio, la misma sombra y el mismo borde, con una sola tipografía
 * y una jerarquía clara entre acción primaria y secundaria.
 *
 * Se carga después de main.css y ui-enhancements.css en cada página.
 */

/* ---------- Tipografía y color base ----------
   Colores desde /theme.css (única fuente del proyecto). Acá solo se mapean. */
@import url("../../../theme.css");

:root {
  --default-font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --heading-font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --nav-font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --background-color: var(--c-g-50);
  --default-color: var(--c-g-600);
  --heading-color: var(--c-brand);
  --accent-color: var(--c-brand);
  --surface-color: var(--c-white);
  --contrast-color: var(--c-white);

  /* Tokens nuevos: un solo borde, un solo tono de "hover" del acento, y un
     anillo de foco consistente en todos los inputs. */
  --line-color: var(--c-line);
  --accent-strong: var(--c-brand-dark);
  --focus-ring: var(--c-focus);
  --success-color: #1E8E5A;
  --danger-color: var(--c-brand);
}

:root {
  --nav-color: var(--c-g-600);
  --nav-hover-color: var(--c-brand);
  --nav-dropdown-color: var(--c-g-600);
  --nav-dropdown-hover-color: var(--c-brand);
}

body {
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
}

/* Manrope tiene métricas de línea distintas a la fuente por defecto del
   template: el texto (y los <span> de ícono/estado que arman muchos
   botones) quedaba centrado por line-height, que con esta fuente cae un
   poco por encima del centro real. Centrar por caja (flex) en vez de por
   línea lo corrige en toda la app sin depender de la fuente. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

/* Muchos botones arman su contenido como "<i>ícono</i> Texto" directo, y
   otros lo envuelven en un <span> (para poder tener una versión "cargando"
   y una versión normal, con v-if/v-else). El gap de arriba separa lo primero;
   esto separa el ícono/spinner del texto también cuando están adentro de
   ese span. */
.btn > span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.badge {
  display: inline-flex;
  align-items: center;
}

h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.012em;
}

/* ---------- Encabezado / navegación ---------- */
.header {
  border-bottom: 1px solid var(--line-color);
}

.scrolled .header {
  box-shadow: none;
}

.navmenu a,
.navmenu a:focus {
  font-weight: 500;
}

@media (min-width: 1200px) {
  .navmenu li > a {
    position: relative;
  }

  .navmenu li:hover > a::after,
  .navmenu .active::after {
    content: "";
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 10px;
    height: 2px;
    background: var(--accent-color);
    border-radius: 2px;
  }
}

.btn-getstarted,
.header .btn-getstarted,
.btn-getstarted:focus,
.header .btn-getstarted:focus {
  background: transparent;
  color: var(--default-color);
  border: 1px solid var(--line-color);
  padding: 7px 18px;
  border-radius: 8px;
  font-weight: 500;
}

.btn-getstarted:hover,
.header .btn-getstarted:hover,
.btn-getstarted:focus:hover,
.header .btn-getstarted:focus:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 92%);
  color: var(--heading-color);
  border-color: var(--accent-color);
}

/* ---------- Botones ---------- */

/* Cancelar/Cerrar en modales: neutro, no compite con la acción principal.
   Se define antes de .secundario para que, cuando ambas clases conviven
   (ej. el link "Volver" junto a un submit primario), gane .secundario. */
.btn-secondary {
  background: transparent;
  border: 1px solid var(--line-color);
  color: var(--default-color);
  font-family: var(--nav-font);
  font-weight: 600;
  border-radius: 8px;
}

.btn-secondary:hover {
  background: color-mix(in srgb, var(--default-color), transparent 94%);
  border-color: color-mix(in srgb, var(--default-color), transparent 40%);
  color: var(--heading-color);
}

.btn-secondary:active {
  background: color-mix(in srgb, var(--default-color), transparent 88%);
}

.btn-outline-secondary {
  border: 1px solid var(--line-color);
  color: var(--default-color);
  font-weight: 600;
  border-radius: 8px;
}

.btn-outline-secondary:hover {
  background: color-mix(in srgb, var(--default-color), transparent 94%);
  border-color: color-mix(in srgb, var(--default-color), transparent 40%);
  color: var(--heading-color);
}

/* Una acción primaria, una secundaria con peso de marca */
.primario,
.btn-primary {
  background: var(--accent-color);
  border: 1px solid var(--accent-color);
  color: var(--contrast-color);
  font-family: var(--nav-font);
  font-weight: 600;
  border-radius: 8px;
}

.primario:hover,
.btn-primary:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: var(--contrast-color);
}

.primario:active,
.btn-primary:active {
  background: var(--accent-strong);
  filter: none;
}

.secundario {
  background: transparent;
  border: 1px solid var(--line-color);
  color: var(--accent-strong);
  font-family: var(--nav-font);
  font-weight: 600;
  border-radius: 8px;
}

.secundario:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 94%);
  border-color: var(--accent-color);
  color: var(--accent-strong);
}

.secundario:active {
  background: color-mix(in srgb, var(--accent-color), transparent 88%);
  filter: none;
}

.btn-outline-primary {
  border-color: var(--accent-color);
  color: var(--accent-strong);
}

.btn-outline-primary:hover {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--contrast-color);
}

.btn-choose {
  border-radius: 8px;
  font-weight: 600;
  padding: 0.5rem 1.1rem;
}

.badge.secundario {
  background: color-mix(in srgb, var(--accent-color), transparent 85%);
  color: var(--accent-strong);
  border: none;
  font-weight: 600;
  border-radius: 6px;
}

/* Apaga el "shine" viajero y el lift/scale del template en todos los
   botones: queda un único feedback de interacción, discreto y rápido. */
.btn::before,
.btn-choose::before,
.primario::before,
.secundario::before {
  display: none;
}

.btn:hover,
.btn-choose:hover,
.primario:hover,
.secundario:hover {
  transform: none;
  box-shadow: 0 2px 8px rgba(20, 48, 46, 0.08);
}

.btn:active,
.btn-choose:active,
.primario:active,
.secundario:active {
  transform: none;
  box-shadow: none;
}

/* ---------- Formularios ---------- */
.form-control,
.form-select {
  border: 1px solid var(--line-color);
  border-radius: 8px;
  padding: 0.55rem 0.85rem;
  color: var(--heading-color);
  font-family: var(--default-font);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.form-label {
  font-weight: 600;
  color: var(--heading-color);
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
}

/* main.css ya trae reglas más específicas para inputs dentro de .modal-body;
   se repiten acá con el mismo selector para que quede el mismo look sin
   pelear de especificidad. */
.modal-body .form-control {
  border: 1px solid var(--line-color);
  border-radius: 8px;
}

.modal-body .form-control:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* ---------- Tarjetas ---------- */
.card {
  border: 1px solid var(--line-color);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(20, 48, 46, 0.04);
}

.features-cards .feature-card {
  border: 1px solid var(--line-color);
  box-shadow: 0 1px 2px rgba(20, 48, 46, 0.04);
}

.features-cards .feature-card:hover {
  transform: none;
  box-shadow: 0 1px 2px rgba(20, 48, 46, 0.04);
  border-color: var(--line-color);
}

.features-cards .feature-card .icon-box {
  background-color: color-mix(in srgb, var(--accent-color), transparent 88%);
}

/* ---------- Tablas: una sola escala tipográfica en toda la app ----------
   Antes, las tablas "grilla" (.data-table) tenían su propio tamaño de letra
   y las tablas sueltas dentro de formularios (venta/pago/devolución) usaban
   Bootstrap sin tamaño propio + <small> aplicado de forma pareja pero sin
   relación con el resto: el encabezado quedaba en el tamaño de texto normal
   y las filas, más chicas, generando un salto notorio entre encabezado y
   filas, y entre la tabla y el texto de un modal de al lado. Con esta regla
   todas las tablas (con o sin .data-table) quedan en el mismo tamaño base,
   y un <small> dentro de una tabla deja de encoger el texto todavía más. */
.table {
  font-size: 0.9rem;
}

.table small {
  font-size: 1em;
}

.table thead th {
  font-weight: 700;
  color: var(--heading-color);
  border-bottom: 2px solid var(--line-color);
}

.data-table,
.thead-brand {
  box-shadow: none;
}

.data-table {
  border: 1px solid var(--line-color);
}

.data-table thead,
.thead-brand {
  background: color-mix(in srgb, var(--accent-color), var(--surface-color) 90%);
  color: var(--heading-color);
}

.data-table thead th,
.thead-brand th {
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.2px;
  color: var(--heading-color);
  border-bottom: 1px solid var(--line-color);
}

.data-table tbody tr:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 96%);
  transform: none;
}

.data-table tbody td {
  font-variant-numeric: tabular-nums;
}

.table-responsive {
  box-shadow: none;
  border: 1px solid var(--line-color);
  border-radius: 12px;
}

/* ---------- Modales: un mismo estándar de tipografía y espaciado ----------
   Antes cada modal tenía su propia mezcla de tamaños (form-control normal
   acá, form-control-sm allá, table-sm con la tabla grande de al lado, un
   <hr> suelto separando secciones). Estas reglas fijan un único ritmo:
   título, cuerpo con aire, tablas sin doble marco, y las secciones internas
   (como "agregar variante nueva") en una caja propia en vez de una línea. */
.modal-content {
  border: 1px solid var(--line-color);
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(20, 48, 46, 0.12);
}

.modal-header {
  background: var(--surface-color);
  color: var(--heading-color);
  border-bottom: 1px solid var(--line-color);
  border-radius: 12px 12px 0 0;
  padding: 1.1rem 1.5rem;
}

.modal-header .modal-title {
  color: var(--heading-color);
  font-size: 1.05rem;
  font-weight: 700;
}

.modal-header .btn-close {
  filter: none;
  opacity: 0.6;
}

.modal-header .btn-close:hover {
  opacity: 1;
}

.modal-body {
  padding: 1.5rem;
}

.modal-body h6 {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--heading-color);
  margin-bottom: 0.25rem;
}

.modal-body hr {
  border-top: 1px solid var(--line-color);
  opacity: 1;
}

/* Tabla dentro de un modal: sin marco propio (el modal ya hace de marco),
   con un poco más de aire por fila que la densidad "table-sm". */
.modal-body .table-responsive {
  border: none;
  border-radius: 0;
}

.modal-body .table td,
.modal-body .table th {
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
}

/* Caja para una sub-sección del modal (ej. "agregar variante nueva" debajo
   de una tabla): reemplaza el patrón de <hr> + <h6> pegados al contenido. */
.modal-subsection {
  background: color-mix(in srgb, var(--accent-color), var(--surface-color) 95%);
  border: 1px solid var(--line-color);
  border-radius: 10px;
  padding: 1.25rem;
  margin-top: 1.5rem;
}

/* Único caso con encabezado de color a propósito: comunica "buenas
   noticias" (saldo a favor disponible), no es la marca. */
.modal-header.modal-header-success {
  background: var(--success-color);
  color: var(--contrast-color);
}

.modal-header.modal-header-success .modal-title {
  color: var(--contrast-color);
}

.modal-footer .btn-primary:hover {
  transform: none;
  box-shadow: none;
}

.modal-footer .btn-outline-primary:hover {
  transform: none;
}

/* ---------- Alertas ---------- */
.alert-success {
  background-color: color-mix(in srgb, var(--success-color), transparent 90%);
  color: color-mix(in srgb, var(--success-color), black 35%);
  border-left: 3px solid var(--success-color);
}

.alert-danger {
  background-color: color-mix(in srgb, var(--danger-color), transparent 92%);
  color: color-mix(in srgb, var(--danger-color), black 25%);
  border-left: 3px solid var(--danger-color);
}


/* Ítems de menú todavía no implementados (marcados con TODO) */
.navmenu a.menu-item-todo {
  opacity: .55;
  cursor: not-allowed;
}
.navmenu a.menu-item-todo .badge-todo {
  margin-left: .35rem;
  padding: .1rem .4rem;
  border-radius: 999px;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .04em;
  background: #f0ad4e;
  color: #222;
  vertical-align: middle;
}

/* ---------- Cards de tabla del dashboard (Top 10) ----------
   La tabla ocupa toda la card: el título es una cabecera con su divisor y la
   tabla llega a los bordes, sin las líneas horizontales de Bootstrap. */
.dash-table-card {
  padding: 0;
  overflow: hidden;
}
.dash-table-card .card-body {
  padding: 0;
}
.dash-table-card .card-title {
  margin: 0;
  padding: 16px 20px;
  font-size: 1rem;
  border-bottom: 1px solid var(--line-color);
}
.dash-table-card .table-responsive {
  margin: 0;
}
.dash-table-card table {
  margin: 0;
  width: 100%;
}
/* Sin bordes de celda (las "líneas feas"); respiro vertical parejo */
.dash-table-card th,
.dash-table-card td {
  border: 0;
  padding: 11px 20px;
  vertical-align: middle;
}
.dash-table-card tbody tr {
  transition: background-color .15s ease;
}
.dash-table-card tbody tr:hover {
  background-color: color-mix(in srgb, var(--c-brand), transparent 90%) !important;
}