/* Hispamex AI Styles: Social Red + Luxury White */

:root {
  --brand-red: #E60023;
  /* Social/Pinterest Red */
  --brand-red-hover: #b6001b;
  --bg-white: #ffffff;
  --bg-light: #f5f5f5;
  --text-black: #111111;
  --text-gray: #767676;

  --font-heading: 'Montserrat', sans-serif;
  --font-body: 'Open Sans', sans-serif;

  /* Mexican Flag Green */
  --brand-green: #006847;

  /* Espaciado fluido según ancho real del dispositivo */
  --app-pad-x: clamp(0.5rem, 3.2vw, 1.5rem);
  --app-pad-y: clamp(0.35rem, 2vw, 1rem);
}

html {
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 100%;
  min-height: 100dvh;
  min-height: calc(var(--app-vh, 1vh) * 100);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.text-mex-green {
  color: var(--brand-green) !important;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-light);
  color: var(--text-black);
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  min-height: calc(var(--app-vh, 1vh) * 100);
  display: flex;
  flex-direction: column;
}

/* --- Utilities --- */
.hidden {
  display: none !important;
}

.screen {
  width: 100%;
  min-height: 100%;
  flex: 1 1 auto;
}

/* --- Login Section --- */
#login-section {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: 1 1 auto;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  min-height: calc(var(--app-vh, 1vh) * 100);
}

.login-bg-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('/static/bg-login.png') no-repeat center center/cover;
  z-index: 0;
}

.login-bg-layer::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  /* Slight overlay for readability */
}

.login-container {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.9);
  /* High contrast white card */
  padding: 3rem;
  border-radius: 20px;
  /* Modern rounded corners */
  width: 90%;
  max-width: 420px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  text-align: center;
}

.brand-logo h1 {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--brand-red);
  /* Red Branding */
  letter-spacing: -1px;
  margin-bottom: 0.2rem;
  text-transform: uppercase;
}

.brand-logo p {
  color: var(--text-gray);
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 2.5rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

form {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

label {
  text-align: left;
  font-size: 0.8rem;
  color: var(--text-black);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: -0.5rem;
}

input {
  padding: 14px;
  border-radius: 30px;
  /* Pill shape inputs */
  border: 2px solid #e0e0e0;
  background: #fff;
  color: var(--text-black);
  font-family: inherit;
  font-size: 16px;
  /* Evita zoom automático de iOS al enfocar */
  font-weight: 600;
  outline: none;
  transition: all 0.3s;
}

input:focus {
  border-color: var(--brand-red);
  background-color: #fff8f8;
}

/* Password Toggle Styles */
.password-wrapper {
  position: relative;
  width: 100%;
  /* Ensure wrapper takes full width available in form */
  display: flex;
  align-items: center;
}

.password-wrapper input {
  width: 100%;
  padding-right: 40px;
  /* Make room for the button */
  flex: 1;
  /* Ensure input grows */
  margin: 0;
  /* Reset margins */
}

.btn-icon-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-gray);
  transition: color 0.2s;
  z-index: 10;
  /* Ensure button is on top */
  width: 24px;
  height: 24px;
}

.btn-icon-toggle:hover {
  color: var(--brand-red);
  background: transparent !important;
}

.btn-icon-toggle:focus {
  outline: none !important;
  box-shadow: none !important;
}

.hidden {
  display: none !important;
}

/* Enlace legal bajo el formulario de login */
.login-legal {
  margin-top: 1.25rem;
  font-size: 0.8rem;
  color: var(--text-gray);
}

.login-legal a {
  color: var(--text-gray);
  text-decoration: underline;
  font-weight: 600;
}

.login-legal a:hover {
  color: var(--brand-green);
}

.btn-primary {
  background-color: var(--brand-red);
  color: #fff;
  border: none;
  padding: 14px;
  font-weight: 700;
  font-size: 1rem;
  border-radius: 30px;
  /* Pill shape button */
  cursor: pointer;
  margin-top: 1rem;
  transition: transform 0.2s, background 0.2s;
  box-shadow: 0 4px 15px rgba(230, 0, 35, 0.3);
}

.btn-primary:hover {
  background-color: var(--brand-red-hover);
  transform: translateY(-2px);
}

.btn-primary.green {
  background-color: var(--brand-green);
  box-shadow: 0 4px 15px rgba(0, 104, 71, 0.3);
}

.btn-primary.green:hover {
  background-color: #004d35;
  /* Darker green for hover */
}

#login-error {
  color: var(--brand-red);
  font-weight: 700;
  font-size: 0.9rem;
  margin-top: 1rem;
}

.remember-me-container {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: var(--text-gray);
  font-weight: 600;
}

.remember-me-container input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--brand-red);
  /* Branding color for checkbox */
  cursor: pointer;
}

.remember-me-container label {
  text-transform: none;
  /* Override uppercase label style */
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 0;
}

/* --- App Section (Chat) --- */
#app-section {
  display: flex;
  flex-direction: row;
  width: 100%;
  max-width: 100%;
  flex: 1 1 auto;
  min-height: 100dvh;
  min-height: calc(var(--app-vh, 1vh) * 100);
  height: 100dvh;
  height: calc(var(--app-vh, 1vh) * 100);
  overflow: hidden;
  overflow-x: hidden;
  background-color: var(--bg-light);
}

.top-bar {
  background-color: rgba(255, 255, 255, 0.9);
  /* Glass effect header */
  backdrop-filter: blur(10px);
  color: var(--text-black);
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 100;
}

.top-bar-left {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 1;
}

.top-bar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex-wrap: wrap;
}

.top-bar-btn {
  font-size: 0.9rem;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
}

.top-bar-btn--save {
  color: var(--brand-green);
  font-weight: 800;
}

.top-bar-btn--download {
  color: var(--text-black);
  font-weight: 700;
}

/* Botón hamburguesa: solo visible en móvil */
.mobile-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  background: #fff;
  color: var(--text-black);
  cursor: pointer;
  flex-shrink: 0;
}

.mobile-menu-btn:hover {
  background: #f5f5f5;
}

.mobile-menu-icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 20px;
  height: 16px;
}

.mobile-menu-line {
  display: block;
  height: 2px;
  width: 100%;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.mobile-menu-btn.is-open .mobile-menu-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.mobile-menu-btn.is-open .mobile-menu-line:nth-child(2) {
  opacity: 0;
}

.mobile-menu-btn.is-open .mobile-menu-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Panel lateral de navegación móvil (estilo drawer, fuera del stacking del chat) */
.mobile-nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 9000;
}

.mobile-nav-backdrop:not(.hidden) {
  display: block;
}

