@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Fredoka:wght@400;500;600;700&display=swap');

/* ==========================================================================
   TEMA: POP-ART / RETRO CREAM (Basado en la referencia del usuario)
   ========================================================================== */

:root {
  /* Variables Base Pop-Art */
  --pop-bg: #FFF4F0;          /* Fondo crema suave */
  --pop-card: #FFFFFF;        /* Tarjetas blancas */
  --pop-text: #2D1E2F;        /* Texto oscuro (Casi negro) */
  --pop-muted: #8E8390;       /* Texto secundario */
  
  /* Colores de Acento */
  --pop-red: #F05A5B;         /* Rojo Coral para títulos y bordes */
  --pop-yellow: #E69500;      /* Amarillo vibrante para botones/highlights */
  --pop-blue: #457B9D;        /* Azul retro */
  --pop-border: rgba(240, 90, 91, 0.3); /* Borde suave rojo */

  /* Tipografía */
  --font-pop-title: 'Fredoka One', cursive;
  --font-pop-body: 'Fredoka', sans-serif;

  /* =========================================================
     MAPEO AL COTIZADOR (Sobrescribiendo variables nativas)
     ========================================================= */
  --background: var(--pop-bg) !important;
  --foreground: var(--pop-text) !important;
  --card: var(--pop-card) !important;
  --card-foreground: var(--pop-text) !important;
  --muted: #FFF0EB !important;
  --muted-foreground: var(--pop-muted) !important;
  --border: var(--pop-border) !important;
  --input: #FFFFFF !important;
  --ring: var(--pop-red) !important;
  
  --primary: var(--pop-yellow) !important;
  --primary-hover: #FFC436 !important;
  --primary-foreground: var(--pop-text) !important;
  
  --radius-sm: 0.75rem !important;
  --radius-md: 1.5rem !important;
  --radius-lg: 2rem !important;
  
  --font-sans: var(--font-pop-body) !important;
  --font-heading: var(--font-pop-title) !important;

  /* Sombras Sólidas Pop-Art */
  --shadow-sm: 2px 2px 0px rgba(240, 90, 91, 0.15) !important;
  --shadow-md: 4px 4px 0px rgba(240, 90, 91, 0.2) !important;
  --shadow-lg: 6px 6px 0px rgba(240, 90, 91, 0.1) !important;
}

/* ==========================================================================
   ESTILOS GLOBALES Y COMPONENTES
   ========================================================================== */

body {
  background-color: var(--background) !important;
  color: var(--foreground) !important;
  font-family: var(--font-sans) !important;
  /* Eliminar los orbes oscuros anteriores */
      }
body::before, body::after { display: none !important; }

/* Tipografía de Títulos (Letra gordita y redondeada como la Imagen 3) */
h1, h2, h3, .card-title, .summary-title, .drawer-title {
  font-family: var(--font-pop-title) !important;
  color: var(--pop-text) !important;
  letter-spacing: 0.5px !important;
  font-weight: normal !important;
}

h1 {
  color: var(--pop-text) !important;
  font-size: 2.2rem !important;
  text-shadow: 3px 3px 0px var(--pop-red) !important;
  -webkit-text-stroke: 1px var(--pop-text);
  background: none !important;
  -webkit-background-clip: unset !important;
}

h3.summary-title {
  color: var(--pop-red) !important;
  font-size: 1.25rem !important;
  text-transform: none !important;
  background: transparent !important;
  display: flex !important;
  padding: 0 !important;
  margin-bottom: 12px !important;
}

