/* ===================================================================
   Inventario Recetas IA — Complementos al sistema de diseño Stitch
   (la mayor parte del estilo viene de Tailwind + tokens MD3 en base.html)
   =================================================================== */

.material-symbols-outlined {
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
    vertical-align: middle;
}
.icon-fill { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }

/* Sombras ambientales con tinte verde (Nivel 1 y 2 del sistema) */
.card-shadow { box-shadow: 0px 4px 20px rgba(45, 90, 39, 0.06); }
.card-shadow-hover:hover { box-shadow: 0px 8px 30px rgba(45, 90, 39, 0.12); }

.glass-effect { backdrop-filter: blur(8px); background: rgba(255, 255, 255, 0.85); }

/* Fondo culinario para la pantalla de acceso */
.culinary-bg {
    background-image:
        linear-gradient(rgba(248, 250, 249, 0.92), rgba(248, 250, 249, 0.92)),
        radial-gradient(circle at 15% 20%, rgba(45, 90, 39, 0.10), transparent 45%),
        radial-gradient(circle at 85% 15%, rgba(232, 124, 62, 0.10), transparent 40%);
    background-size: cover;
    background-position: center;
}

/* Spinner */
.spinner {
    display: inline-block; width: 18px; height: 18px;
    border: 3px solid rgba(255, 255, 255, 0.4); border-top-color: white;
    border-radius: 50%; animation: spin 0.7s linear infinite; vertical-align: middle;
}
.spinner-verde { border: 3px solid rgba(21, 66, 18, 0.2); border-top-color: #154212; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Estrellas de calificación */
.estrellas { display: inline-flex; gap: 2px; }
.estrellas span {
    cursor: pointer; font-size: 1.4rem; line-height: 1;
    color: #c2c9bb; transition: transform 0.1s, color 0.1s; user-select: none;
}
.estrellas span:hover { transform: scale(1.2); }
.estrellas span.activa { color: #ebc246; }
.estrellas.readonly span { cursor: default; }
.estrellas.readonly span:hover { transform: none; }

/* Notificaciones toast */
#toast-zona {
    position: fixed; bottom: 1.2rem; right: 1.2rem; z-index: 1000;
    display: flex; flex-direction: column; gap: 0.6rem;
}
.toast {
    min-width: 250px; max-width: 380px;
    padding: 0.9rem 1.1rem; border-radius: 0.75rem;
    background: #ffffff; border: 1px solid #c2c9bb;
    box-shadow: 0px 8px 30px rgba(45, 90, 39, 0.18);
    display: flex; align-items: center; gap: 0.65rem;
    font-family: 'Inter', sans-serif; font-size: 0.9rem; font-weight: 600; color: #191c1c;
    animation: toastIn 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.toast .ico { font-size: 1.3rem; }
.toast.ok    { border-left: 5px solid #2d5a27; }
.toast.ok .ico    { color: #2d5a27; }
.toast.error { border-left: 5px solid #ba1a1a; }
.toast.error .ico { color: #ba1a1a; }
.toast.info  { border-left: 5px solid #9d4404; }
.toast.info .ico  { color: #9d4404; }
.toast.fade  { animation: toastOut 0.3s ease forwards; }
@keyframes toastIn  { from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes toastOut { to { transform: translateX(120%); opacity: 0; } }

/* Detalles expandibles de receta */
details.receta-card summary { list-style: none; cursor: pointer; }
details.receta-card summary::-webkit-details-marker { display: none; }
.flecha { transition: transform 0.2s ease; }
details[open] .flecha { transform: rotate(180deg); }

/* Aparición suave de tarjetas */
.fade-in { animation: fadeIn 0.35s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }