@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap');

/* ==========================================================================
   SISTEMA DE DISEÑO: BOCETO V7 (Alineación de Datos + Cómic Cuaderno Rayado)
   Estilo cómic dibujado a mano, papel de cuaderno rayado con garabatos,
   paleta cálida/naranja y máxima legibilidad sin datos pegados a los bordes.
   ========================================================================== */

[data-theme="boceto"] {
  /* Tipografías: Títulos y etiquetas estilo cómic/boceto, datos en tipografía mono legible */
  --font-comic: 'Patrick Hand', cursive;
  --font-data: 'JetBrains Mono', 'Inter', monospace;

  /* Paleta Cómic / Tonos Cálidos y Naranjas */
  --paper-bg: #FFFDF7;          /* Fondo papel suave */
  --paper-card: #FFFFFF;        /* Superficie blanca opaca para tarjetas */
  --ink-black: #211A15;         /* Tinta de pluma negra/café oscuro */
  --comic-orange: #FF7D00;      /* Naranja cómic vibrante */
  --comic-peach: #FFAE5D;       /* Naranja pastel/melocotón */
  --comic-yellow: #FFD166;      /* Amarillo cómic de resalte */
  --notebook-blue: rgba(145, 175, 215, 0.4); /* Línea azulada clásica de cuaderno escolar */
  --notebook-margin: rgba(255, 105, 105, 0.45); /* Margen rojo izquierdo de cuaderno */
  
  /* Mapeo de variables nativas */
  --background: var(--paper-bg);
  --foreground: var(--ink-black);
  --card: var(--paper-card);
  --card-foreground: var(--ink-black);
  --muted: #FFF4EA;
  --muted-foreground: #665A52;
  --border: var(--ink-black);
  --input: transparent;
  
  --primary: var(--comic-orange);
  --primary-hover: #E66F00;
  --primary-foreground: #FFFFFF;

  /* Bordes gruesos estilo dibujo / tinta cómic */
  --border-width: 2.5px;
  --radius-sm: 8px 3px 8px 4px / 3px 8px 4px 8px;
  --radius-md: 12px 4px 12px 5px / 4px 12px 5px 12px;
  --radius-lg: 15px 5px 15px 8px / 5px 15px 8px 15px;

  /* Sombras Sólidas Estilo Cómic */
  --shadow-sm: 3px 3px 0px rgba(33, 26, 21, 1);
  --shadow-md: 5px 5px 0px rgba(33, 26, 21, 1);
  --shadow-lg: 7px 7px 0px rgba(33, 26, 21, 1);
  --shadow-glow: none;
}

/* ==========================================================================
   1. FONDO DE CUADERNO RAYADO Y GARABATOS (DIBUJADOS A MANO)
   ========================================================================== */
[data-theme="boceto"] body {
  background-color: var(--paper-bg) !important;
  background-image: 
    /* Garabatos de cuaderno (Corazones, estrellas, espirales, rayos, flechas, etc.) */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='360' height='360' opacity='0.08' stroke='%23211A15' fill='none' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><path d='M50,70 C50,45 85,45 85,70 C85,100 50,115 50,115 C50,115 15,100 15,70 C15,45 50,45 50,70 Z' /><path d='M145,50 L175,80 M175,50 L145,80' /><path d='M260,60 C275,35 300,35 310,60 C325,85 285,110 260,85 C235,60 275,35 285,60' /><path d='M80,220 L95,185 L115,200 L95,215 L105,245 L80,225 L55,245 L65,215 L45,200 L70,185 Z' /><path d='M180,220 L210,195 M210,195 L200,220 M210,195 L185,190' /><path d='M280,230 Q305,205 330,230 T320,270 T280,260' /><path d='M140,310 L160,285 L180,310 L200,285' /><path d='M50,320 C60,300 80,300 90,320 C100,340 120,340 130,320' /></svg>"),
    /* Margen rojo vertical de cuaderno escolar */
    linear-gradient(to right, transparent 65px, var(--notebook-margin) 65px, var(--notebook-margin) 67px, transparent 67px),
    /* Rayas horizontales de cuaderno espaciadas a 28px */
    repeating-linear-gradient(to bottom, transparent, transparent 27px, var(--notebook-blue) 27px, var(--notebook-blue) 28px) !important;
  background-size: 360px 360px, 100% 100%, 100% 28px !important;
  background-attachment: fixed !important;
}

