/* =========================================================
   VALDAC · Calculadora
   Sistema de diseño - Mobile First
   ========================================================= */

/* ---------- Variables ---------- */
:root {
   /* Colores marca */
   --brand-primary: #FF6B6B;
   --brand-primary-dark: #FF3D7F;
   --brand-gradient: linear-gradient(135deg, #FF6B6B 0%, #FF3D7F 100%);

   /* Colores funcionales */
   --color-success: #10B981;
   --color-success-soft: #D1FAE5;
   --color-success-bg: #ECFDF5;
   --color-warning: #F59E0B;
   --color-warning-soft: #FEF3C7;
   --color-danger: #EF4444;
   --color-danger-soft: #FEE2E2;
   --color-info: #3B82F6;
   --color-info-soft: #DBEAFE;

   /* Acentos suaves para tarjetas */
   --accent-pink: #FFE4EC;
   --accent-yellow: #FFF8DC;
   --accent-mint: #E0F7F0;
   --accent-lavender: #EEE7FF;
   --accent-peach: #FFE5D9;

   /* Neutros */
   --bg-page: #FFF8F5;
   --bg-surface: #FFFFFF;
   --bg-muted: #FAF6F2;
   --border-soft: #F0E7E0;
   --border-medium: #E5D9CF;

   --text-primary: #1F1B1A;
   --text-secondary: #5A5350;
   --text-muted: #8A827E;
   --text-inverse: #FFFFFF;

   /* Tipografía */
   --font-display: 'Roboto', Georgia, serif;
   --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

   /* Sombras */
   --shadow-sm: 0 1px 2px rgba(31, 27, 26, 0.04), 0 2px 6px rgba(31, 27, 26, 0.04);
   --shadow-md: 0 4px 12px rgba(31, 27, 26, 0.06), 0 2px 4px rgba(31, 27, 26, 0.04);
   --shadow-lg: 0 12px 32px rgba(31, 27, 26, 0.08), 0 4px 12px rgba(31, 27, 26, 0.05);
   --shadow-glow: 0 8px 24px rgba(255, 107, 107, 0.25);

   /* Radios */
   --radius-sm: 10px;
   --radius-md: 16px;
   --radius-lg: 22px;
   --radius-xl: 28px;
   --radius-pill: 999px;

   /* Espaciado layout */
   --bottom-nav-height: 76px;

   /* Transiciones */
   --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
   --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
   margin: 0;
   font-family: var(--font-body);
   font-size: 16px;
   line-height: 1.55;
   color: var(--text-primary);
   background: var(--bg-page);
   /* Patrón decorativo sutil */
   background-image:
      radial-gradient(circle at 0% 0%, rgba(255, 107, 107, 0.06) 0%, transparent 50%),
      radial-gradient(circle at 100% 0%, rgba(255, 61, 127, 0.05) 0%, transparent 50%);
   background-attachment: fixed;
   min-height: 100vh;
   /* Espacio para barra inferior en móvil */
   padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

@media (min-width: 768px) {
   body { padding-bottom: 0; }
}

button { font-family: inherit; }
input { font-family: inherit; }

/* Contenedor estrecho centrado */
.container-narrow {
   max-width: 640px;
   margin: 0 auto;
   padding-left: 1.25rem;
   padding-right: 1.25rem;
}

@media (min-width: 768px) {
   .container-narrow {
      max-width: 720px;
      padding-left: 2rem;
      padding-right: 2rem;
   }
}

/* =========================================================
   NAVBAR superior
   ========================================================= */
.app-navbar {
   position: sticky;
   top: 0;
   z-index: 50;
   background: rgba(255, 248, 245, 0.85);
   backdrop-filter: saturate(180%) blur(14px);
   -webkit-backdrop-filter: saturate(180%) blur(14px);
   border-bottom: 1px solid var(--border-soft);
}

.brand {
   gap: 0.7rem;
   color: var(--text-primary);
   transition: opacity 0.2s ease;
}
.brand:hover { opacity: 0.85; }

.brand-mark svg {
   width: 38px;
   height: 38px;
   filter: drop-shadow(0 4px 10px rgba(255, 107, 107, 0.25));
}

.brand-text { display: flex; flex-direction: column; line-height: 1.1; }

.brand-name {
   font-family: var(--font-display);
   font-weight: 700;
   font-size: 1.4rem;
   letter-spacing: -0.02em;
   color: var(--text-primary);
}

.brand-tagline {
   font-size: 0.72rem;
   font-weight: 500;
   color: var(--text-muted);
   letter-spacing: 0.04em;
   text-transform: uppercase;
   margin-top: 2px;
}

/* Tabs superior (desktop) */
.top-tabs {
   gap: 0.4rem;
   background: var(--bg-muted);
   padding: 0.35rem;
   border-radius: var(--radius-pill);
   border: 1px solid var(--border-soft);
}

.top-tab {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   border: 0;
   background: transparent;
   color: var(--text-secondary);
   padding: 0.55rem 1.1rem;
   border-radius: var(--radius-pill);
   font-weight: 600;
   font-size: 0.92rem;
   cursor: pointer;
   transition: all 0.25s var(--ease-out);
}
.top-tab i { font-size: 1.05rem; }
.top-tab:hover { color: var(--text-primary); }
.top-tab.active {
   background: var(--bg-surface);
   color: var(--brand-primary-dark);
   box-shadow: var(--shadow-sm);
}

/* =========================================================
   MAIN
   ========================================================= */
.app-main {
   padding-top: 1.75rem;
   padding-bottom: 2.5rem;
   min-height: calc(100vh - 80px);
}

@media (min-width: 768px) {
   .app-main {
      padding-top: 3rem;
      padding-bottom: 4rem;
   }
}

/* Vistas (transición entre modos) */
.view {
   display: none;
   animation: viewIn 0.5s var(--ease-out);
}
.view.active { display: block; }

@keyframes viewIn {
   from { opacity: 0; transform: translateY(12px); }
   to   { opacity: 1; transform: translateY(0); }
}

/* Encabezado de cada vista */
.view-header {
   text-align: center;
   margin-bottom: 1.75rem;
}

.view-eyebrow {
   display: inline-block;
   font-size: 0.72rem;
   font-weight: 700;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   color: var(--brand-primary-dark);
   background: var(--accent-pink);
   padding: 0.4rem 0.95rem;
   border-radius: var(--radius-pill);
   margin-bottom: 0.9rem;
}

.view-eyebrow.eyebrow-purple {
   color: #6D4CC9;
   background: var(--accent-lavender);
}

.view-title {
   font-family: var(--font-display);
   font-weight: 700;
   font-size: clamp(1.8rem, 5.5vw, 2.4rem);
   letter-spacing: -0.025em;
   line-height: 1.1;
   margin: 0 0 0.6rem;
   color: var(--text-primary);
}

.view-subtitle {
   font-size: 1rem;
   color: var(--text-secondary);
   max-width: 32em;
   margin: 0 auto;
   line-height: 1.55;
}

/* =========================================================
   TARJETA DE PRODUCTO
   ========================================================= */
.lista-productos {
   display: flex;
   flex-direction: column;
   gap: 1rem;
   margin-bottom: 1rem;
}

.card-product {
   background: var(--bg-surface);
   border: 1.5px solid var(--border-soft);
   border-radius: var(--radius-lg);
   overflow: hidden;
   box-shadow: var(--shadow-sm);
   transition: all 0.35s var(--ease-out);
   position: relative;
}

.card-product:hover {
   box-shadow: var(--shadow-md);
   border-color: var(--border-medium);
}

/* Estado: producto ganador */
.card-product.is-winner {
   border-color: var(--color-success);
   background: linear-gradient(180deg, var(--color-success-bg) 0%, var(--bg-surface) 60%);
   box-shadow: 0 8px 24px rgba(16, 185, 129, 0.18);
   transform: translateY(-2px);
}

.card-product-header {
   display: flex;
   align-items: center;
   gap: 0.8rem;
   padding: 1rem 1.25rem;
   border-bottom: 1px solid var(--border-soft);
   background: var(--bg-muted);
   position: relative;
}

.card-product.is-winner .card-product-header {
   background: var(--color-success-soft);
   border-bottom-color: rgba(16, 185, 129, 0.25);
}

.card-product-icon {
   width: 38px;
   height: 38px;
   border-radius: 12px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background: var(--bg-surface);
   color: var(--brand-primary-dark);
   font-size: 1.15rem;
   box-shadow: var(--shadow-sm);
}
.card-product.is-winner .card-product-icon {
   background: var(--color-success);
   color: white;
}

.card-product-title {
   margin: 0;
   font-family: var(--font-display);
   font-weight: 600;
   font-size: 1.18rem;
   letter-spacing: -0.015em;
   color: var(--text-primary);
   flex: 1;
   text-align: left;
}

.card-product-actions {
   display: flex;
   gap: 0.4rem;
}

.btn-icon {
   width: 36px;
   height: 36px;
   border: 0;
   background: transparent;
   border-radius: 10px;
   color: var(--text-muted);
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 1rem;
   transition: all 0.2s ease;
}
.btn-icon:hover {
   background: var(--color-danger-soft);
   color: var(--color-danger);
}
.btn-icon:disabled {
   opacity: 0.35;
   cursor: not-allowed;
}

.card-product-body {
   padding: 1.25rem;
   display: flex;
   flex-direction: column;
   gap: 1rem;
}

/* Indicador de "ganador" */
.winner-ribbon {
   position: absolute;
   top: 12px;
   right: 12px;
   background: var(--color-success);
   color: white;
   font-size: 0.72rem;
   font-weight: 700;
   letter-spacing: 0.05em;
   text-transform: uppercase;
   padding: 0.3rem 0.7rem;
   border-radius: var(--radius-pill);
   display: inline-flex;
   align-items: center;
   gap: 0.3rem;
   box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
   animation: ribbonPop 0.45s var(--ease-spring);
}
@keyframes ribbonPop {
   from { transform: scale(0.6); opacity: 0; }
   to { transform: scale(1); opacity: 1; }
}

/* =========================================================
   CAMPOS DE ENTRADA
   ========================================================= */
.input-field {
   display: flex;
   flex-direction: column;
   gap: 0.4rem;
   text-align: left;
}

.input-label {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   font-weight: 600;
   font-size: 0.9rem;
   color: var(--text-secondary);
   margin-bottom: 0;
}

.input-label i {
   font-size: 1rem;
   color: var(--brand-primary);
}

.input-wrapper {
   position: relative;
   display: flex;
   align-items: stretch;
   background: var(--bg-muted);
   border: 2px solid transparent;
   border-radius: var(--radius-md);
   transition: all 0.2s ease;
   overflow: hidden;
}

.input-wrapper:focus-within {
   background: var(--bg-surface);
   border-color: var(--brand-primary);
   box-shadow: 0 0 0 4px rgba(255, 107, 107, 0.12);
}

.input-prefix, .input-suffix {
   display: inline-flex;
   align-items: center;
   padding: 0 0.9rem;
   font-weight: 700;
   color: var(--text-secondary);
   font-size: 1.05rem;
   background: transparent;
}

.input-control {
   flex: 1;
   border: 0;
   background: transparent;
   padding: 0.95rem 0.5rem;
   font-size: 1.15rem;
   font-weight: 600;
   color: var(--text-primary);
   outline: none;
   width: 100%;
   /* Ocultar flechas en number */
   -moz-appearance: textfield;
}

.input-control::-webkit-outer-spin-button,
.input-control::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
}

.input-control::placeholder {
   color: var(--text-muted);
   font-weight: 500;
}

.input-hint {
   font-size: 0.8rem;
   color: var(--text-muted);
   padding-left: 0.25rem;
}

/* Estado error */
.input-wrapper.is-invalid {
   border-color: var(--color-danger);
   background: var(--color-danger-soft);
}
.input-wrapper.is-invalid:focus-within {
   box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.12);
}

