/* =========================================================
   screen-nuevo-producto.css
   Objetivo: replicar EXACTAMENTE los componentes custom del HTML de Stitch
   que en el export original venían por @layer components + @apply.

   Importante:
   - CSS puro (sin @apply)
   - No tocar estilos globales
   - Solo define clases usadas por esta pantalla: .input-minimal, .card-premium
   ========================================================= */

/* ===============
   input-minimal
   (equivalente a:
   w-full bg-transparent border-t-0 border-l-0 border-r-0 border-b border-slate-200
   dark:border-slate-700 px-0 py-2 focus:ring-0 focus:border-primary transition-colors
   text-slate-900 dark:text-white placeholder-slate-400)
   =============== */

.input-minimal {
  width: 100%;
  background-color: transparent;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 1px solid rgb(226 232 240); /* slate-200 */
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  outline: none;
  box-shadow: none;
  transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
  color: rgb(15 23 42); /* slate-900 */
}

.dark .input-minimal {
  border-bottom-color: rgb(51 65 85); /* slate-700 */
  color: rgb(255 255 255);
}

.input-minimal::placeholder {
  color: rgb(148 163 184); /* slate-400 */
}

.input-minimal:focus {
  outline: none;
  box-shadow: none;
  border-bottom-color: rgb(19 127 236); /* primary */
}

/* Selects: en el export original, el plugin forms aportaba el ícono.
   Como usamos appearance-none en el markup, agregamos el caret por CSS
   (solo para select.input-minimal) para que quede idéntico.
*/
select.input-minimal {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 2rem;
  background-repeat: no-repeat;
  background-position: right 0.25rem center;
  background-size: 1.25em 1.25em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
}

.dark select.input-minimal {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
}

/* ===============
   card-premium
   (equivalente a:
   bg-white dark:bg-[#151c2b] rounded-xl p-8 shadow-sm
   border border-slate-100 dark:border-slate-800)
   =============== */

.card-premium {
  background-color: rgb(255 255 255);
  border-radius: 0.75rem; /* rounded-xl */
  padding: 2rem; /* p-8 */
  border: 1px solid rgb(241 245 249); /* slate-100 */
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.dark .card-premium {
  background-color: rgb(21 28 43); /* #151c2b */
  border-color: rgb(30 41 59); /* slate-800 */
}