/* ==========================================================================
   2. TIPOGRAFÍA Y LEGIBILIDAD
   ========================================================================== */
[data-theme="boceto"] h1, 
[data-theme="boceto"] h2, 
[data-theme="boceto"] h3, 
[data-theme="boceto"] h4,
[data-theme="boceto"] .section-title,
[data-theme="boceto"] .btn,
[data-theme="boceto"] label,
[data-theme="boceto"] .project-info-desc,
[data-theme="boceto"] .summary-label {
  font-family: var(--font-comic) !important;
  color: var(--ink-black) !important;
  letter-spacing: 0.5px;
}

[data-theme="boceto"] input,
[data-theme="boceto"] select,
[data-theme="boceto"] td,
[data-theme="boceto"] th,
[data-theme="boceto"] .summary-value,
[data-theme="boceto"] .kpi-value {
  font-family: var(--font-data) !important;
  font-weight: 700 !important;
  color: var(--ink-black) !important;
  letter-spacing: 0px;
}

/* ==========================================================================
   3. HEADER CÓMIC
   ========================================================================== */
[data-theme="boceto"] .app-header {
  background: var(--paper-card) !important;
  border-bottom: var(--border-width) solid var(--border) !important;
  box-shadow: var(--shadow-sm) !important; 
  backdrop-filter: none !important;
}

[data-theme="boceto"] .header-left h1 {
  background: none !important;
  -webkit-text-fill-color: var(--ink-black) !important;
  font-size: 2.2rem !important;
  text-transform: uppercase;
}

/* ==========================================================================
   4. TARJETAS Y CONTENEDORES (FONDO BLANCO SÓLIDO Y BORDES DEFINIDOS)
   ========================================================================== */
[data-theme="boceto"] .card, 
[data-theme="boceto"] .project-info-bar,
[data-theme="boceto"] .exc-hero-card,
[data-theme="boceto"] .login-card,
[data-theme="boceto"] .granel-card,
[data-theme="boceto"] .card-purple,
[data-theme="boceto"] .card-blue,
[data-theme="boceto"] .card-teal,
[data-theme="boceto"] .card-orange {
  background: var(--paper-card) !important;
  border: var(--border-width) solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-md) !important;
}

[data-theme="boceto"] .card:hover,
[data-theme="boceto"] .granel-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-lg) !important;
}

/* Limpiar adornos previos que desalineen */
[data-theme="boceto"] .project-info-bar::before,
[data-theme="boceto"] .login-card::before,
[data-theme="boceto"] .app-header::after,
[data-theme="boceto"] .card::after {
  display: none !important;
}

/* ==========================================================================
   5. CINTILLOS, BADGES Y ETIQUETAS
   ========================================================================== */
[data-theme="boceto"] .section-badge,
[data-theme="boceto"] .project-info-pill {
  background: var(--comic-peach) !important; 
  color: var(--ink-black) !important;
  border: var(--border-width) solid var(--border) !important;
  box-shadow: 2px 2px 0px var(--border) !important;
  border-radius: var(--radius-sm) !important;
  text-transform: uppercase;
  font-weight: 700 !important;
}

/* ==========================================================================
   6. SECCIONES DE RESUMEN Y ALINEACIÓN DE DATOS (CORRECCIÓN INTEGRAL)
   ========================================================================== */

/* Columna lateral de resumen dentro de la tarjeta */
[data-theme="boceto"] .unified-col-summary {
  background: transparent !important;
  border: none !important;
  border-left: 2px dashed rgba(33, 26, 21, 0.3) !important;
  box-shadow: none !important;
  padding: 0 0 0 20px !important;
}