.mobile-nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(320px, 88vw);
  height: 100dvh;
  height: calc(var(--app-vh, 1vh) * 100);
  background: #fff;
  z-index: 9100;
  transform: translateX(105%);
  transition: transform 0.28s ease;
  box-shadow: -6px 0 28px rgba(0, 0, 0, 0.14);
  display: flex;
  flex-direction: column;
}

.mobile-nav-drawer.is-open {
  transform: translateX(0);
}

.mobile-nav-drawer-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.mobile-nav-drawer-header {
  padding: 18px 20px 12px;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #888;
  border-bottom: 1px solid #eee;
}

.mobile-nav-list {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  flex: 1;
  overflow-y: auto;
}

.mobile-nav-list li {
  border-bottom: 1px dotted #e6e6e6;
}

.mobile-nav-list li:last-child {
  border-bottom: none;
}

.mobile-nav-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 20px;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-black);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}

.mobile-nav-item:active,
.mobile-nav-item:hover {
  background: #f4f8f6;
}

.mobile-nav-item--accent .mobile-nav-label {
  color: var(--brand-green);
}

.mobile-nav-item--danger .mobile-nav-label {
  color: var(--brand-red);
}

.mobile-nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: #666;
  flex-shrink: 0;
}

.mobile-nav-label {
  flex: 1;
}

.mobile-nav-close-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 16px;
  border: none;
  border-top: 1px solid #ddd;
  background: #2d2d2d;
  color: #fff;
  cursor: pointer;
}

.mobile-nav-close-bar:active {
  background: #1a1a1a;
}

body.mobile-nav-open,
body.mobile-sidebar-open {
  overflow: hidden;
}

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 9200;
}

.sidebar-backdrop:not(.hidden) {
  display: block;
}

.logo-small {
  color: var(--brand-red);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.5px;
  cursor: pointer;
  line-height: 1.2;
  white-space: nowrap;
}

.btn-text {
  background: none;
  border: none;
  color: var(--text-gray);
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  transition: color 0.2s;
}

.btn-text:hover {
  color: var(--brand-red);
}

.chat-container {
  flex: 1;
  /* Takes up remaining height after top-bar */
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  /* Remove margin */
  position: relative;
  overflow: hidden;
  background: transparent;
  /* Remove glass background */
  backdrop-filter: none;
  border-radius: 0;
  border: none;
  box-shadow: none;
}

#chat-history {
  flex: 1;
  overflow-y: auto;
  padding: clamp(0.75rem, 3vw, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  /* Espacio bajo el último mensaje (tarjetas largas de sistema) */
  padding-bottom: 3.25rem;
  width: 100%;
  max-width: min(900px, 100%);
  /* Centered column width */
  margin: 0 auto;
  /* Center the column */
  min-height: 0;
  /* Critical for nested flex scrolling */
}

/* Fix CSS background issue with side-by-side flex layout */
.main-chat-area {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  overflow-x: hidden;
  background: url('/static/bg-login.png') no-repeat center center/cover;
  position: relative;
}

.main-chat-area::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(245, 245, 245, 0.65);
  /* Whitewash overlay over background for readability. Lower alpha = more transparent */
  z-index: 0;
}

.main-chat-area>* {
  position: relative;
  z-index: 1;
}

.message {
  display: flex;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.message.user {
  justify-content: flex-start;
  /* Align Left */
}

.message.system {
  justify-content: flex-start;
}

.bubble {
  max-width: 90%;
  /* Wider now that it's single column */
  min-width: 0;
  padding: 15px 20px;
  border-radius: 18px;
  font-size: 1rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
  word-break: break-word;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  /* Stronger shadow */
  backdrop-filter: blur(5px);
}

.user .bubble {
  background: linear-gradient(135deg, var(--brand-red), #c9001b);
  /* Gradient Red */
  color: #fff;
  border-bottom-left-radius: 4px;
  /* Speech bubble tail on left */
}

.system .bubble {
  background-color: #ffffff;
  /* More solid background to prevent transparency overlap issues */
  backdrop-filter: blur(20px);
  color: var(--text-black);
  border-bottom-left-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.2);
}

/* Rich Text Styling inside bubbles */
.system .bubble ul,
.system .bubble ol {
  margin-left: 20px;
  margin-top: 5px;
  margin-bottom: 10px;
}

.system .bubble li {
  margin-bottom: 6px;
  line-height: 1.5;
}

.system .bubble strong {
  color: var(--brand-green);
  /* Highlight headers in Green */
  font-weight: 800;
  /* Make headers break line if needed, or keep inline */
}

/* Add spacing before headers if they look like sections */
.system .bubble p+strong,
.system .bubble ul+strong {
  display: block;
  margin-top: 15px;
  margin-bottom: 5px;
  text-transform: uppercase;
  font-size: 0.9rem;
}

/* --- Product Header (New) --- */
.product-header {
  background: white;
  border-left: 5px solid var(--brand-green);
  padding: 15px 20px;
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.product-title {
  color: var(--brand-green);
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 800;
  margin-bottom: 5px;
  line-height: 1.2;
}

.product-subtitle {
  color: var(--brand-green);
  font-size: 0.95rem;
  margin-bottom: 10px;
}

.product-desc {
  color: var(--text-black);
  font-size: 0.95rem;
  line-height: 1.5;
}

.chat-input-area {
  position: sticky;
  bottom: 0;
  margin: 0 auto;
  width: 100%;
  max-width: min(900px, 100%);
  background: transparent;
  padding: var(--app-pad-y) var(--app-pad-x) calc(1.1rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  z-index: 20;
  flex-shrink: 0;
  box-sizing: border-box;
}

/* En conversación (chips visibles): alinear con burbujas al 90% izquierda */
.chat-input-area:has(#chat-action-chips:not(.hidden)) {
  align-items: flex-start;
}

.chat-input-shell {
  flex: 1 1 auto;
  position: relative;
  min-width: 0;
  width: 100%;
  display: block;
}

.action-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 42px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.09);
  background: rgba(255, 255, 255, 0.92);
  font: inherit;
  color: var(--text-black);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.action-chip:hover {
  border-color: var(--brand-green);
  color: var(--text-black);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.action-chip:hover .action-chip-icon {
  background: rgba(0, 104, 71, 0.18);
}

.action-chip:focus-visible {
  outline: 2px solid var(--brand-green);
  outline-offset: 2px;
}

.action-chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 104, 71, 0.12);
  flex-shrink: 0;
  transition: background 0.2s ease;
}

.action-chip-svg {
  width: 16px;
  height: 16px;
  stroke: var(--brand-green);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.action-chip-label {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-black);
  line-height: 1.2;
  white-space: nowrap;
}

#chat-form {
  display: flex;
  flex-direction: column !important;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  margin: 0;
  position: relative;
  gap: 8px;
  box-sizing: border-box;
}