/* Tarjetas (Cards estilo Imagen 2) */
.card, .project-info-bar, .drawer-panel {
  background: var(--card) !important;
  border: 2px solid var(--pop-red) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 5px 5px 0px rgba(240, 90, 91, 0.15) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.app-header {
  background: rgba(255, 244, 240, 0.9) !important;
  backdrop-filter: blur(10px) !important;
  border-bottom: 2px solid var(--pop-border) !important;
  box-shadow: none !important;
}

.card-header {
  border-bottom: 2px dashed var(--pop-border) !important;
}

/* Fix para secciones internas (Resumen, Mano de Obra) para darles más espacio */
.summary-section {
  background: #FFF !important;
  border: 2px dashed var(--pop-border) !important;
  box-shadow: none !important;
  padding: 20px !important; /* Más espacio interior */
  border-radius: 12px !important;
  margin-bottom: 16px !important;
}

.unified-col-summary {
  background: transparent !important;
  border: none !important;
  padding-left: 20px !important; /* Espacio extra en la columna derecha */
}

/* Botones (Botones pastilla estilo retro) */
.btn-primary {
  background: var(--pop-yellow) !important;
  color: var(--pop-text) !important;
  border: 2px solid var(--pop-text) !important;
  border-radius: 50px !important; /* Forma de píldora */
  box-shadow: 3px 3px 0px var(--pop-text) !important;
  font-family: var(--font-pop-title) !important;
  text-transform: none !important;
  transition: all 0.2s ease !important;
}

.btn-primary:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 5px 5px 0px var(--pop-text) !important;
}

.btn-primary:active {
  transform: translate(2px, 2px) !important;
  box-shadow: 1px 1px 0px var(--pop-text) !important;
}

.btn-ghost, .toolbar-btn {
  color: var(--pop-text) !important;
  background: var(--pop-card) !important;
  border: 2px solid var(--pop-border) !important;
  border-radius: 50px !important;
  font-family: var(--font-pop-title) !important;
}

.btn-ghost:hover, .toolbar-btn:hover {
  background: var(--pop-red) !important;
  color: #FFF !important;
  border-color: var(--pop-red) !important;
  box-shadow: 3px 3px 0px rgba(240, 90, 91, 0.3) !important;
}

/* Botones de Agregar Operación y Predecir MOD */
.btn-add-mo {
  background: #FFF !important;
  border: 2px dashed var(--pop-border) !important;
  border-radius: 50px !important;
  color: var(--pop-red) !important;
  font-family: var(--font-pop-title) !important;
  font-size: 0.85rem !important;
  transition: all 0.2s ease !important;
  box-shadow: none !important;
}

.btn-add-mo:hover {
  background: var(--pop-red) !important;
  color: #FFF !important;
  border: 2px solid var(--pop-red) !important;
  box-shadow: 3px 3px 0px rgba(240, 90, 91, 0.2) !important;
  transform: translateY(-2px) !important;
}

/* Inputs y Selectores - Evitar doble borde en el buscador */
.info-input, .search-box {
  background: #FFFFFF !important;
  border: 2px solid var(--pop-border) !important;
  color: var(--pop-text) !important;
  border-radius: 12px !important;
  font-family: var(--font-pop-body) !important;
  font-weight: 500 !important;
}

.search-input {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.info-input:focus, .search-box:focus-within {
  border-color: var(--pop-red) !important;
  box-shadow: 0 0 0 3px rgba(240, 90, 91, 0.2) !important;
}

/* Badges y Etiquetas */
.badge {
  background: var(--pop-yellow) !important;
  color: var(--pop-text) !important;
  border: 2px solid var(--pop-text) !important;
  box-shadow: 2px 2px 0px var(--pop-text) !important;
  font-family: var(--font-pop-title) !important;
  border-radius: 50px !important;
  padding: 0.3rem 1rem !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Tablas */
.formulacion-table th {
  background: #FFF4F0 !important;
  font-family: var(--font-pop-title) !important;
  color: var(--pop-red) !important;
  border-bottom: 2px solid var(--pop-red) !important;
  text-transform: uppercase;
}

.formulacion-table td {
  border-bottom: 1px dashed var(--pop-border) !important;
  font-family: var(--font-pop-body) !important;
  font-weight: 500 !important;
}

/* Scrollbar personalizada para el tema */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--pop-bg);
}
::-webkit-scrollbar-thumb {
  background: var(--pop-red);
  border-radius: 10px;
  border: 2px solid var(--pop-bg);
}