/* Contenedor de caja de resumen con padding interior cómodo */
[data-theme="boceto"] .summary-section {
  background: var(--paper-card) !important;
  border: var(--border-width) solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 16px 18px !important;
  margin-bottom: 16px !important;
}

/* Título de la sección de resumen con marcador de resalte */
[data-theme="boceto"] .summary-title {
  font-family: var(--font-comic) !important;
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  color: var(--ink-black) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 14px !important;
  padding-bottom: 6px !important;
  border-bottom: 2px dashed rgba(33, 26, 21, 0.25) !important;
}

[data-theme="boceto"] .summary-title::before {
  content: '' !important;
  width: 7px !important;
  height: 20px !important;
  background: var(--comic-orange) !important;
  border: 1.5px solid var(--ink-black) !important;
  border-radius: 2px !important;
  box-shadow: 1.5px 1.5px 0 var(--ink-black) !important;
}

/* Grilla de items */
[data-theme="boceto"] .summary-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

/* Fila de ítem de resumen: Agrupada estéticamente sin perder legibilidad */
[data-theme="boceto"] .summary-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 12px !important;
  background: #FFFDF9 !important;
  border: 1.5px dashed rgba(33, 26, 21, 0.25) !important;
  border-radius: 8px !important;
  gap: 12px !important;
}

/* Etiqueta del dato */
[data-theme="boceto"] .summary-label {
  font-family: var(--font-comic) !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: var(--ink-black) !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

/* Valor numérico / costo: Enmarcado en cápsula estilo cómic visible y nunca pegado al borde */
[data-theme="boceto"] .summary-value {
  font-family: var(--font-data) !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: var(--ink-black) !important;
  background: #FFFFFF !important;
  border: 2px solid var(--ink-black) !important;
  border-radius: 6px !important;
  padding: 4px 12px !important;
  box-shadow: 2px 2px 0 var(--ink-black) !important;
  text-align: right !important;
  white-space: nowrap !important;
  margin-left: auto !important;
}

/* Desglose de Mano de Obra y Costos */
[data-theme="boceto"] .mo-breakdown {
  background: var(--paper-card) !important;
  border: var(--border-width) solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 14px 16px !important;
}

[data-theme="boceto"] .mo-breakdown-title {
  font-family: var(--font-comic) !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  margin-bottom: 10px !important;
  color: var(--ink-black) !important;
  border-bottom: 1.5px dashed rgba(33, 26, 21, 0.2) !important;
  padding-bottom: 4px !important;
}

[data-theme="boceto"] .mo-breakdown-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 6px 6px !important;
  font-family: var(--font-data) !important;
  font-size: 0.95rem !important;
  border-bottom: 1px dashed rgba(33, 26, 21, 0.15) !important;
}

[data-theme="boceto"] .mo-breakdown-total {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 8px 12px !important;
  margin-top: 10px !important;
  background: #FFF4EA !important;
  border: 2px solid var(--ink-black) !important;
  border-radius: 6px !important;
  font-family: var(--font-data) !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  box-shadow: 2px 2px 0 var(--ink-black) !important;
}

/* Bloque Inferior KPI Highlight */
[data-theme="boceto"] .kpi-highlight {
  background: #FFF4EA !important;
  border: var(--border-width) solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-md) !important;
  padding: 16px 20px !important;
}

[data-theme="boceto"] .kpi-label {
  font-family: var(--font-comic) !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  color: var(--comic-orange) !important;
  letter-spacing: 1px !important;
}

[data-theme="boceto"] .kpi-dual-label {
  font-family: var(--font-comic) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #665A52 !important;
}

[data-theme="boceto"] .kpi-value {
  font-family: var(--font-data) !important;
  font-weight: 700 !important;
  color: var(--ink-black) !important;
  font-size: 1.45rem !important;
}

[data-theme="boceto"] .kpi-dual-divider {
  background: var(--ink-black) !important;
  width: 2px !important;
  opacity: 0.25 !important;
}

/* ==========================================================================
   7. INPUTS 100% LEGIBLES Y CON CONTRASTE
   ========================================================================== */