/* Solo con conversación activa: mismo ancho que .bubble (90% izquierda) */
#chat-form:has(#chat-action-chips:not(.hidden)) {
  width: 90%;
  max-width: 90%;
}

/* Cuatro acciones en fila, dentro del mismo ancho que el textarea */
.chat-action-chips {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  padding: 0;
}

.chat-action-chips.hidden {
  display: none;
}

.chat-input-compose {
  position: relative;
  width: 100%;
}

.chat-input-actions {
  position: absolute;
  right: 8px;
  bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 2;
}

.input-wrapper {
  display: none;
}

.context-summary {
  font-size: 0.8rem;
  color: var(--brand-red);
  font-weight: 600;
  margin-bottom: 8px;
  padding-left: 10px;
  min-height: 1.2em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.chat-input-area:has(#chat-action-chips:not(.hidden)) .context-summary {
  width: 90%;
  max-width: 90%;
}

.context-summary.notice-visible {
  color: #b45309;
  background: #fff8eb;
  border-left: 3px solid #f59e0b;
  padding: 8px 10px;
  border-radius: 6px;
  white-space: normal;
}

#question-input {
  width: 100%;
  box-sizing: border-box;
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: var(--text-black);
  padding: 18px 108px 18px 24px;
  border-radius: 30px;
  font-size: 1rem;
  font-family: inherit;
  resize: none;
  overflow-y: hidden;
  text-align: left;
  min-height: 56px;
  max-height: 160px;
  line-height: 1.4;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  display: block;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

#question-input:focus {
  background-color: #fff;
  border-color: rgba(0, 0, 0, 0.18);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

#send-btn {
  background-color: var(--brand-red);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s, background 0.2s;
  position: static;
  flex-shrink: 0;
  box-shadow: none;
  padding: 0;
}

#send-btn:hover {
  background-color: var(--brand-red-hover);
  transform: scale(1.05);
}

.voice-btn {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #ffffff;
  color: var(--text-black);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s, background 0.2s, border-color 0.2s;
  box-shadow: none;
  padding: 0;
  position: relative;
}

/* X en la esquina: indica que se puede tocar para silenciar o cancelar */
.voice-stop-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--brand-red);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  display: none;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
  pointer-events: none;
  z-index: 1;
}

.voice-btn.is-speaking .voice-stop-badge {
  display: flex;
}

.voice-btn:hover:not(:disabled) {
  border-color: var(--brand-red);
  color: var(--brand-red);
}

.voice-btn.is-listening {
  background: var(--brand-red);
  color: #fff;
  border-color: var(--brand-red);
  animation: voice-pulse 1s ease-in-out infinite;
}

.voice-btn.is-speaking {
  background: #fff;
  color: var(--brand-red);
  border-color: var(--brand-red);
  animation: voice-pulse 1.2s ease-in-out infinite;
}

.voice-btn .icon-speaker {
  display: none;
}

.voice-btn.is-speaking .icon-mic {
  display: none;
}

.voice-btn.is-speaking .icon-speaker {
  display: block;
}

.voice-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.icon-speaker {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-mic {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes voice-pulse {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.06);
  }
}

.icon-send {
  width: 18px;
  height: 18px;
  fill: #fff;
  margin-left: 2px;
  /* Visual adjustment */
}

/* Typing Indicator (Bubbling Dots) */
.typing-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 2px;
  min-height: 24px;
}

/* Frase bajo los puntos mientras espera /ask */
.typing-status-text {
  font-size: 0.8125rem;
  color: var(--text-gray);
  text-align: center;
  margin-top: 6px;
  min-height: 1.25em;
  line-height: 1.35;
  opacity: 0.88;
}

.typing-indicator .dot {
  width: 8px;
  height: 8px;
  background-color: var(--text-gray);
  border-radius: 50%;
  opacity: 0.6;
  animation: typing 1.4s infinite ease-in-out both;
}

.typing-indicator .dot:nth-child(1) {
  animation-delay: -0.32s;
}

.typing-indicator .dot:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes typing {

  0%,
  80%,
  100% {
    transform: scale(0);
  }

  40% {
    transform: scale(1);
  }
}

/* --- Welcome Screen --- */
.welcome-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  text-align: center;
  padding: 2.5rem 1.25rem 1.5rem;
  color: var(--text-black);
  overflow-y: auto;
}

.welcome-screen h1 {
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 4.8vw, 2rem);
  font-weight: 800;
  margin-bottom: 0.75rem;
  color: var(--text-black);
}

.welcome-screen-subtitle {
  margin: 0 0 1.25rem;
  font-size: 0.95rem;
  color: var(--text-gray);
  max-width: 520px;
  line-height: 1.45;
}

.welcome-screen-hint {
  margin: 1.25rem 0 0;
  font-size: 0.82rem;
  color: var(--text-gray);
  max-width: 520px;
  line-height: 1.4;
}

.welcome-screen h1 span {
  color: var(--brand-red);
}

.prompt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 15px;
  justify-content: center;
  width: 100%;
  max-width: min(520px, 100%);
}

.prompt-card {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  padding: 20px;
  border-radius: 16px;
  width: 100%;
  min-height: 88px;
  text-align: left;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  font: inherit;
  color: inherit;
  appearance: none;
  -webkit-appearance: none;
}

.prompt-card:focus-visible {
  outline: 2px solid var(--brand-green);
  outline-offset: 2px;
}

.prompt-card:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  border-color: var(--brand-red);
}

.prompt-icon {
  font-size: 1.5rem;
  margin-bottom: 10px;
  display: block;
}

.prompt-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-black);
  margin-bottom: 5px;
  display: block;
}

.prompt-desc {
  font-size: 0.8rem;
  color: var(--text-gray);
  line-height: 1.4;
}

/* --- Copy Button --- */
.message {
  position: relative;
}

.copy-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 6px;
  padding: 4px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s, background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.message:hover .copy-btn {
  opacity: 1;
}

.copy-btn:hover {
  background: #fff;
}

.copy-btn svg {
  width: 14px;
  height: 14px;
  color: var(--text-gray);
}

/* --- Password Modal --- */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(5px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.modal.hidden {
  opacity: 0;
  pointer-events: none;
  display: flex !important;
  /* Keep flex to allow transition, just hide opacity/pointer */
}

.modal-content {
  background: rgba(255, 255, 255, 0.95);
  padding: 2.5rem;
  border-radius: 20px;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  position: relative;
  transform: translateY(0);
  transition: transform 0.3s ease;
  text-align: center;
}

.modal.hidden .modal-content {
  transform: translateY(20px);
}

.modal-content h2 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--brand-red);
  margin-bottom: 1.5rem;
  text-transform: uppercase;
}

.close {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-gray);
  cursor: pointer;
  transition: color 0.2s;
}

.close:hover {
  color: var(--brand-red);
}

.form-group {
  margin-bottom: 1rem;
  text-align: left;
}

