/* ── Reset & Base ─────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background-color: #f5f5f5; /* background-image e background-size impostati inline da header.php sul */ color: #333; line-height: 1.6; } a { color: #667eea; text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; height: auto; } /* NOTA: lo stile di HEADER (banner logo/banner2) e NAVBAR ora vive per intero inline dentro templates/header.php (stesso identico pattern degli altri software ICG: Ricette del Cassetto, Fotolibri, ecc.), apposta per evitare disallineamenti quando questo file CSS e header.php vengono aggiornati in momenti diversi. Se in futuro serve modificarlo, tocca header.php. */ /* ── Main ─────────────────────────────────────────────────────────────── */ .site-main { max-width: 1100px; margin: 8px auto; padding: 0 24px; box-sizing: border-box; } /* ── Pulsante outline (stile QuizMaestro, stessi colori) ──────────────── */ .btn-outline-icg { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: 8px; font-size: .9rem; font-weight: 600; background: transparent; border: 2px solid #dce8dc; color: #1a2e1a; text-decoration: none; cursor: pointer; transition: all .15s; white-space: nowrap; } .btn-outline-icg:hover { border-color: #2e7d32; color: #2e7d32; background: #e8f5e9; text-decoration: none; } /* ── Footer ───────────────────────────────────────────────────────────── */ .site-footer { text-align: center; padding: 18px 24px; background: #fff; color: #888; font-size: .85rem; margin: 24px auto 24px; max-width: 1200px; box-sizing: border-box; padding-left: 24px; padding-right: 24px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.06); } /* ── Grid ricette ─────────────────────────────────────────────────────── */ /* ── Griglia ricette: stile Quiz Maestro ─────────────────────────── */ .ricette-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 24px; } .ricetta-card { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,.07); border: 1px solid #e5e7eb; transition: transform .2s, box-shadow .2s; display: flex; flex-direction: column; text-decoration: none; color: inherit; } .ricetta-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,.13); text-decoration: none; } .ricetta-card__img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; } .ricetta-card__img-placeholder { width: 100%; aspect-ratio: 16/9; background: linear-gradient(135deg,#ede9fe,#c4b5fd); display: flex; align-items: center; justify-content: center; font-size: 3rem; } .ricetta-card__body { padding: 14px 16px; flex: 1; display: flex; flex-direction: column; gap: 8px; } .ricetta-card__title { font-size: 1rem; font-weight: 700; color: #1e3a5f; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ricetta-card__meta { font-size: .78rem; color: #6b7280; display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; } .ricetta-card__badge { background: #ede9fe; color: #5b21b6; padding: 2px 8px; border-radius: 999px; font-size: .74rem; font-weight: 700; } /* Mobile: 1 colonna */ @media(max-width:640px) { .ricette-grid { grid-template-columns: 1fr; } } /* Tablet: 2 colonne */ @media(min-width:641px) and (max-width:900px) { .ricette-grid { grid-template-columns: repeat(2,1fr); } } /* ── Badge stato ───────────────────────────────────────────────────────── */ .badge-pending { background: #fff3cd; color: #856404; padding: 2px 8px; border-radius: 20px; font-size: .78rem; } .badge-published { background: #d4edda; color: #155724; padding: 2px 8px; border-radius: 20px; font-size: .78rem; } .badge-draft { background: #e2e3e5; color: #383d41; padding: 2px 8px; border-radius: 20px; font-size: .78rem; } /* ── Pagina ricetta singola ────────────────────────────────────────────── */ .ricetta-single { max-width: 860px; margin: auto; } .ricetta-single h1 { font-size: 2rem; margin-bottom: 20px; color: #222; } /* ── Form login/registrazione ─────────────────────────────────────────── */ .auth-form { max-width: 440px; margin: 60px auto; background: #fff; padding: 36px; border-radius: 14px; box-shadow: 0 4px 20px rgba(0,0,0,.1); } .auth-form h2 { margin-bottom: 24px; color: #667eea; } .form-row { margin-bottom: 18px; } .form-row label { display: block; font-weight: 600; margin-bottom: 6px; color: #444; font-size: .9rem; } .form-row input:not([type=radio]):not([type=checkbox]):not([type=color]):not([type=file]), .form-row select, .form-row textarea { width: 100%; padding: 10px 12px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: .95rem; transition: border-color .2s; } .form-row input[type=radio], .form-row input[type=checkbox] { width: auto; height: auto; } .form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline: none; border-color: #667eea; } .btn { display: inline-block; padding: 11px 26px; border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all .2s; text-decoration: none; } .btn-primary { background: linear-gradient(135deg,#667eea 0%,#764ba2 100%); color: #fff; width: 100%; text-align: center; } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(102,126,234,.4); text-decoration: none; } .btn-secondary { background: #6c757d; color: #fff; } .btn-success { background: #28a745; color: #fff; } .btn-danger { background: #dc3545; color: #fff; } .btn-sm { padding: 6px 14px; font-size: .85rem; } /* ── Alert messages ────────────────────────────────────────────────────── */ .alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: .93rem; } .alert-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; } .alert-error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; } .alert-warning { background: #fff3cd; color: #856404; border: 1px solid #ffeeba; } .alert-info { background: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; } /* ── Lightbox (del render ricetta) ────────────────────────────────────── */ .ricetta-icg-lightbox-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.85); z-index:9999; justify-content:center; align-items:center; } .ricetta-icg-lightbox-overlay.active { display:flex; } .ricetta-icg-lightbox-close { position:absolute; top:20px; right:30px; color:#fff; font-size:2.5rem; cursor:pointer; line-height:1; } .ricetta-icg-lightbox-content { display:flex; align-items:center; justify-content:center; } /* ── Paginazione ────────────────────────────────────────────────────────── */ .pagination { display:flex; gap:8px; justify-content:center; margin-top:32px; flex-wrap:wrap; } .pagination a, .pagination span { padding:8px 14px; border:1px solid #ddd; border-radius:6px; color:#667eea; background:#fff; font-size:.9rem; } .pagination .current { background:#667eea; color:#fff; border-color:#667eea; } .pagination a:hover { background:#f0f4ff; text-decoration:none; } /* ── Admin panel ─────────────────────────────────────────────────────────── */ .admin-table { width:100%; border-collapse:collapse; background:#fff; border-radius:10px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.06); } .admin-table th { background:#667eea; color:#fff; padding:12px 16px; text-align:left; font-size:.88rem; } .admin-table td { padding:12px 16px; border-bottom:1px solid #f0f0f0; font-size:.9rem; vertical-align:middle; } .admin-table tr:last-child td { border-bottom:none; } .admin-table tr:hover td { background:#fafbff; } /* ── Filtri ricerca ───────────────────────────────────────────────────── */ .filters-bar { display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:24px; background:#fff; padding:16px 20px; border-radius:10px; box-shadow:0 1px 4px rgba(0,0,0,.07); } .filters-bar input, .filters-bar select { padding:8px 12px; border:2px solid #e0e0e0; border-radius:6px; font-size:.9rem; } .filters-bar input:focus, .filters-bar select:focus { outline:none; border-color:#667eea; } /* ── Form invio ricetta ───────────────────────────────────────────────── */ .icg-ricetta-form { max-width:800px; margin:40px auto; padding:30px; background:#fff; border-radius:15px; box-shadow:0 4px 20px rgba(0,0,0,.1); } .icg-form-row { margin-bottom:25px; } .icg-form-row label { display:block; margin-bottom:8px; font-weight:600; color:#333; } .icg-form-row input[type=text], .icg-form-row input[type=number], .icg-form-row input[type=email], .icg-form-row select, .icg-form-row textarea { width:100%; padding:12px; border:2px solid #e0e0e0; border-radius:8px; font-size:15px; transition:border .3s; } .icg-form-row input:focus, .icg-form-row select:focus, .icg-form-row textarea:focus { outline:none; border-color:#667eea; } .sezione-ingredienti, .passo-blocco { background:#f9f9f9; padding:20px; border-radius:10px; margin-bottom:15px; position:relative; } .ingrediente-row { display:flex; gap:10px; margin-bottom:8px; align-items:center; } .ingrediente-row input { flex:1; } .drag-handle, .drag-handle-small { cursor:move !important; color:#999; padding:5px; user-select:none; font-size:20px; } .sortable-ghost { opacity:.4; background:#e3f2fd !important; border:2px dashed #667eea !important; } .icg-form-success { background:#d4edda; color:#155724; padding:15px; border-radius:8px; border:1px solid #c3e6cb; margin-bottom:20px; } .icg-error { background:#f8d7da; color:#721c24; padding:15px; border-radius:8px; border:1px solid #f5c6cb; margin-bottom:20px; } .icg-form-message { padding:20px; border-radius:8px; margin-bottom:20px; } @media (max-width:768px) { .icg-ricetta-form { padding:15px; margin:10px auto; } .sezione-ingredienti, .passo-blocco { padding:15px; } .drag-handle, .drag-handle-small { display:none !important; } /* Header responsive: ora gestito interamente in header.php */ .site-footer { margin: 16px 12px; border-radius: 8px; } div[style*="grid-template-columns"] { grid-template-columns:1fr !important; } input[type=text], input[type=number], input[type=email], textarea, select { font-size:16px !important; } } @media (max-width: 640px) { .site-footer { margin: 12px 8px; } } /* ============================================================= FIX MARGINI LATERALI — replica larghezze sito WP / Book / Rivista Aggiunto per uniformare la visualizzazione desktop e mobile ============================================================= */ /* Contenitore principale: padding laterale come Book/Rivista */ .site-main { padding-left: 16px !important; padding-right: 16px !important; box-sizing: border-box !important; } /* Griglia ricette: max 3 colonne desktop, 2 tablet, 1 mobile */ .ricette-grid { grid-template-columns: repeat(3, 1fr) !important; } @media (max-width: 900px) { .site-main { padding-left: 14px !important; padding-right: 14px !important; } .ricette-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 480px) { .site-main { padding-left: 10px !important; padding-right: 10px !important; } .ricette-grid { grid-template-columns: 1fr !important; } } /* Barra filtri e intestazione pagina: stesso margine */ .filters-bar, .page-header, .pagination { box-sizing: border-box !important; } /* Footer: border-radius e centratura come WP/Book/Rivista */ .site-footer { max-width: 1200px !important; width: 95% !important; margin: 5px auto !important; border-radius: 20px !important; box-sizing: border-box !important; } /* Contenitore e banner responsive */ @media (max-width: 768px) { .site-main { padding: 0 16px; } } @media (max-width: 480px) { .site-main { padding: 0 12px; } } /* (il fix del margine tra header e banner ora è già corretto by design nel CSS incorporato in header.php: non serve più questa correzione) */ /* ══════════════════════════════════════════════════════════════════════════ ICG MOLECOLE & SOSTANZE — stili specifici ══════════════════════════════════════════════════════════════════════════ */ .icg-page-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px;flex-wrap:wrap;gap:16px} .icg-page-head h1{font-size:1.8rem;margin-bottom:6px} .icg-page-head p{color:#777;margin:0} .icg-tabs{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap} .icg-tab{padding:10px 20px;border-radius:10px;background:#fff;border:2px solid #e0e0e0;cursor:pointer;font-weight:700;font-size:.92rem;color:#555;text-decoration:none;transition:all .15s;display:inline-flex;align-items:center;gap:8px} .icg-tab:hover{border-color:#9575cd;color:#4a148c;text-decoration:none} .icg-tab.active{background:#4a148c;border-color:#4a148c;color:#fff} .icg-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:18px} .icg-toolbar input[type=text]{flex:1;min-width:200px;padding:10px 14px;border:2px solid #e0e0e0;border-radius:8px;font-size:.92rem} .btn-icg{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:8px;border:2px solid transparent;background:#4a148c;color:#fff;font-weight:700;font-size:.88rem;cursor:pointer;text-decoration:none;white-space:nowrap} .btn-icg:hover{background:#6a1b9a;text-decoration:none;color:#fff} .btn-icg-outline{background:#fff;border:2px solid #4a148c;color:#4a148c} .btn-icg-outline:hover{background:#f3e5f5;color:#4a148c} .icg-table-wrap{overflow-x:hidden;background:#fff;border-radius:12px;box-shadow:0 3px 12px rgba(0,0,0,.08);margin-bottom:28px} table.icg-table{width:100%;border-collapse:collapse;font-size:.88rem;table-layout:fixed} table.icg-table td,table.icg-table th{word-wrap:break-word;overflow-wrap:break-word;word-break:break-word} table.icg-table thead th{background:#4a148c;color:#fff;text-align:left;padding:12px 14px;font-weight:700;position:sticky;top:0} table.icg-table td{padding:12px 14px;border-bottom:1px solid #eee;vertical-align:top} table.icg-table tbody tr:hover{background:#faf7fd} table.icg-table td.icg-td-gruppo{font-weight:800;color:#4a148c;background:#f8f4fc;border-right:3px solid #ce93d8;white-space:normal} .icg-group-title{font-size:1.05rem;font-weight:800;color:#4a148c;margin:26px 0 10px;padding-bottom:6px;border-bottom:3px solid #ce93d8;display:flex;align-items:center;gap:8px} .icg-empty{padding:30px;text-align:center;color:#888;background:#fafafa;border-radius:12px} /* ── Form invio ── */ .icg-form-box{background:#fff;border-radius:14px;padding:26px 24px;box-shadow:0 3px 14px rgba(0,0,0,.08);max-width:760px;margin:0 auto} .icg-form-box h1{font-size:1.5rem;margin-bottom:6px;color:#4a148c} .icg-form-box .sub{color:#777;margin-bottom:22px;font-size:.9rem} .icg-frow{margin-bottom:16px} .icg-frow label{display:block;font-weight:700;font-size:.85rem;color:#444;margin-bottom:5px} .icg-frow label em{color:#c62828;font-style:normal} .icg-frow input[type=text],.icg-frow input[type=email],.icg-frow select,.icg-frow textarea{ width:100%;padding:10px 12px;border:2px solid #e0e0e0;border-radius:8px;font-size:.92rem;font-family:inherit;box-sizing:border-box } .icg-frow input:focus,.icg-frow select:focus,.icg-frow textarea:focus{outline:none;border-color:#4a148c} .icg-frow textarea{resize:vertical;min-height:80px} .icg-g2{display:grid;grid-template-columns:1fr 1fr;gap:14px} @media(max-width:560px){.icg-g2{grid-template-columns:1fr}} .icg-type-switch{display:flex;gap:10px;margin-bottom:22px} .icg-type-btn{flex:1;text-align:center;padding:14px;border-radius:10px;border:2px solid #e0e0e0;cursor:pointer;font-weight:700;color:#555;background:#fafafa;text-decoration:none} .icg-type-btn.active{border-color:#4a148c;background:#f3e5f5;color:#4a148c} .icg-alert{padding:12px 16px;border-radius:8px;margin-bottom:18px;font-size:.88rem} .icg-alert-error{background:#ffebee;border:1.5px solid #ef9a9a;color:#b71c1c} .icg-alert-success{background:#e8f5e9;border:1.5px solid #a5d6a7;color:#1b5e20} .icg-datalist-note{font-size:.76rem;color:#888;margin-top:4px} /* ── Admin ── */ .icg-admin-wrap{max-width:1300px;margin:0 auto} .icg-admin-nav{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap} .icg-admin-nav a{padding:9px 16px;border-radius:8px;background:#fff;border:2px solid #e0e0e0;color:#555;text-decoration:none;font-weight:700;font-size:.85rem} .icg-admin-nav a.active{background:#4a148c;border-color:#4a148c;color:#fff} .icg-pending-card{background:#fff;border-radius:12px;padding:16px 18px;margin-bottom:14px;box-shadow:0 2px 8px rgba(0,0,0,.06);border-left:5px solid #ff9800} .icg-pending-card .meta{font-size:.78rem;color:#888;margin-bottom:10px} .icg-pending-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-bottom:14px;font-size:.86rem} .icg-pending-grid div strong{display:block;color:#555;font-size:.72rem;text-transform:uppercase;letter-spacing:.03em;margin-bottom:2px} .icg-pending-actions{display:flex;gap:8px;flex-wrap:wrap} .btn-approve{background:#2e7d32} .btn-reject{background:#c62828} .btn-edit{background:#5c6bc0} .icg-cat-manage{background:#fff;border-radius:12px;padding:18px;margin-bottom:20px;box-shadow:0 2px 8px rgba(0,0,0,.06)} .icg-cat-pill{display:inline-flex;align-items:center;gap:6px;background:#f3e5f5;color:#4a148c;padding:5px 12px;border-radius:16px;font-size:.8rem;margin:3px 4px 3px 0;font-weight:600} .icg-cat-pill button{background:none;border:none;color:#c62828;cursor:pointer;font-size:.9rem;padding:0;line-height:1} /* ── Descrizione troncata con "continua a leggere" ── */ .icg-trnc{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;line-height:1.45;font-size:.85rem;color:#444;position:relative} .icg-trnc.icg-trnc-open{display:block;-webkit-line-clamp:unset!important} .icg-trnc-btn{background:none;border:none;color:#4a148c;font-weight:700;font-size:.76rem;cursor:pointer;padding:3px 0 0;text-decoration:underline} .icg-trnc-btn:hover{color:#7b1fa2} /* Popup all'hover come alternativa rapida su desktop (tooltip col testo intero) */ td:has(.icg-trnc){position:relative} /* ── Ricerca per alimento ── */ .icg-food-search{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,#4a148c,#6a1b9a);border-radius:14px;padding:16px 20px;margin-bottom:22px;flex-wrap:wrap;box-shadow:0 3px 12px rgba(74,20,140,.25)} .icg-food-search__icon{font-size:1.8rem} .icg-food-search__text{color:#fff;display:flex;flex-direction:column;min-width:160px;flex:0 0 auto} .icg-food-search__text strong{font-size:.95rem} .icg-food-search__text span{font-size:.74rem;opacity:.85} .icg-food-search input[type=text]{flex:1;min-width:180px;padding:10px 14px;border:none;border-radius:8px;font-size:.92rem} .icg-food-search .btn-icg{background:#ffca28;color:#4a148c} .icg-food-search .btn-icg:hover{background:#ffd54f;color:#4a148c} /* ── Intestazioni tabella ordinabili ── */ .icg-sort-hint{font-size:.78rem;color:#888;margin:-8px 0 12px} th.icg-th-sortable{cursor:pointer;user-select:none} th.icg-th-sortable:hover{background:#5c1fa0} .icg-sort-arrow{font-size:.7rem;margin-left:4px} /* ── Formula di struttura: testo compatto + popup all'hover ── */ .icg-formula-bruta{font-family:'Courier New',monospace;font-size:.82rem;font-weight:700;color:#4a148c;white-space:nowrap} .icg-formula-hover{position:relative;display:inline-block} .icg-formula-trigger{cursor:help;border-bottom:1px dotted #4a148c} .icg-formula-popup{ display:none;position:absolute;z-index:60;top:100%;left:50%;transform:translateX(-50%); margin-top:6px;background:#fff;border:2px solid #4a148c;border-radius:10px;padding:10px; box-shadow:0 6px 24px rgba(0,0,0,.28);white-space:nowrap; } .icg-formula-hover:hover .icg-formula-popup, .icg-formula-popup.icg-popup-show{display:block} .icg-formula-popup svg{max-width:220px;max-height:150px;display:block} .icg-formula-popup img{max-width:220px;max-height:150px;display:block;border-radius:4px} .icg-formula-canvas{background:#fafafa;border:2px solid #e0e0e0;border-radius:8px;cursor:crosshair} .icg-formula-tools{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px} .icg-formula-tools button{background:#eee;border:1px solid #ddd;border-radius:6px;padding:6px 10px;font-size:.76rem;cursor:pointer} .icg-formula-tools button:hover{background:#e0e0e0} /* ── Tooltip sulle intestazioni (spiega il significato della colonna) ── */ .icg-th-nota{display:inline-flex;align-items:center;gap:4px} .icg-th-info{position:relative;display:inline-flex;width:15px;height:15px;border-radius:50%;background:rgba(255,255,255,.25);align-items:center;justify-content:center;font-size:.62rem;cursor:help;font-weight:400} .icg-th-tooltip{display:none;position:absolute;z-index:70;top:100%;left:0;margin-top:6px;background:#fff;color:#333;border:2px solid #4a148c;border-radius:8px;padding:8px 10px;font-size:.74rem;font-weight:400;line-height:1.4;white-space:normal;width:220px;box-shadow:0 6px 20px rgba(0,0,0,.25)} .icg-th-info:hover .icg-th-tooltip, .icg-th-info:focus .icg-th-tooltip, .icg-th-tooltip.icg-popup-show{display:block} /* ── Formule impilate (più di una per cella) ── */ .icg-formula-stack{display:inline-block;line-height:1.2} .icg-formula-stack span{display:block} /* ── Tabelle più compatte quando ci sono molte colonne ── */ table.icg-table{font-size:.82rem} table.icg-table td{padding:9px 10px} table.icg-table thead th{padding:10px 10px} /* ── Nota lunga visibile SOLO all'hover (Fonte di origine, Presenza) ── */ .icg-hover-wrap{position:relative;display:inline-block;cursor:help} .icg-hover-trigger{border-bottom:1px dotted #4a148c} .icg-hover-popup{ display:none;position:absolute;z-index:65;top:100%;left:0;margin-top:6px; background:#fff;color:#333;border:2px solid #4a148c;border-radius:8px; padding:10px 12px;font-size:.8rem;line-height:1.45;width:240px;white-space:normal; box-shadow:0 6px 20px rgba(0,0,0,.25); } .icg-hover-wrap:hover .icg-hover-popup, .icg-hover-popup.icg-popup-show{display:block} /* ── Paginazione ── */ .icg-count-hint{font-size:.8rem;color:#777;margin-bottom:10px} .icg-pagination{display:flex;justify-content:center;align-items:center;gap:6px;flex-wrap:wrap;margin:20px 0 30px} .icg-pg-btn,.icg-pg-num{padding:8px 14px;border-radius:8px;background:#fff;border:2px solid #e0e0e0;color:#4a148c;font-weight:700;font-size:.85rem;text-decoration:none} .icg-pg-btn:hover,.icg-pg-num:hover{border-color:#9575cd;text-decoration:none} .icg-pg-num{padding:8px 13px;min-width:38px;text-align:center} .icg-pg-active{background:#4a148c;border-color:#4a148c;color:#fff} .icg-pg-disabled{color:#bbb;cursor:default} .icg-pg-disabled:hover{border-color:#e0e0e0} .icg-pg-dots{color:#aaa;padding:0 4px} /* ── Link di ordinamento nelle intestazioni (query reale sul database) ── */ .icg-th-sortlink{color:#fff;text-decoration:none;font-weight:700;display:inline-flex;align-items:center;gap:2px} .icg-th-sortlink:hover{text-decoration:underline;color:#fff} /* ── Celle e badge cliccabili per filtrare la tabella ── */ .icg-cell-filter{color:inherit;text-decoration:none;border-bottom:1px dotted currentColor;cursor:pointer} .icg-cell-filter:hover{text-decoration:none;background:rgba(74,20,140,.08)} .icg-filtro-attivo{background:#f3e5f5;border:1.5px solid #ce93d8;color:#4a148c;padding:9px 14px;border-radius:8px;font-size:.85rem;margin-bottom:14px} .icg-filtro-attivo a{color:#c62828;font-weight:700;margin-left:10px;text-decoration:none} .icg-filtro-attivo a:hover{text-decoration:underline} /* ── Pillole alimento cliccabili (dentro Presenza/Fonte) ── */ .icg-food-pill{display:inline-block;background:#f3e5f5;color:#4a148c;padding:2px 9px;border-radius:12px;font-size:.76rem;font-weight:600;text-decoration:none;margin:1px 2px 1px 0} .icg-food-pill:hover{background:#4a148c;color:#fff;text-decoration:none} .icg-food-pill-more{background:transparent;border:1.5px dashed #9c27b0;color:#7b1fa2;cursor:help} .icg-food-pill-more:hover{background:#7b1fa2;border-color:#7b1fa2;color:#fff} /* ── Selettore sostanze con filtro (form "Inserisci alimento") ── */ .icg-selettore-sostanze{margin-bottom:22px;border:2px solid #f0f0f0;border-radius:10px;padding:14px} .icg-selettore-sostanze h3{font-size:1rem;color:#4a148c;margin-bottom:10px} .icg-filtro-lista{width:100%;padding:8px 12px;border:2px solid #e0e0e0;border-radius:8px;margin-bottom:10px;font-size:.88rem} .icg-lista-checkbox{max-height:220px;overflow-y:auto;border:1px solid #eee;border-radius:8px;padding:8px} .icg-lista-checkbox label{display:flex;align-items:center;gap:8px;padding:5px 6px;font-weight:400;cursor:pointer;font-size:.86rem;border-radius:6px} .icg-lista-checkbox label:hover{background:#faf7fd} .icg-lista-checkbox label input{width:auto} .icg-lista-checkbox small{color:#999} .icg-lista-vuota{color:#aaa;font-size:.85rem;padding:6px} /* ── Campo "aggiungi nuova sostanza" dentro il selettore ── */ .icg-nuova-sostanza{margin-top:10px;padding-top:10px;border-top:1px dashed #ddd} .icg-nuova-sostanza label{display:block;font-size:.78rem;font-weight:700;color:#555;margin-bottom:4px} .icg-nuova-sostanza input{width:100%;padding:8px 12px;border:2px solid #e0e0e0;border-radius:8px;font-size:.86rem} /* ── Colonna Nome (molecole): evidenziata come il Gruppo funzionale, colore distinto ── */ table.icg-table td.icg-td-nome{font-weight:800;background:#e0f2f1;border-right:3px solid #4db6ac;white-space:normal} .icg-nome-molecola{color:#00695c;font-size:.95rem} /* ── Barra di ricerca per nota olfattiva (colore distinto dalla ricerca alimento) ── */ .icg-odore-search{background:linear-gradient(135deg,#ad1457,#d81b60)} .icg-odore-search .btn-icg{background:#ffca28;color:#ad1457} .icg-odore-search .btn-icg:hover{background:#ffd54f;color:#ad1457} /* ── Pillole nota olfattiva (blu, distinte dalle pillole alimento viola) ── */ .icg-odore-pill{display:inline-block;background:#e1f5fe;color:#0277bd;padding:2px 9px;border-radius:12px;font-size:.76rem;font-weight:600;text-decoration:none;margin:1px 2px 1px 0} .icg-odore-pill:hover{background:#0277bd;color:#fff;text-decoration:none} .icg-odore-pill-more{background:transparent;border:1.5px dashed #0288d1;color:#01579b;cursor:help} .icg-odore-pill-more:hover{background:#01579b;border-color:#01579b;color:#fff} /* ── Testo combinato: hover per anteprima +

nativo per espandere ── */ .icg-testo-espandibile summary{cursor:pointer;list-style:none} .icg-testo-espandibile summary::-webkit-details-marker{display:none} .icg-testo-espandibile summary::after{content:"▼";color:#4a148c;font-size:.7rem;margin-left:5px;font-weight:700} .icg-testo-espandibile[open] summary::after{content:"▲"} .icg-testo-espandibile-contenuto{margin-top:6px;font-size:.86rem;color:#333;line-height:1.4} /* ── Pulsanti tipologia additivi (ricerca rapida per categoria) ── */ .icg-tipo-pill{display:inline-flex;align-items:center;gap:6px;background:#f3e5f5;color:#4a148c;padding:7px 14px;border-radius:20px;font-size:.85rem;font-weight:700;text-decoration:none;border:2px solid transparent;transition:background .15s} .icg-tipo-pill:hover{background:#e1bee7;text-decoration:none} .icg-tipo-pill.active{background:#4a148c;color:#fff} .icg-tipo-pill-n{background:rgba(255,255,255,.5);color:#4a148c;border-radius:10px;padding:1px 7px;font-size:.75rem} .icg-tipo-pill.active .icg-tipo-pill-n{background:rgba(255,255,255,.25);color:#fff} /* ── Pulsanti scheda con sottotitolo visibile (spiegazione ricerca) ── */ .icg-tab-doppia{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:8px 16px!important;line-height:1.3;text-align:center;min-height:58px;box-sizing:border-box} .icg-tabs{align-items:stretch!important} .icg-tab-titolo{font-weight:700;font-size:.92rem;text-decoration:none;color:inherit;display:block} .icg-tab-titolo:hover{text-decoration:underline} .icg-tab-sotto{font-weight:400;font-size:.68rem;opacity:.8;background:none;border:none;color:inherit;padding:0;margin:0;cursor:pointer;font-family:inherit} .icg-tab-sotto:hover{opacity:1;text-decoration:underline} .icg-tab-doppia.active .icg-tab-sotto{opacity:.9}