/* SPDX-License-Identifier: Apache-2.0 · Copyright 2025-2026 David Clothier */
/* Cooking Chart v2 */

.cc-scroll { overflow-x: auto; overflow-y: hidden; }
.cc-svg { display: block; font-family: Inter, system-ui, sans-serif; font-size: 11px; }

.cc-axis .grid { stroke: #e7e5e4; stroke-width: 1; }
.cc-axis text { fill: #a8a29e; font-size: 10px; font-variant-numeric: tabular-nums; }
.cc-axis .axis-title { fill: #a8a29e; }

.cc-flow { fill: none; stroke-linecap: butt; }
.cc-flow.wait { stroke-dasharray: 14 5; opacity: 0.4; }
.cc-flow.wait.spoiled { stroke: #dc2626; opacity: 0.55; }

.cc-ing-line { fill: none; stroke: #86efac; stroke-width: 1.2; }
.cc-ing-text { fill: #292524; font-size: 11px; }
.cc-ing-text .qty { fill: #a8a29e; font-variant-numeric: tabular-nums; }

.cc-step { cursor: pointer; outline: none; }
.cc-step rect { transition: filter 120ms; }
.cc-step:hover rect:first-child,
.cc-step:focus rect:first-child { filter: brightness(1.08) drop-shadow(0 2px 4px rgb(0 0 0 / 0.18)); }
.cc-step-name { fill: #fff; font-weight: 600; pointer-events: none; }
.cc-step-dur { fill: rgb(255 255 255 / 0.8); font-variant-numeric: tabular-nums; pointer-events: none; }
.cc-critical-mark { fill: rgb(255 255 255 / 0.85); pointer-events: none; }

.cc-below { fill: #57534e; font-size: 10.5px; }
.cc-below.step { font-weight: 600; fill: #292524; }
.cc-below.dur { fill: #78716c; font-variant-numeric: tabular-nums; }
.cc-below.derived { fill: #a16207; font-style: italic; }

.cc-dish-name { font-weight: 700; font-size: 13px; fill: #1c1917; }
.cc-dish-time { fill: #78716c; font-size: 11px; }

.cc-cursor line { stroke: #1c1917; stroke-width: 1; stroke-dasharray: 2 3; opacity: 0.5; pointer-events: none; }
.cc-cursor text { fill: #1c1917; font-size: 10.5px; font-weight: 600; pointer-events: none; }

.hl { transition: opacity 150ms; }
.hl.dim { opacity: 0.12; }

.cc-tooltip {
  position: absolute; pointer-events: none; z-index: 10;
  max-width: 280px; padding: 10px 12px;
  background: #fff; border: 1px solid #e7e5e4; border-radius: 8px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.12);
  font-size: 12px; color: #44403c; line-height: 1.45;
  transition: opacity 100ms;
}
.cc-tooltip .tt-kind { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.cc-tooltip .tt-title { font-weight: 700; font-size: 14px; color: #1c1917; }
.cc-tooltip .tt-time { color: #78716c; font-variant-numeric: tabular-nums; margin-bottom: 4px; }
.cc-tooltip .tt-meta { color: #78716c; }
.cc-tooltip .tt-row span { display: inline-block; width: 30px; color: #a8a29e; }
.cc-tooltip .tt-crit { margin-top: 6px; color: #b91c1c; font-weight: 600; }
.cc-tooltip .tt-slack { margin-top: 6px; color: #15803d; }

.cc-strip-label { fill: #78716c; font-size: 10.5px; }
.cc-strip-bg { fill: #f5f5f4; }
.cc-strip .seg { fill: #57534e; }
.cc-strip .seg.over { fill: #dc2626; }
.cc-strip-warn { fill: #b91c1c; font-size: 10.5px; }

.cc-signature { width: 100%; height: auto; display: block; }

.recipe-card { transition: border-color 120ms, box-shadow 120ms; }
.recipe-card[aria-pressed="true"] { border-color: #f97316; box-shadow: 0 0 0 3px rgb(249 115 22 / 0.15); }


.plan-row.critical .plan-time { color: #b91c1c; }

/* Vistas de texto: plan de trabajo y modo de elaboración (recipe-text.js) */
.cc-muted { color: #78716c; }
.cc-h { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #78716c; margin: 0 0 8px; }
.cc-h .cc-muted { text-transform: none; letter-spacing: 0; font-weight: 400; }

.cc-method { display: grid; grid-template-columns: minmax(180px, 1fr) 3fr; gap: 24px; font-size: 14px; line-height: 1.6; color: #292524; }
.cc-method ul, .cc-method ol { list-style: none; margin: 0; padding: 0; }
.cc-method-ings li { padding: 3px 6px; margin: 0 -6px; border-radius: 4px; }
.cc-method-tools { margin: 12px 0 0; font-size: 13px; color: #57534e; }
.cc-moment { display: flex; gap: 12px; padding: 6px 0; border-top: 1px solid #f5f5f4; }
.cc-moment:first-child { border-top: 0; }
.cc-moment p { margin: 0; flex: 1; min-width: 0; }
.cc-when { flex: 0 0 52px; font-weight: 600; color: #57534e; font-variant-numeric: tabular-nums; }
.cc-moment-end .cc-when { color: #a16207; }
.cc-clause { border-radius: 4px; transition: background-color 150ms; }
.cc-ref { color: inherit; text-decoration: none; border-bottom: 1px solid; }
.cc-ref-ing { border-color: #86efac; }
.cc-ref-step { border-color: #d6d3d1; }
.cc-ref-out { color: #b45309; font-style: italic; border-color: #fcd34d; }
.cc-ref:hover { color: #c2410c; border-bottom-width: 2px; }
.cc-ref-tool { color: inherit; border-bottom: 0; }
.cc-active, .cc-flash { background: #fff7ed; }
.cc-flash { animation: cc-flash 1.2s ease-out; }
@keyframes cc-flash { from { background: #fed7aa; } to { background: transparent; } }

.cc-plan { list-style: none; margin: 0; padding: 0; font-size: 14px; color: #44403c; }
.cc-plan-row { display: flex; gap: 14px; padding: 10px 8px; border-top: 1px solid #f5f5f4; border-radius: 4px; }
.cc-plan-row:first-child { border-top: 0; }
.cc-plan-time { flex: 0 0 72px; font-weight: 600; color: #44403c; font-variant-numeric: tabular-nums; }
.cc-plan-kind { flex: 0 0 10px; height: 10px; margin-top: 6px; border-radius: 2px; }
.cc-plan-main { flex: 1; min-width: 0; }
.cc-plan-name { font-weight: 600; color: #1c1917; }
.cc-plan-details { display: block; font-size: 12px; color: #78716c; }
.cc-plan-flow { display: block; color: #57534e; }
.cc-plan-flow em { color: #b45309; }
.cc-plan-note { font-size: 12px; white-space: nowrap; margin-top: 2px; }
.cc-plan-bad { color: #b91c1c; }
.cc-plan-ok { color: #15803d; }

@media (max-width: 640px) {
    .cc-method { grid-template-columns: 1fr; gap: 16px; }
    .cc-when { flex-basis: 40px; }
    .cc-plan-row { flex-wrap: wrap; gap: 4px 10px; }
    .cc-plan-time { flex-basis: auto; }
    .cc-plan-note { flex-basis: 100%; padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .cc-flash { animation: none; } }