[data-theme="boceto"] .info-input,
[data-theme="boceto"] .exc-search-input,
[data-theme="boceto"] .input-field,
[data-theme="boceto"] .theme-select-native,
[data-theme="boceto"] .search-box {
  background: var(--paper-card) !important;
  border: var(--border-width) solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--ink-black) !important;
  box-shadow: 2px 2px 0px rgba(33, 26, 21, 0.15) !important;
  font-size: 1.05rem !important;
  padding: 10px 14px !important;
}

[data-theme="boceto"] .info-input:focus,
[data-theme="boceto"] .exc-search-input:focus,
[data-theme="boceto"] .input-field:focus {
  border-color: var(--comic-orange) !important;
  box-shadow: var(--shadow-sm) !important;
  background: #FFF4EA !important;
  outline: none !important;
}

[data-theme="boceto"] .input-unit-badge {
  background: var(--comic-peach) !important;
  color: var(--ink-black) !important;
  border: 1.5px solid var(--ink-black) !important;
  font-weight: 700 !important;
}

/* ==========================================================================
   8. BOTONES ESTILO CÓMIC
   ========================================================================== */
[data-theme="boceto"] .btn,
[data-theme="boceto"] .btn-add-card,
[data-theme="boceto"] .btn-add-mo,
[data-theme="boceto"] .toolbar-btn,
[data-theme="boceto"] .mode-btn {
  border: var(--border-width) solid var(--ink-black) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--paper-card) !important;
  color: var(--ink-black) !important;
  font-family: var(--font-comic) !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  box-shadow: var(--shadow-sm) !important;
  text-transform: uppercase;
}

[data-theme="boceto"] .btn:hover,
[data-theme="boceto"] .btn-add-card:hover,
[data-theme="boceto"] .btn-add-mo:hover,
[data-theme="boceto"] .toolbar-btn:hover,
[data-theme="boceto"] .mode-btn:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: var(--shadow-md) !important;
  background: #FFF4EA !important;
}

[data-theme="boceto"] .btn:active,
[data-theme="boceto"] .btn-add-card:active {
  transform: translate(2px, 2px) !important;
  box-shadow: 1px 1px 0 var(--border) !important;
}

[data-theme="boceto"] .btn-primary,
[data-theme="boceto"] .btn-webhook-action,
[data-theme="boceto"] .mode-btn.active {
  background: var(--comic-orange) !important;
  color: #FFFFFF !important;
}

[data-theme="boceto"] .btn-primary:hover,
[data-theme="boceto"] .btn-webhook-action:hover {
  background: #E66F00 !important;
}

[data-theme="boceto"] .btn-primary svg.lucide,
[data-theme="boceto"] .btn-webhook-action svg.lucide,
[data-theme="boceto"] .mode-btn.active svg.lucide {
  stroke: #FFFFFF !important;
}

/* ==========================================================================
   9. TABLAS DE DATOS EXTREMADAMENTE CLARAS
   ========================================================================== */
[data-theme="boceto"] table {
  border-collapse: separate;
  border-spacing: 0;
  border: var(--border-width) solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  overflow: hidden;
  background: var(--paper-card) !important;
}

[data-theme="boceto"] th {
  background: var(--comic-peach) !important; /* Encabezados Naranjas */
  color: var(--ink-black) !important;
  border-bottom: var(--border-width) solid var(--border) !important;
  border-right: var(--border-width) solid var(--border) !important;
  text-transform: uppercase;
  font-family: var(--font-comic) !important;
  font-size: 1.1rem !important;
  letter-spacing: 1px;
}

[data-theme="boceto"] td {
  border-bottom: 2px dashed rgba(33, 26, 21, 0.2) !important;
  border-right: var(--border-width) solid var(--border) !important;
  background: var(--paper-card) !important;
  font-size: 1rem !important;
}

[data-theme="boceto"] th:last-child, 
[data-theme="boceto"] td:last-child {
  border-right: none !important;
}

[data-theme="boceto"] tr:last-child td {
  border-bottom: none !important;
}

[data-theme="boceto"] tbody tr:hover td {
  background: rgba(255, 125, 0, 0.08) !important;
}

/* ==========================================================================
   10. ICONOS Y DETALLES GRÁFICOS
   ========================================================================== */
[data-theme="boceto"] svg.lucide, 
[data-theme="boceto"] i[data-lucide] {
  stroke-width: 2.2px !important; 
  stroke: var(--ink-black) !important;
}

/* Veredicto de exclusividades */
[data-theme="boceto"] .exc-summary-card,
[data-theme="boceto"] .exc-verdict-banner {
  background: var(--paper-card) !important;
  border: var(--border-width) solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 16px !important;
}

/* --------------------------------------------------------------------------
   11. AJUSTE DE DENSIDAD Y FONDO VISIBLE
   Conserva la fuente y la paleta de Boceto; compacta el espacio del contenido.
   -------------------------------------------------------------------------- */
[data-theme="boceto"] {
  --border-width: 2px;
  --shadow-sm: 2px 2px 0 rgba(33, 26, 21, 1);
  --shadow-md: 3px 3px 0 rgba(33, 26, 21, 1);
  --shadow-lg: 4px 4px 0 rgba(33, 26, 21, 1);
}

/* La textura está en el body; la superficie opaca de la app la estaba tapando. */
[data-theme="boceto"] .app-content,
[data-theme="boceto"] .main-content,
[data-theme="boceto"] #cotizador-view,
[data-theme="boceto"] #exclusividades-view,
[data-theme="boceto"] .content-section {
  background: transparent !important;
}

[data-theme="boceto"] .app-content {
  min-height: 100vh;
}

/* Ancho máximo y espacios exteriores para que el papel se vea alrededor. */
[data-theme="boceto"] .main-content {
  width: calc(100% - 32px) !important;
  max-width: 1600px !important;
  padding: 14px 12px !important;
  margin: 0 auto !important;
}

[data-theme="boceto"] .app-header {
  padding: 8px 16px !important;
  gap: 8px !important;
}

[data-theme="boceto"] .header-left {
  gap: 12px !important;
  min-width: 0;
}

[data-theme="boceto"] .header-right {
  gap: 6px !important;
  min-width: 0;
}

[data-theme="boceto"] .header-mode-switch {
  margin-right: 0 !important;
}

[data-theme="boceto"] .btn-add-card,
[data-theme="boceto"] .btn-webhook-action,
[data-theme="boceto"] .toolbar-btn,
[data-theme="boceto"] #btn-guardar {
  padding: 5px 10px !important;
}

[data-theme="boceto"] .header-toolbar {
  padding: 2px !important;
  gap: 1px !important;
}

[data-theme="boceto"] .project-info-bar {
  gap: 10px !important;
  padding: 11px 16px !important;
  margin-bottom: 18px !important;
}

[data-theme="boceto"] .project-info-header {
  padding-bottom: 7px !important;
}

[data-theme="boceto"] .project-info-grid {
  gap: 10px 12px !important;
}

[data-theme="boceto"] .project-info-item {
  gap: 4px !important;
}

[data-theme="boceto"] .info-input,
[data-theme="boceto"] .exc-search-input,
[data-theme="boceto"] .input-field {
  padding: 6px 10px !important;
}

[data-theme="boceto"] .content-section {
  margin-bottom: 20px !important;
}

[data-theme="boceto"] .granel-card {
  padding: 24px 14px 14px !important;
  margin-top: 14px !important;
  margin-bottom: 14px !important;
}

[data-theme="boceto"] .granel-header {
  gap: 10px !important;
  margin-bottom: 12px !important;
}

[data-theme="boceto"] .formulacion-layout {
  gap: 14px !important;
}

[data-theme="boceto"] .unified-right-grid {
  gap: 12px !important;
}

[data-theme="boceto"] .summary-section {
  padding: 10px 12px !important;
  margin-bottom: 10px !important;
}

[data-theme="boceto"] .summary-title {
  gap: 7px !important;
  margin-bottom: 8px !important;
}

[data-theme="boceto"] .summary-grid {
  gap: 6px !important;
}

[data-theme="boceto"] .summary-item {
  gap: 8px !important;
  padding: 5px 8px !important;
}

[data-theme="boceto"] .summary-value {
  padding: 3px 8px !important;
}

[data-theme="boceto"] .mo-breakdown {
  padding: 10px 12px !important;
  margin-top: 10px !important;
}

[data-theme="boceto"] .mo-breakdown-row {
  padding: 4px 5px !important;
}

[data-theme="boceto"] .kpi-highlight {
  padding: 10px 14px !important;
  margin-top: 14px !important;
}

[data-theme="boceto"] .kpi-dual {
  gap: 8px !important;
}

[data-theme="boceto"] .table-container {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: auto !important;
}

[data-theme="boceto"] .formulacion-table th {
  padding: 7px 9px !important;
}

[data-theme="boceto"] .formulacion-table td {
  padding: 4px 6px !important;
}

[data-theme="boceto"] .granel-card.card-purple .formulacion-table {
  min-width: 1010px !important;
}

[data-theme="boceto"] .granel-card.card-blue .formulacion-table,
[data-theme="boceto"] .granel-card.card-teal .formulacion-table {
  min-width: 640px !important;
}

[data-theme="boceto"] .add-row-container {
  padding: 10px 12px !important;
}

[data-theme="boceto"] .btn-add-row {
  padding: 8px 10px !important;
}

[data-theme="boceto"] .exc-hero-card,
[data-theme="boceto"] .exc-summary-card,
[data-theme="boceto"] .exc-table-section {
  padding: 14px 16px !important;
}