/* =========================================================
   BOTÓN AGREGAR PRODUCTO
   ========================================================= */
.btn-add-product {
   width: 100%;
   display: flex;
   align-items: center;
   gap: 0.85rem;
   padding: 1rem 1.25rem;
   background: var(--bg-surface);
   border: 2px dashed var(--border-medium);
   border-radius: var(--radius-lg);
   cursor: pointer;
   transition: all 0.25s var(--ease-out);
   margin-bottom: 1.25rem;
   text-align: left;
}

.btn-add-product:hover {
   border-color: var(--brand-primary);
   background: var(--accent-pink);
   transform: translateY(-1px);
}

.btn-add-icon {
   width: 44px;
   height: 44px;
   border-radius: 14px;
   background: var(--brand-gradient);
   color: white;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 1.3rem;
   flex-shrink: 0;
   box-shadow: var(--shadow-glow);
}

.btn-add-text { display: flex; flex-direction: column; line-height: 1.2; }
.btn-add-text strong { font-size: 1rem; color: var(--text-primary); font-weight: 700; }
.btn-add-text small { font-size: 0.82rem; color: var(--text-muted); margin-top: 2px; }

/* =========================================================
   BOTONES principales
   ========================================================= */
.acciones {
   display: flex;
   flex-direction: column;
   gap: 0.7rem;
   margin-top: 1.5rem;
}

@media (min-width: 480px) {
   .acciones {
      flex-direction: row-reverse;
   }
   .acciones .btn { flex: 1; }
}

.btn-primary-app, .btn-ghost-app {
   border: 0;
   border-radius: var(--radius-md);
   font-weight: 700;
   font-size: 1.05rem;
   padding: 1rem 1.5rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 0.6rem;
   cursor: pointer;
   transition: all 0.25s var(--ease-out);
   letter-spacing: -0.01em;
}

.btn-primary-app {
   background: var(--brand-gradient);
   color: white;
   box-shadow: var(--shadow-glow);
}

.btn-primary-app:hover {
   transform: translateY(-2px);
   box-shadow: 0 12px 28px rgba(255, 107, 107, 0.35);
}

.btn-primary-app:active {
   transform: translateY(0);
}

.btn-ghost-app {
   background: var(--bg-surface);
   color: var(--text-secondary);
   border: 1.5px solid var(--border-medium);
}

.btn-ghost-app:hover {
   background: var(--bg-muted);
   color: var(--text-primary);
   border-color: var(--text-muted);
}

/* =========================================================
   ÁREA DE MENSAJES y RESULTADO
   ========================================================= */
.mensajes-area:not(:empty) {
   margin-top: 1rem;
}

.app-alert {
   display: flex;
   align-items: flex-start;
   gap: 0.75rem;
   padding: 1rem 1.1rem;
   border-radius: var(--radius-md);
   margin-bottom: 0.75rem;
   font-weight: 500;
   animation: alertIn 0.35s var(--ease-out);
   text-align: left;
}

@keyframes alertIn {
   from { opacity: 0; transform: translateY(-6px); }
   to { opacity: 1; transform: translateY(0); }
}

.app-alert i {
   font-size: 1.3rem;
   flex-shrink: 0;
   margin-top: 1px;
}

.app-alert-danger {
   background: var(--color-danger-soft);
   color: #991B1B;
}
.app-alert-danger i { color: var(--color-danger); }

.app-alert-info {
   background: var(--color-info-soft);
   color: #1E40AF;
}
.app-alert-info i { color: var(--color-info); }

.app-alert-warning {
   background: var(--color-warning-soft);
   color: #92400E;
}
.app-alert-warning i { color: var(--color-warning); }

/* Resultado destacado del comparador */
.resultado-card {
   margin-top: 1.5rem;
   padding: 1.5rem;
   border-radius: var(--radius-lg);
   background: linear-gradient(135deg, var(--color-success-bg) 0%, #FFFFFF 100%);
   border: 2px solid var(--color-success);
   box-shadow: 0 12px 28px rgba(16, 185, 129, 0.18);
   display: flex;
   align-items: center;
   gap: 1rem;
   animation: resultadoIn 0.5s var(--ease-spring);
   text-align: left;
}

@keyframes resultadoIn {
   from { opacity: 0; transform: scale(0.92) translateY(8px); }
   to { opacity: 1; transform: scale(1) translateY(0); }
}

.resultado-icon {
   width: 56px;
   height: 56px;
   border-radius: 18px;
   background: var(--color-success);
   color: white;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 1.7rem;
   flex-shrink: 0;
   box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3);
}

.resultado-content { flex: 1; }

.resultado-label {
   display: block;
   font-size: 0.75rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.1em;
   color: var(--color-success);
   margin-bottom: 0.2rem;
}

.resultado-titulo {
   font-family: var(--font-display);
   font-size: 1.35rem;
   font-weight: 700;
   color: var(--text-primary);
   margin: 0 0 0.25rem;
   letter-spacing: -0.02em;
}

.resultado-mensaje {
   margin: 0;
   color: var(--text-secondary);
   font-size: 0.95rem;
   line-height: 1.5;
}
.resultado-mensaje strong {
   color: var(--text-primary);
   font-weight: 700;
}

/* Resultado del descuento (presentación grande) */
.resultado-descuento {
   flex-direction: column;
   text-align: center;
   padding: 2rem 1.5rem;
}

.resultado-grande {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0.5rem;
   width: 100%;
}

.resultado-monto {
   font-family: var(--font-display);
   font-size: clamp(2.5rem, 9vw, 3.5rem);
   font-weight: 700;
   color: var(--color-success);
   letter-spacing: -0.03em;
   line-height: 1;
   margin: 0.3rem 0;
}

.resultado-ahorro {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   padding: 0.55rem 1.1rem;
   background: white;
   border-radius: var(--radius-pill);
   font-size: 0.95rem;
   color: var(--text-secondary);
   border: 1.5px solid var(--color-success-soft);
   margin-top: 0.5rem;
}
.resultado-ahorro i { color: var(--color-success); font-size: 1.1rem; }
.resultado-ahorro strong { color: var(--color-success); font-weight: 700; }

/* =========================================================
   BARRA DE NAVEGACIÓN INFERIOR (móvil)
   ========================================================= */
.bottom-nav {
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
   z-index: 60;
   display: flex;
   background: rgba(255, 255, 255, 0.92);
   backdrop-filter: saturate(180%) blur(18px);
   -webkit-backdrop-filter: saturate(180%) blur(18px);
   border-top: 1px solid var(--border-soft);
   padding: 0.5rem 0.75rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
   gap: 0.5rem;
}

.bottom-nav-item {
   flex: 1;
   border: 0;
   background: transparent;
   padding: 0.6rem 0.5rem;
   border-radius: var(--radius-md);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 0.3rem;
   color: var(--text-muted);
   cursor: pointer;
   transition: all 0.25s var(--ease-out);
   font-weight: 600;
   font-size: 0.78rem;
}

.bottom-nav-item i { font-size: 1.4rem; }

.bottom-nav-item.active {
   color: var(--brand-primary-dark);
   background: var(--accent-pink);
}

.bottom-nav-item.active i {
   transform: scale(1.05);
}

/* =========================================================
   FOOTER
   ========================================================= */
.app-footer {
   background: var(--bg-surface);
   border-top: 1px solid var(--border-soft);
   padding: 1.5rem 0 1.5rem;
   margin-top: 2rem;
}

.footer-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: 2rem;
   margin-bottom: 2rem;
}

@media (min-width: 640px) {
   .footer-grid {
      grid-template-columns: 1.6fr 1fr 1fr 1fr;
      gap: 2rem;
   }
}

.footer-brand .footer-logo {
   display: inline-flex;
   align-items: center;
   gap: 0.6rem;
   margin-bottom: 0.85rem;
}
.footer-brand .footer-logo svg { width: 36px; height: 36px; }
.footer-brand .footer-logo span {
   font-family: var(--font-display);
   font-weight: 700;
   font-size: 1.4rem;
   letter-spacing: -0.02em;
}

.footer-desc {
   color: var(--text-secondary);
   font-size: 0.92rem;
   line-height: 1.6;
   max-width: 28em;
   margin: 0;
}

.footer-section h4 {
   font-size: 0.78rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.1em;
   color: var(--text-primary);
   margin: 0 0 0.85rem;
}

.footer-section ul {
   list-style: none;
   padding: 0;
   margin: 0;
   display: flex;
   flex-direction: column;
   gap: 0.55rem;
}

.footer-section a {
   color: var(--text-secondary);
   text-decoration: none;
   font-size: 0.92rem;
   transition: color 0.2s ease;
}

.footer-section a:hover {
   color: var(--brand-primary-dark);
}

.footer-social {
   display: flex;
   gap: 0.5rem;
}

.footer-social a {
   width: 38px;
   height: 38px;
   border-radius: 12px;
   background: var(--bg-muted);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 1.05rem;
   color: var(--text-secondary);
   transition: all 0.2s ease;
}

.footer-social a:hover {
   background: var(--brand-gradient);
   color: white;
   transform: translateY(-2px);
}

.footer-bottom {
   display: flex;
   flex-direction: column;
   gap: 0.4rem;
   align-items: center;
   text-align: center;
   padding-top: 1rem;
   padding-bottom: 1rem;
   border-top: 1px solid var(--border-soft);
   color: var(--text-muted);
}

.footer-bottom small { font-size: 0.85rem; }

@media (min-width: 640px) {
   .footer-bottom {
      flex-direction: row;
      justify-content: space-between;
      text-align: left;
   }
}

/* =========================================================
   UTILIDADES
   ========================================================= */
[hidden] { display: none !important; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
   *, *::before, *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
   }
}

/* Foco accesible */
button:focus-visible,
.input-control:focus-visible,
a:focus-visible {
   outline: 3px solid var(--brand-primary);
   outline-offset: 2px;
}

.input-wrapper:focus-within { outline: 0; }