/* ==========================================
   STRUCTURED RESPONSE SECTIONS STYLES
   ========================================== */

/* Línea previa al JSON parseado (no se concatena al string JSON). */
.msg-understood-line {
  font-size: 0.9rem;
  color: rgba(0, 0, 0, 0.65);
  margin-bottom: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(0, 100, 60, 0.06);
  border-left: 3px solid var(--brand-green);
}

.structured-response {
  max-width: 100% !important;
  width: 100%;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.message.system .bubble.structured-response {
  width: 90%;
}

.response-section {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-left: 4px solid var(--brand-green);
  border-radius: 8px;
  padding: 20px 24px;
  margin-bottom: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

.response-section:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.response-section h3 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 800;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(0, 104, 71, 0.1);
  color: var(--brand-green);
}

.section-content {
  line-height: 1.6;
}

.section-content p {
  margin-bottom: 12px;
  color: var(--text-black);
}

.section-content strong {
  color: var(--brand-green);
  font-weight: 700;
}

/* Respuesta directa / consultas rápidas / orden de aplicación */
.direct-response-body {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--text-black);
}

.direct-response-body p {
  margin: 0 0 1rem;
}

.direct-response-body p:last-child {
  margin-bottom: 0;
}

.direct-response-body .direct-lead {
  margin-bottom: 0.65rem;
  font-weight: 600;
  color: var(--text-gray);
}

.direct-bullet-list,
.direct-ordered-list {
  margin: 0 0 1.15rem;
  padding-left: 1.35rem;
}

.direct-bullet-list li,
.direct-ordered-list li {
  margin-bottom: 0.55rem;
  padding-left: 0.2rem;
}

.direct-bullet-list li:last-child,
.direct-ordered-list li:last-child {
  margin-bottom: 0;
}

.direct-markdown-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 1.15rem;
  border: 1px solid rgba(0, 104, 71, 0.16);
  border-radius: 8px;
}

.direct-markdown-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 0.9rem;
  line-height: 1.45;
}

.direct-markdown-table th {
  padding: 10px 12px;
  background: var(--brand-green);
  color: #fff;
  text-align: left;
  vertical-align: top;
  font-weight: 700;
}

.direct-markdown-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  text-align: left;
  vertical-align: top;
}

.direct-markdown-table tbody tr:nth-child(even) {
  background-color: rgba(0, 104, 71, 0.04);
}

.direct-markdown-table tbody tr:last-child td {
  border-bottom: 0;
}

.direct-markdown-table td strong {
  color: var(--brand-green);
}

.direct-bullet-list strong,
.direct-ordered-list strong,
.direct-response-body .application-flow strong {
  color: var(--brand-green);
  font-weight: 700;
}

.application-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin: 0 0 1.15rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  font-size: 0.98rem;
  line-height: 1.45;
}

.application-flow .flow-step {
  font-weight: 600;
}

.application-flow .flow-arrow {
  color: var(--text-gray);
  font-weight: 700;
  user-select: none;
}

/* Technical Section */
.technical-section h3 {
  color: var(--brand-green);
}

.capas ul {
  list-style: none;
  padding-left: 0;
  margin: 10px 0;
}

.capas li {
  padding: 8px 12px;
  margin-bottom: 8px;
  background: rgba(0, 104, 71, 0.05);
  border-left: 3px solid var(--brand-green);
  border-radius: 4px;
}

.capa-nombre {
  font-weight: 700;
  color: var(--brand-green);
}

.consumo {
  color: var(--text-gray);
  font-size: 0.9em;
  font-style: italic;
}

/* Commercial Section */
.commercial-section h3 {
  color: var(--brand-green);
}

.commercial-section .highlight {
  background: rgba(0, 104, 71, 0.08);
  padding: 12px;
  border-radius: 8px;
  border-left: 3px solid var(--brand-green);
}

.benefits-list {
  list-style: none;
  padding-left: 0;
  margin: 10px 0;
}

.benefits-list li {
  padding: 6px 0;
  color: var(--brand-green);
  font-weight: 600;
}

.warning {
  background: rgba(255, 165, 0, 0.1);
  padding: 10px;
  border-radius: 6px;
  border-left: 3px solid orange;
  font-size: 0.95em;
  color: #FF9800;
}

.warning strong {
  color: #FF9800 !important;
}

.preguntas ul {
  list-style: none;
  padding-left: 0;
  margin: 10px 0;
}

.preguntas li {
  padding: 6px 0 6px 20px;
  position: relative;
}

.preguntas li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--brand-green);
  font-weight: 800;
}

/* Budget Section */
.budget-section h3 {
  color: var(--brand-green);
}

.budget-table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  overflow: hidden;
}

.budget-table thead {
  background: rgba(0, 104, 71, 0.1);
}

.budget-table th {
  padding: 12px;
  text-align: left;
  font-weight: 700;
  color: var(--brand-green);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.budget-table td {
  padding: 10px 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  color: var(--text-black);
}

.budget-table tbody tr:hover {
  background: rgba(0, 104, 71, 0.05);
}

.note {
  font-size: 0.88em;
  color: var(--text-gray);
  font-style: italic;
  margin-top: 10px;
  padding: 8px;
  background: #fdfdfd;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 6px;
}

/* Missing Data Section */
.missing-data-section h3 {
  color: #FF9800;
}

.missing-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.missing-chip {
  background: rgba(255, 152, 0, 0.15);
  color: #FF9800;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid rgba(255, 152, 0, 0.3);
}

/* --- Comparison Table V2 (multi-criterio) --- */
.comparison-section {
  border-left-color: var(--brand-green);
}

.comparison-section .section-content {
  overflow: hidden;
}

.comparison-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 12px;
  border-radius: 8px;
}

.comparison-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  margin-bottom: 0;
  font-size: 0.95rem;
}

.comparison-table th {
  background-color: var(--brand-green);
  color: #fff;
  padding: 10px 14px;
  text-align: left;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
}

.comparison-table th:first-child {
  border-radius: 8px 0 0 0;
}

.comparison-table th:last-child {
  border-radius: 0 8px 0 0;
}

.comparison-table td {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  vertical-align: top;
}

.comparison-table tbody tr:nth-child(even) {
  background-color: rgba(0, 104, 71, 0.04);
}

.comparison-table tbody tr:hover {
  background-color: rgba(0, 104, 71, 0.08);
}

.comparison-conclusion {
  padding: 12px 14px;
  background-color: rgba(0, 104, 71, 0.06);
  border-radius: 8px;
  font-size: 0.95rem;
  line-height: 1.5;
}

.comparison-conclusion strong {
  display: block;
  margin-bottom: 8px;
  color: var(--brand-green);
  font-family: var(--font-heading);
}