@media (max-width: 1400px) {
  [data-theme="boceto"] .formulacion-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  [data-theme="boceto"] .granel-card .formulacion-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 900px) {
  [data-theme="boceto"] .app-header {
    height: auto !important;
    padding: 8px 12px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  [data-theme="boceto"] .header-left,
  [data-theme="boceto"] .header-right {
    width: 100% !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
  }

  [data-theme="boceto"] .header-actions-group {
    flex: 1 1 100% !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  [data-theme="boceto"] .header-actions-group .btn-add-card,
  [data-theme="boceto"] .header-actions-group .btn-webhook-action {
    flex: 1 1 150px !important;
    justify-content: center !important;
  }

  [data-theme="boceto"] .header-separator {
    display: none !important;
  }

  [data-theme="boceto"] .project-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  [data-theme="boceto"] .granel-card {
    padding: 28px 12px 12px !important;
  }

  [data-theme="boceto"] .main-content {
    width: calc(100% - 20px) !important;
    padding: 10px 6px !important;
  }
}

@media (max-width: 560px) {
  [data-theme="boceto"] .app-header {
    position: relative !important;
    padding: 8px 10px !important;
  }

  [data-theme="boceto"] .header-left {
    align-items: flex-start !important;
  }

  [data-theme="boceto"] .header-left h1 {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
  }

  [data-theme="boceto"] .header-mode-switch {
    width: 100% !important;
    justify-content: center !important;
  }

  [data-theme="boceto"] .header-right {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  [data-theme="boceto"] .header-actions-group {
    display: grid !important;
    grid-column: 1 / -1 !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  [data-theme="boceto"] .header-actions-group .btn-add-card,
  [data-theme="boceto"] .header-actions-group .btn-webhook-action {
    width: 100% !important;
  }

  [data-theme="boceto"] .header-toolbar {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  [data-theme="boceto"] #btn-guardar,
  [data-theme="boceto"] .theme-selector-box {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    justify-content: center !important;
  }

  [data-theme="boceto"] .project-info-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  [data-theme="boceto"] .project-info-bar {
    padding: 10px 12px !important;
    margin-bottom: 14px !important;
  }

  [data-theme="boceto"] .granel-card {
    padding: 28px 10px 10px !important;
  }

  [data-theme="boceto"] .exc-hero-card,
  [data-theme="boceto"] .exc-summary-card,
  [data-theme="boceto"] .exc-table-section {
    padding: 12px !important;
  }
}

/* --------------------------------------------------------------------------
   12. MENOS RUIDO VISUAL, MISMA PERSONALIDAD DE BOCETO
   -------------------------------------------------------------------------- */
[data-theme="boceto"] {
  --border-width: 1.5px;
  --shadow-sm: 1px 1px 0 rgba(33, 26, 21, 1);
  --shadow-md: 2px 2px 0 rgba(33, 26, 21, 1);
  --shadow-lg: 3px 3px 0 rgba(33, 26, 21, 1);
}

[data-theme="boceto"] .card:hover,
[data-theme="boceto"] .granel-card:hover {
  transform: translate(-1px, -1px) !important;
}

/* La tabla conserva su marco; el panel lateral mantiene un único marco de grupo. */
[data-theme="boceto"] .granel-card .formulacion-layout > div:first-child > .card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

[data-theme="boceto"] .granel-card .resumen-card {
  position: relative !important;
  top: auto !important;
  align-self: start !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  background: var(--paper-card) !important;
  border: var(--border-width) solid var(--ink-black) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 10px !important;
  margin: 0 !important;
}

[data-theme="boceto"] .granel-card .resumen-card > .card-content {
  flex: 0 0 auto !important;
  width: 100% !important;
  min-width: 0 !important;
}

[data-theme="boceto"] .granel-card .formulacion-layout > div,
[data-theme="boceto"] .granel-card .unified-col-mo,
[data-theme="boceto"] .granel-card .unified-col-summary {
  width: 100% !important;
  min-width: 0 !important;
}

[data-theme="boceto"] .granel-card .unified-right-grid {
  width: 100% !important;
  min-width: 0 !important;
  align-items: start !important;
  flex: 0 0 auto !important;
  gap: 8px !important;
}

[data-theme="boceto"] .granel-card .unified-right-grid > * {
  min-width: 0 !important;
}

[data-theme="boceto"] .granel-card .summary-section {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px dashed rgba(33, 26, 21, 0.22) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 0 7px !important;
  margin: 0 0 7px !important;
}

[data-theme="boceto"] .granel-card .summary-item {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px dashed rgba(33, 26, 21, 0.18) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 3px 0 !important;
}

[data-theme="boceto"] .granel-card .summary-value {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 2px 4px !important;
}

[data-theme="boceto"] .granel-card .kpi-highlight {
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 8px !important;
  padding: 9px 12px !important;
  box-shadow: var(--shadow-sm) !important;
}

[data-theme="boceto"] .formulacion-table th {
  border-right: 1px solid rgba(33, 26, 21, 0.48) !important;
  border-bottom: 1.5px solid var(--ink-black) !important;
}

[data-theme="boceto"] .formulacion-table td {
  border-right: 1px solid rgba(33, 26, 21, 0.28) !important;
  border-bottom: 1px dashed rgba(33, 26, 21, 0.2) !important;
}

[data-theme="boceto"] .granel-card {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

[data-theme="boceto"] .granel-card .formulacion-layout {
  align-items: start !important;
  gap: 14px !important;
  width: 100% !important;
  min-width: 0 !important;
}

[data-theme="boceto"] .formulacion-layout > div {
  min-width: 0 !important;
}

[data-theme="boceto"] .table-container {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: auto !important;
}

@media (min-width: 1401px) {
  [data-theme="boceto"] .granel-card .formulacion-layout {
    grid-template-columns: minmax(0, 1.55fr) minmax(420px, 1fr) !important;
  }
}

@media (min-width: 601px) {
  [data-theme="boceto"] .granel-card .unified-right-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  [data-theme="boceto"] .granel-card .unified-col-summary {
    border-left: 1px dashed rgba(33, 26, 21, 0.3) !important;
    padding-left: 8px !important;
  }
}

[data-theme="boceto"] .summary-item {
  border-width: 1px !important;
  background: transparent !important;
}

[data-theme="boceto"] .btn,
[data-theme="boceto"] .btn-add-card,
[data-theme="boceto"] .btn-add-mo,
[data-theme="boceto"] .toolbar-btn,
[data-theme="boceto"] .mode-btn {
  box-shadow: var(--shadow-sm) !important;
}

[data-theme="boceto"] .btn:hover,
[data-theme="boceto"] .btn-add-card:hover,
[data-theme="boceto"] .btn-add-mo:hover,
[data-theme="boceto"] .toolbar-btn:hover,
[data-theme="boceto"] .mode-btn:hover {
  box-shadow: var(--shadow-md) !important;
}

@media (max-width: 1400px) {
  [data-theme="boceto"] .summary-section {
    padding: 9px 10px !important;
  }
}

[data-theme="boceto"] .granel-card .kpi-highlight {
  margin-top: 10px !important;
}

[data-theme="boceto"] .granel-card .summary-section .search-container {
  margin-bottom: 8px !important;
}

[data-theme="boceto"] .granel-card .summary-section .btn-add-mo {
  padding: 6px 8px !important;
}

[data-theme="boceto"] .mo-data-card {
  padding: 10px !important;
  margin-bottom: 8px !important;
}

[data-theme="boceto"] .mo-card-header {
  padding-bottom: 6px !important;
  margin-bottom: 2px !important;
}

@media (min-width: 601px) and (max-width: 1400px) {
  [data-theme="boceto"] .unified-col-summary {
    border-left: 1.5px dashed rgba(33, 26, 21, 0.3) !important;
    border-top: none !important;
    padding: 0 0 0 10px !important;
  }

  [data-theme="boceto"] .granel-card .unified-col-summary {
    padding-left: 8px !important;
  }
}

@media (max-width: 600px) {
  [data-theme="boceto"] .granel-card .formulacion-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  [data-theme="boceto"] .unified-right-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  [data-theme="boceto"] .granel-card .unified-right-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  [data-theme="boceto"] .unified-col-summary {
    border-left: none !important;
    border-top: 1.5px dashed rgba(33, 26, 21, 0.3) !important;
    padding: 10px 0 0 !important;
  }

  [data-theme="boceto"] .granel-card .unified-col-summary {
    border-left: none !important;
    border-top: 1px dashed rgba(33, 26, 21, 0.22) !important;
    padding: 8px 0 0 !important;
  }

  [data-theme="boceto"] body {
    background-attachment: scroll !important;
  }
}

[data-theme="boceto"] .quote-status {
  border: 1.5px solid var(--ink-black) !important;
  border-radius: 5px !important;
  box-shadow: 1px 1px 0 var(--ink-black) !important;
  font-family: var(--font-data) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  padding: 2px 6px !important;
  text-transform: uppercase !important;
}

[data-theme="boceto"] .quote-status--unquoted {
  background: rgba(255, 125, 0, 0.16) !important;
  color: #742a00 !important;
}

[data-theme="boceto"] .quote-status--quoting {
  background: rgba(255, 209, 102, 0.38) !important;
  color: var(--ink-black) !important;
}

/* ==========================================================================
   ADAPTACIONES DE TEMÁTICA BOCETO: DISTINCIONES DIBUJADAS Y ARMONIOSAS
   ========================================================================== */
[data-theme="boceto"] .pill-purple .quick-nav-pill-dot {
  background: #7c2d12 !important;
}
[data-theme="boceto"] .pill-blue .quick-nav-pill-dot {
  background: #1e3a8a !important;
}
[data-theme="boceto"] .pill-teal .quick-nav-pill-dot {
  background: #065f46 !important;
}

[data-theme="boceto"] .btn-mo-predict {
  background: #fffaf0 !important;
  color: #7c2d12 !important;
  border: 1.5px solid #7c2d12 !important;
  box-shadow: 2px 2px 0 #7c2d12 !important;
}
[data-theme="boceto"] .btn-mo-predict:hover {
  background: #7c2d12 !important;
  color: #ffffff !important;
}
[data-theme="boceto"] .btn-mo-escalera {
  background: #f0f9ff !important;
  color: #0369a1 !important;
  border: 1.5px solid #0369a1 !important;
  box-shadow: 2px 2px 0 #0369a1 !important;
}
[data-theme="boceto"] .btn-mo-escalera:hover {
  background: #0369a1 !important;
  color: #ffffff !important;
}