.comparison-conclusion-list {
  margin: 0;
  padding-left: 1.2rem;
  list-style: disc;
}

.comparison-conclusion-list li {
  margin-bottom: 6px;
}

.comparison-conclusion-list li:last-child {
  margin-bottom: 0;
}

.comparison-conclusion-line {
  margin: 0 0 8px;
}

.comparison-conclusion-line:last-child {
  margin-bottom: 0;
}

/* Tarjetas apiladas para comparativa en móvil */
.comparison-cards--mobile {
  display: none;
}

.comparison-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
}

.comparison-card-title {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--brand-green);
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 104, 71, 0.12);
}

.comparison-card-product {
  margin-bottom: 10px;
}

.comparison-card-product:last-child {
  margin-bottom: 0;
}

.comparison-card-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--brand-green);
  margin-bottom: 4px;
}

.comparison-card-product p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
}

.comparison-note {
  margin-top: 10px;
  padding: 8px 14px;
  background-color: rgba(255, 165, 0, 0.1);
  border-left: 3px solid #f0a500;
  border-radius: 0 6px 6px 0;
  font-size: 0.85rem;
  color: #8a6d00;
}

.derived-tag {
  display: inline-block;
  background-color: rgba(0, 104, 71, 0.1);
  color: var(--brand-green);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 4px;
  vertical-align: middle;
}

/* --- V4.1: Double Block System Recommendation Styles --- */

/* Tech block: collapsible <details> */
.tech-block-details {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-left: 4px solid var(--brand-green);
  border-radius: 8px;
  margin-bottom: 15px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.tech-block-details summary {
  background-color: transparent;
  color: var(--brand-green);
  border-bottom: 2px solid rgba(0, 104, 71, 0.1);
  padding: 15px 18px;
  font-weight: 800;
  font-size: 1.1rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.tech-block-details summary::-webkit-details-marker {
  display: none;
}

.tech-block-details summary::after {
  content: '▶';
  float: right;
  transition: transform 0.2s ease;
}

.tech-block-details[open] summary::after {
  transform: rotate(90deg);
}

.tech-block-details .section-content {
  padding: 15px 18px;
}

.capas-list {
  padding-left: 20px;
  margin-top: 8px;
}

.capas-list li {
  margin-bottom: 10px;
  line-height: 1.5;
}

.capa-tipo {
  display: inline-block;
  background-color: rgba(0, 104, 71, 0.1);
  color: var(--brand-green);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 2px 8px;
  border-radius: 4px;
}

.capa-funcion {
  color: var(--text-gray);
  font-size: 0.9rem;
}

/*
  Datos técnicos resumidos por capa (vida de mezcla, proporción A+B,
  espesor por capa). Cada dato se muestra dentro de una caja con
  fondo naranja claro (sin borde/línea exterior), usando el naranja
  de marca (#FF9800) para el texto. La separación entre cajas se
  consigue solo con `margin-right`, sin punto separador.
*/
.capa-datos-tecnicos {
  margin-top: 6px;
  line-height: 2;
}

.capa-dato-chip {
  display: inline-block;
  background-color: rgba(255, 152, 0, 0.10);
  color: #FF9800;
  border: none;
  font-size: 0.82rem;
  padding: 2px 8px;
  border-radius: 6px;
  margin-right: 8px;
  white-space: nowrap;
}

.capa-dato-chip strong {
  font-weight: 600;
  color: #FF9800;
}

/*
  Bloques nuevos de la "cabecera rica" de un sistema (activos solo cuando
  el backend incluye `datos_tecnicos_principales` y/o `prestaciones_sistema`,
  de momento únicamente para Sistema Decosol como prueba). Se mantiene el
  mismo aspecto general que los bloques actuales (Justificación, Condiciones
  Soporte, etc.) para que el conjunto resulte coherente visualmente.
*/
.datos-tecnicos-principales,
.prestaciones-sistema {
  margin-top: 12px;
}

.datos-tecnicos-principales ul,
.prestaciones-sistema ul {
  margin-top: 4px;
  padding-left: 20px;
}

.datos-tecnicos-principales li,
.prestaciones-sistema li {
  margin-bottom: 2px;
  line-height: 1.5;
}

/*
  Render compacto de capa en modo rico ("Capa N – Rol" / descripción).
  Estilo discreto y consistente con el resto de bullets del bloque
  técnico: título en negrita con leve separación, descripción en una
  sola línea por debajo en gris oscuro para que sea legible pero no
  compita con los datos técnicos (chips) que pueda haber al final.
*/
.capa-rich {
  margin-bottom: 8px;
}

.capa-rich-titulo {
  color: #333;
}

.capa-rich-descripcion {
  color: #555;
  font-size: 0.95em;
  margin-top: 2px;
}

/*
  Nota debajo de la capa (caso de sellado en Decosol con alias F-300).
  Va en un tono ligeramente más apagado y con el prefijo "Nota:" en
  negrita oscura para que se distinga de la descripción principal sin
  romper la jerarquía visual.
*/
.capa-rich-nota {
  color: #666;
  font-size: 0.9em;
  margin-top: 2px;
  font-style: italic;
}

.capa-rich-nota strong {
  color: #333;
  font-style: normal;
  font-weight: 600;
}

/* Prescripción de obra Sistema Pantera (alternativas, condicionales, variantes) */
.prescripcion-obra {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(0, 104, 71, 0.25);
  border-radius: 8px;
  background: rgba(0, 104, 71, 0.04);
}

.prescripcion-intro {
  margin: 8px 0 12px;
  color: var(--text-gray);
  font-size: 0.92rem;
  line-height: 1.5;
}

.prescripcion-variante {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(0, 0, 0, 0.12);
}

.prescripcion-variante:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 8px;
}

.prescripcion-variante-destacada {
  background: rgba(0, 104, 71, 0.08);
  border-radius: 6px;
  padding: 10px 12px;
  border-left: 3px solid var(--brand-green);
}

.prescripcion-variante-titulo {
  margin: 0 0 8px;
  font-size: 0.95rem;
  color: var(--brand-green);
}

.prescripcion-pasos-list {
  padding-left: 22px;
  margin: 0;
}

.prescripcion-paso {
  margin-bottom: 12px;
  line-height: 1.5;
}

.prescripcion-paso-activo {
  background: rgba(217, 119, 6, 0.08);
  border-radius: 4px;
  padding: 6px 8px;
  margin-left: -8px;
}

.prescripcion-opciones-alt {
  margin: 8px 0 0;
  padding-left: 18px;
}

.prescripcion-opciones-alt li {
  margin-bottom: 6px;
}

.prescripcion-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 7px;
  border-radius: 4px;
  margin-right: 6px;
  vertical-align: middle;
}

.prescripcion-badge-alt {
  background: rgba(37, 99, 235, 0.15);
  color: #1d4ed8;
}

.prescripcion-badge-cond {
  background: rgba(217, 119, 6, 0.18);
  color: #b45309;
}

.prescripcion-badge-obl {
  background: rgba(0, 104, 71, 0.15);
  color: var(--brand-green);
}

.prescripcion-badge-na {
  background: rgba(107, 114, 128, 0.15);
  color: #4b5563;
}

.prescripcion-omitir {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.85rem;
  color: #b45309;
}

.justificacion,
.condiciones-soporte,
.opciones-sistema {
  margin-top: 12px;
}

.justificacion ul,
.condiciones-soporte ul,
.opciones-sistema ul {
  padding-left: 20px;
  margin-top: 6px;
}

.justificacion li,
.condiciones-soporte li,
.opciones-sistema li {
  margin-bottom: 4px;
}

/* V4.2: Limitaciones técnicas */
.limitaciones-tecnicas {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-left: 4px solid var(--brand-green);
  border-radius: 8px;
  margin-top: 20px;
  padding: 15px 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.limitaciones-tecnicas strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 800;
  color: #e65100;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid rgba(230, 81, 0, 0.1);
}

.limitaciones-tecnicas ul {
  padding-left: 0;
  margin-top: 0;
  list-style: none;
}

.limitaciones-tecnicas li {
  padding: 8px 12px;
  margin-bottom: 8px;
  background-color: rgba(230, 81, 0, 0.06);
  border-left: 3px solid #e65100;
  border-radius: 0 6px 6px 0;
  font-size: 0.95rem;
  color: var(--text-black);
}

/* V4.2: Nivel de exigencia */
.nivel-exigencia {
  margin-top: 10px;
  padding: 8px 14px;
  background-color: rgba(0, 104, 71, 0.08);
  border-radius: 6px;
  font-size: 0.95rem;
}

/* Commercial block */
.commercial-block-section {
  border-left-color: var(--brand-green);
}

.problema-resuelve,
.donde-ideal {
  margin-top: 10px;
}

/* Checklist section */
.checklist-section {
  border-left-color: var(--brand-green);
}

.checklist-intro {
  color: var(--text-gray);
  margin-bottom: 8px;
}

.checklist-list {
  list-style: none;
  padding-left: 0;
}

.checklist-list li {
  padding: 8px 12px;
  margin-bottom: 4px;
  background-color: rgba(0, 104, 71, 0.04);
  border-radius: 6px;
  font-size: 0.95rem;
}

/* Warnings section */
.warnings-section {
  border-left-color: var(--brand-green);
}

.warnings-section h3 {
  color: #e65100;
  border-bottom: 2px solid rgba(230, 81, 0, 0.1);
}

.warnings-list {
  list-style: none;
  padding-left: 0;
}

.warnings-list li {
  padding: 8px 12px;
  margin-bottom: 4px;
  background-color: rgba(230, 81, 0, 0.06);
  border-left: 3px solid #e65100;
  border-radius: 0 6px 6px 0;
  font-size: 0.95rem;
}

/* Responsive: móvil y tablets estrechas (incluye móvil en horizontal) */
@media (max-width: 920px), ((hover: none) and (pointer: coarse) and (max-width: 1100px)) {
  /* iOS: cualquier control <16px dispara zoom al enfocar y a veces se queda pegado */
  input,
  textarea,
  select {
    font-size: 16px;
  }

  #chat-history {
    padding: var(--app-pad-x);
    /* Hueco extra para que el input sticky no tape el último mensaje */
    padding-bottom: 5.5rem;
  }

  .chat-input-area {
    position: sticky;
    bottom: 0;
    padding: var(--app-pad-y) var(--app-pad-x) calc(0.85rem + env(safe-area-inset-bottom, 0px));
  }

  .login-container {
    padding: clamp(1.5rem, 5vw, 2.5rem) clamp(1rem, 4vw, 1.75rem);
    width: min(94%, 420px);
  }

  /* En móvil el formulario usa todo el ancho (más sitio para el texto) */
  #chat-form:has(#chat-action-chips:not(.hidden)) {
    width: 100%;
    max-width: 100%;
  }

  .chat-input-area:has(#chat-action-chips:not(.hidden)) {
    align-items: stretch;
  }

  .chat-input-area:has(#chat-action-chips:not(.hidden)) .context-summary {
    width: 100%;
    max-width: 100%;
  }

  /* Recuadro pill: texto en fila completa + botones abajo a la derecha */
  .chat-input-compose {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: flex-start;
    gap: 4px 8px;
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 22px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    padding: 10px 12px 8px;
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
  }

  #question-input {
    order: 1;
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0 2px 2px;
    min-height: 36px;
    max-height: 120px;
    flex: 1 1 100%;
    width: 100%;
    min-width: 100%;
    /* iOS (Safari/Chrome): <16px provoca zoom automático al enfocar */
    font-size: 16px;
    line-height: 1.4;
    overflow-x: hidden;
    overflow-wrap: anywhere;
    -webkit-appearance: none;
    appearance: none;
  }

  #question-input::placeholder {
    color: rgba(0, 0, 0, 0.45);
    opacity: 1;
  }

  #question-input:focus {
    box-shadow: none;
    border: none;
    background: transparent;
  }

  .chat-input-actions {
    order: 2;
    position: static;
    flex-shrink: 0;
    align-self: flex-end;
    margin-left: auto;
    gap: 6px;
    padding: 0;
  }

  #send-btn,
  .voice-btn {
    width: 38px;
    height: 38px;
  }

  .chat-action-chips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    justify-content: stretch;
    max-width: 100%;
  }

  .action-chip {
    width: 100%;
    min-height: 44px;
    padding: 8px 10px;
    min-width: 0;
  }

  .welcome-screen {
    padding: clamp(0.65rem, 3vw, 1.1rem) var(--app-pad-x) 0.5rem;
  }

  .welcome-screen h1 {
    font-size: clamp(1.2rem, 5vw, 1.55rem);
    margin-bottom: 0.4rem;
  }

  .welcome-screen-subtitle {
    font-size: clamp(0.85rem, 3.6vw, 0.95rem);
    margin-bottom: 0.85rem;
  }

  .welcome-screen-hint {
    margin-top: 0.85rem;
  }

  .prompt-grid {
    grid-template-columns: 1fr;
    max-width: 100%;
    gap: 8px;
  }

  .prompt-card {
    width: 100%;
    max-width: 100%;
    min-height: 72px;
    padding: 12px 14px;
  }

  .prompt-icon {
    margin-bottom: 6px;
  }

  .response-section {
    padding: 15px 18px;
    max-width: 100%;
    min-width: 0;
  }

  .response-section h3 {
    font-size: 1rem;
  }

  .budget-table {
    font-size: 0.9rem;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  .budget-table th,
  .budget-table td {
    padding: 8px;
  }

  .comparison-table {
    font-size: 0.85rem;
    min-width: 0;
  }

  .comparison-table th,
  .comparison-table td {
    padding: 8px 10px;
  }

  /* En móvil: tarjetas en lugar de tabla estrecha */
  .comparison-table-wrap,
  .comparison-table--desktop {
    display: none;
  }

  .comparison-cards--mobile {
    display: block;
  }

  .message.system .bubble.structured-response {
    width: 100%;
    max-width: 100%;
  }

  .tech-block-details summary {
    font-size: 0.9rem;
    padding: 10px 14px;
  }

  .checklist-list li,
  .warnings-list li {
    font-size: 0.9rem;
    padding: 6px 10px;
  }

  .bubble {
    max-width: min(96%, 100%);
    padding: clamp(12px, 3.5vw, 15px) clamp(14px, 4vw, 20px);
    font-size: clamp(0.92rem, 3.8vw, 1rem);
  }
}

/* Teléfonos muy estrechos (p. ej. 320–360px) */
@media (max-width: 480px) {
  .action-chip-label {
    font-size: clamp(0.78rem, 3.4vw, 0.9rem);
    white-space: normal;
    text-align: center;
    line-height: 1.15;
  }

  .action-chip {
    min-height: 42px;
    padding: 6px 8px;
  }

  .action-chip-icon {
    width: 24px;
    height: 24px;
  }

  .chat-input-compose {
    padding: 8px 10px 6px;
    border-radius: 18px;
  }

  #question-input {
    font-size: 16px;
  }

  #send-btn,
  .voice-btn {
    width: 36px;
    height: 36px;
  }

  .top-bar {
    padding: 0.55rem var(--app-pad-x);
  }

  .logo-small {
    font-size: clamp(0.88rem, 4vw, 1rem);
  }
}

/* iPad / tablet táctil: pastillas en 2 columnas y más aire sin salir del layout móvil */
@media ((hover: none) and (pointer: coarse) and (min-width: 921px) and (max-width: 1100px)) {
  .prompt-grid {
    grid-template-columns: 1fr 1fr;
    max-width: min(640px, 100%);
    gap: 12px;
  }

  .prompt-card {
    min-height: 88px;
    padding: 16px;
  }

  .welcome-screen {
    padding: clamp(1rem, 3vw, 1.5rem) var(--app-pad-x) 0.75rem;
  }

  .bubble {
    max-width: min(92%, 100%);
  }

  #chat-form {
    width: 100%;
    max-width: 100%;
  }
}

/* --- Unified Shell (V5.3) --- */
.unified-shell {
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-left: 4px solid var(--brand-green);
  padding: 15px 20px;
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Cuerpo de consultas rápidas / orden de aplicación dentro de la misma tarjeta blanca */
.unified-shell .direct-response-body {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* Orden de aplicación (Hidrocril, Beach Feel, Piedra Bali…): sin línea ni resumen duplicado */
.unified-shell-orden-aplicacion .direct-response-body.orden-aplicacion-body {
  border-top: none;
  margin-top: 10px;
  padding-top: 0;
}

.unified-shell .direct-response-body .application-flow .flow-arrow {
  color: var(--brand-green);
  opacity: 0.75;
}

.shell-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.shell-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.export-btn {
  background: none;
  border: none;
  color: var(--text-gray);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.export-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--brand-red);
}



.shell-title {
  color: var(--text-gray);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Badges Container */
.shell-badges {
  display: flex;
  gap: 5px;
}

.badge {
  background: var(--brand-red);
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
}

/* Subtitle (Product Name or Comparison) */
.shell-subtitle {
  color: var(--brand-green);
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.2;
  margin-top: 4px;
}

.shell-desc {
  color: var(--text-gray);
  font-size: 0.95rem;
  line-height: 1.5;
  margin-top: 4px;
}

.derived-tag {
  font-size: 0.75em;
  color: #999;
  font-weight: normal;
}

.comparison-note {
  margin-top: 10px;
  padding: 8px;
  background: #fff8e1;
  border-radius: 4px;
  font-size: 0.85rem;
  color: #8a6d3b;
}

/* Ensure details open smoothly */
details.tech-block-details[open] summary~* {
  animation: sweep .3s ease-in-out;
}

@keyframes sweep {
  0% {
    opacity: 0;
    margin-top: -10px
  }

  100% {
    opacity: 1;
    margin-top: 0px
  }
}

/* --- Direct Answer Bubble V5.5 (Sutil & Premium) --- */
.direct-answer-bubble {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-left: 4px solid var(--brand-green);
  border-radius: 8px;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  margin-bottom: 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.direct-answer-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--brand-green);
  margin-top: 1px;
}

.direct-answer-text {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--text-black);
  font-size: 0.98rem;
  line-height: 1.45;
  font-weight: 500;
  white-space: pre-wrap;
}

.direct-answer-text.direct-math-body {
  white-space: normal;
}

/* Lista de compra tipo referencia Decopox (tarjeta amplia, sombra suave) */
.direct-answer-bubble.qty-purchase-hero {
  border-radius: 16px;
  border-left: none;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.09);
  padding: 18px 20px 22px;
  scroll-margin-bottom: 28px;
}

.qty-purchase-remainder {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.qty-purchase-tail {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  padding-bottom: 4px;
}

.qty-tail-section {
  margin-bottom: 1.1rem;
}

.qty-tail-section:last-child {
  margin-bottom: 0;
}

.qty-tail-title {
  font-family: var(--font-heading);
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--brand-green);
  margin: 0 0 0.55rem;
  letter-spacing: 0.04em;
}

.qty-tail-title-desglose {
  font-size: 0.95rem;
  line-height: 1.35;
}

.qty-tail-importante .qty-tail-bullet-list {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--text-black);
  font-size: 0.96rem;
  line-height: 1.5;
}

.qty-tail-bullet-list li {
  margin-bottom: 0.4rem;
}

.qty-tail-bullet-list li:last-child {
  margin-bottom: 0;
}

.qty-tail-layers {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.qty-tail-layer {
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 12px;
  padding: 12px 14px;
  background: linear-gradient(180deg, #fafdfb 0%, #ffffff 100%);
}

.qty-tail-layer-head {
  font-weight: 800;
  font-size: 0.98rem;
  color: #0b3d33;
  margin-bottom: 6px;
  line-height: 1.35;
}

.qty-tail-layer-head strong {
  color: var(--brand-green);
  font-weight: 800;
}

.qty-tail-layer-consumo {
  font-size: 0.9rem;
  color: #4b5563;
  margin-bottom: 6px;
  line-height: 1.45;
}

.qty-tail-layer-total {
  font-size: 0.9rem;
  color: #334155;
  margin-bottom: 6px;
  line-height: 1.45;
}

.qty-tail-layer-qty {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--brand-green);
  background: rgba(0, 104, 71, 0.07);
  border-radius: 10px;
  padding: 10px 12px;
  margin-top: 4px;
  line-height: 1.4;
}

.qty-tail-layer-qty strong {
  color: #065f46;
}

.qty-tail-layer-extra {
  font-size: 0.87rem;
  color: #6b7280;
  margin-top: 8px;
  line-height: 1.45;
}

.qty-tail-foot-block {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(15, 23, 42, 0.1);
}

.qty-tail-foot {
  font-size: 0.88rem;
  font-style: italic;
  color: #64748b;
  margin: 0 0 0.45rem;
  line-height: 1.45;
}

.qty-tail-foot:last-child {
  margin-bottom: 0;
}

.qty-tail-preamble {
  font-size: 0.94rem;
  color: var(--text-black);
  line-height: 1.5;
  margin-bottom: 0.75rem;
}

.qty-tail-preamble p {
  margin: 0 0 0.45rem;
}

.qty-tail-preamble p:last-child {
  margin-bottom: 0;
}

.qty-follow-tech {
  margin-top: 14px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  padding: 10px 12px;
  background: #f8faf9;
}

.qty-follow-tech summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--brand-green);
  list-style-position: outside;
}

.qty-follow-tech .system-response-container {
  margin-top: 10px;
}

.qty-system-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.qty-system-title {
  font-family: var(--font-heading);
  font-size: 1.28rem;
  font-weight: 800;
  color: var(--brand-green);
}

.qty-system-sub {
  color: #4b5563;
  font-size: 0.88rem;
}

.qty-system-intro {
  color: #4b5563;
  font-size: 0.86rem;
  line-height: 1.5;
  margin: 0.35rem 0 0.75rem;
}

.qty-system-heading {
  font-weight: 800;
  color: #0f172a;
  letter-spacing: 0.02em;
  font-size: 0.92rem;
}

.qty-card-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.qty-card-item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
  padding: 8px;
  background: #ffffff;
}

.qty-card-index {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--brand-green);
  color: #fff;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 22px;
  font-size: 0.82rem;
}

.qty-card-name {
  font-weight: 800;
  color: #0b3d33;
  font-size: 0.98rem;
}

.qty-card-role {
  color: #6b7280;
  font-size: 0.85rem;
}

.qty-card-consumo {
  margin-top: 4px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #374151;
}

.qty-card-consumo span {
  font-weight: 700;
  color: #065f46;
}

.qty-card-alt {
  margin-top: 4px;
  font-size: 0.86rem;
  color: #4b5563;
}

.qty-card-qty {
  margin-top: 3px;
  font-size: 0.96rem;
  font-weight: 800;
  color: #111827;
}

.qty-card-qty span {
  font-weight: 700;
  color: #065f46;
}

.qty-card-flag {
  margin-top: 4px;
  display: inline-block;
  background: #f3f4f6;
  color: #374151;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.86rem;
}

.qty-total-box {
  margin-top: 2px;
  border-top: 1px solid rgba(0, 104, 71, 0.18);
  padding-top: 8px;
}

.qty-total-title {
  font-weight: 800;
  color: #0b3d33;
  font-size: 0.96rem;
}

.qty-total-title span {
  font-weight: 600;
  color: #6b7280;
  font-size: 0.9rem;
}

.qty-total-line {
  margin-top: 2px;
  font-weight: 700;
  color: #111827;
  font-size: 0.9rem;
}

.direct-math-body .direct-math-p {
  margin: 0 0 0.85rem;
}

.direct-math-body .direct-math-p:last-child {
  margin-bottom: 0;
}

.direct-math-body .direct-math-total {
  font-weight: 700;
  margin-top: 0.5rem;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(0, 104, 71, 0.18);
  color: var(--text-black);
}

.direct-math-body .direct-math-total strong {
  font-weight: 800;
}

.direct-answer-text strong {
  color: var(--brand-green);
  font-weight: 800;
}

/* =========================================
   PROJECT DASHBOARD SIDEBAR (V5.6)
   ========================================= */

.sidebar {
  width: 280px;
  background-color: #f8f9fa;
  border-right: 1px solid #e0e0e0;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  height: calc(var(--app-vh, 1vh) * 100);
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.03);
  z-index: 10;
  overflow: hidden;
  transition: width 0.3s ease;
}

.sidebar-header {
  padding: 20px;
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
}

.sidebar-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.sidebar-close-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #fff;
  color: #666;
  cursor: pointer;
  flex-shrink: 0;
}

.sidebar-close-btn:active {
  background: #f0f0f0;
}

.sidebar-header h2 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--text-black);
  margin-bottom: 5px;
}

.project-list {
  flex-grow: 1;
  overflow-y: auto;
  list-style: none;
  padding: 10px;
}

.project-item {
  background: #ffffff;
  border: 1px solid #eaeaea;
  border-radius: 8px;
  padding: 12px 15px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.project-info {
  flex-grow: 1;
  overflow: hidden;
}

.delete-project-btn {
  background: transparent;
  border: none;
  color: #ccc;
  cursor: pointer;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
  margin-left: 10px;
}

.project-item:hover .delete-project-btn {
  color: var(--brand-red);
}

.delete-project-btn:hover {
  color: #8B0000;
  transform: scale(1.1);
}

.project-item:hover {
  background: #f0f7f4;
  /* Light green tint */
  border-color: var(--brand-green);
  transform: translateY(-1px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.project-item.active {
  background: var(--brand-green);
  border-color: var(--brand-green);
}

.project-item.active .project-title,
.project-item.active .project-date {
  color: #ffffff;
}

.project-item.active .delete-project-btn {
  color: rgba(255, 255, 255, 0.7);
}

.project-item.active .delete-project-btn:hover {
  color: #ffffff;
}

.project-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-black);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-date {
  font-size: 0.75rem;
  color: var(--text-gray);
}

/* Responsive: cabecera y sidebar en móvil */
@media (max-width: 920px), ((hover: none) and (pointer: coarse) and (max-width: 1100px)) {
  .top-bar {
    padding: 0.65rem 0.85rem;
    flex-wrap: nowrap;
    z-index: 8000;
  }

  .logo-small {
    font-size: 1rem;
  }

  .mobile-menu-btn {
    display: inline-flex;
  }

  /* En móvil los botones van al panel lateral, no en la barra */
  .top-bar-actions {
    display: none !important;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100dvh;
    height: calc(var(--app-vh, 1vh) * 100);
    width: min(300px, 88vw);
    transform: translateX(-105%);
    transition: transform 0.28s ease;
    z-index: 9300;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.14);
  }

  .sidebar.is-open {
    transform: translateX(0);
  }

  .sidebar-close-btn {
    display: inline-flex;
  }
}