/* ========================================================================= DTEW storefront — best-of-the-web directory Visual recipe: theporndude.com style (4-col card grid, numbered text links, per-category pastel cards, prominent search-as-hero) blended with porntourist.com (saturated per-card accents, pill CTAs). Palette from /assets/detodoenlaweblogo.png: cyan + gold as brand. Light background to distinguish from any "boring replica of source". ========================================================================= */ /* ----------------------------- TOKENS ------------------------------ */ :root { --brand: #0ea5b7; --brand-dark: #0c8494; --brand-soft: #e6f7f9; --gold: #d4a017; --gold-dark: #b8870d; --gold-soft: #fdf6e3; --bg: #fafaf7; /* warm off-white — see body {background-color} comment */ --bg-card: #ffffff; /* pure white cards pop against the cream */ --line: #e5e7eb; --line-soft: #eef0f3; --ink: #0f172a; --ink-mid: #334155; --muted: #64748b; /* 12 per-category accent colors + soft variants for card fill */ --c-cyan: #0ea5b7; --c-cyan-soft: #d5f1f4; --c-gold: #d4a017; --c-gold-soft: #fbf1cf; --c-pink: #ec4899; --c-pink-soft: #fce3ef; --c-teal: #14b8a6; --c-teal-soft: #d3f1ec; --c-green: #22c55e; --c-green-soft: #d8f3df; --c-orange: #f97316; --c-orange-soft: #fde0cf; --c-purple: #a855f7; --c-purple-soft: #ede0fc; --c-red: #ef4444; --c-red-soft: #fbdcdc; --c-indigo: #6366f1; --c-indigo-soft: #dfe2fd; --c-blue: #3b82f6; --c-blue-soft: #d8e6fd; --c-rose: #f43f5e; --c-rose-soft: #fdd9e1; --c-amber: #f59e0b; --c-amber-soft: #fbe7c1; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px; --sh-sm: 0 1px 2px rgba(15,23,42,.05); --sh-md: 0 2px 10px rgba(15,23,42,.07); --sh-lg: 0 8px 28px rgba(15,23,42,.10); } /* ----------------------------- RESET --------------------------------- */ *,*::before,*::after { box-sizing: border-box; } html, body { margin:0; padding:0; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 14.5px; line-height: 1.5; color: var(--ink); /* Background — operator-direct 2026-07-03 (post-cards): unify the page so the whole top-to-bottom scroll reads as ONE warm cream tone. Dot pattern is now gone (it was the leftover from an earlier draft). */ background-color: #fafaf7; /* position:relative makes the containing block for the absolutely-positioned .bg-tiles layer so the tiles cover the entire scrollable area, not just the first viewport. */ position: relative; } /* Logo tiles — operator-direct 2026-07-03: "display the logo as tiles in the background do that step first". - .bg-tiles is a sibling inserted right after , see index.php. - It repeats the cropped DETODO+ENLAWEB logo across the page at low opacity so it reads as texture, not branding. Each tile is ~280px wide. - Sits behind all content (z-index 0) and ignores pointer events. - Tall enough to cover the whole 5,665px scroll — logo tiles continue filling the canvas as the user scrolls. */ .bg-tiles { /* Operator-direct 2026-07-03: "when we scroll can we make the background static the tiles i mean". position:fixed pins the box to the viewport, so the tile pattern stays locked in place while page content scrolls past it. width/height match the viewport exactly (100vw / 100vh); the background-image repeats to fill that viewport. The fixed element consumes a tiny paint cost but is invisible to clicks (pointer-events:none) and has no children, so it's negligible. */ position: fixed; inset: 0; z-index: 0; pointer-events: none; background-repeat: repeat; background-size: 280px auto; background-position: 0 0; /* Operator-direct 2026-07-03: "make the tiled logo 5% less transparent". Was 0.06 (very faint) — bumped to 0.11 so the tiles read more clearly without fighting the cards/footer text. */ opacity: 0.11; } /* Lift actual page content above the tiles so they read as background. */ header, main, footer, section.editorial { position: relative; z-index: 1; } img { max-width: 100%; height: auto; display: block; } a { color: var(--brand-dark); text-decoration: none; } a:hover { text-decoration: underline; } ul { padding: 0; margin: 0; list-style: none; } h1,h2,h3,h4 { margin: 0; line-height: 1.2; } button { font-family: inherit; cursor: pointer; } .wrap { max-width: 1320px; margin: 0 auto; padding: 0 18px; } /* ----------------------------- HEADER -------------------------------- */ /* Sticky white header. Mirrors theporndude's: logo (left, big), search box (left-of-center), no nav below header (they use the grid). We add a small nav strip below since we have many categories. */ /* Whole page scrolls as one document. Operator directive 2026-07-03: "i am not too fond of splitting the page with scroll, lets make the whole page scroll please, easier on mobile devices." The sticky positioning made mobile users have to pinch-zoom and lost context. The header now scrolls away with the page; users re-encounter it as they scroll up. The shadow / border-bottom stay so the visual separation is preserved when at the top. */ /* Header is TRANSPARENT (operator-direct 2026-07-03: "header is not showing logo on tiles get rid of the header background color"). The .bg-tiles layer covers the full page; the header sits over it without an opaque background, so the logo tiles show through behind the brand and search. Borders/dividers are kept as thin alpha lines so the four rows still visually separate. */ .hdr { background: transparent; border-bottom: none; box-shadow: none; } .hdr-top { background: transparent; border-bottom: 1px solid rgba(15,23,42,.06); font-size: 12.5px; } .hdr-top-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; /* let nav + badge stack on narrow screens */ gap: 8px 14px; /* row-gap, column-gap */ padding: 6px 18px; color: var(--muted); } .hdr-mini-nav { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; min-width: 0; /* allow shrinking inside flex parent */ } .hdr-mini-nav li { min-width: 0; } .hdr-mini-nav a { color: var(--ink-mid); font-weight: 500; white-space: nowrap; } .hdr-mini-nav a:hover { color: var(--brand); } .hdr-top-cta { background: var(--gold); color: #4a3500 !important; padding: 3px 10px; border-radius: var(--r-pill); font-weight: 700 !important; font-size: 12px; } .hdr-top-cta:hover { background: var(--gold-dark); color: #fff !important; text-decoration: none; } /* --- LOGO on its own row, SEARCH on its own row, same width --- */ .hdr-logo-row { padding: 18px 0 10px; background: transparent; } .hdr-logo-inner { display: flex; justify-content: center; align-items: center; } .hdr-logo { display: inline-flex; align-items: center; text-decoration: none !important; line-height: 0; /* Match the search bar's max-width so they line up exactly */ width: 100%; max-width: 720px; } .hdr-logo-img { /* Cropped logo is 1410×450 (~3.13:1). width:100% fills the same track as the search bar below. Height auto preserves aspect. */ width: 100%; height: auto; transition: transform .2s ease; } .hdr-logo:hover .hdr-logo-img { transform: scale(1.02); } .hdr-search-row { padding: 0 0 14px; background: transparent; } .hdr-search-row .wrap { display: flex; justify-content: center; } .hdr-search { display: flex; position: relative; width: 100%; max-width: 720px; /* same as .hdr-logo — lines up exactly */ } .hdr-search input { flex: 1; padding: 12px 16px; font-size: 15px; border: 2px solid var(--brand); border-radius: var(--r-pill); outline: none; background: #fff; box-shadow: var(--sh-sm); } .hdr-search input:focus { background: var(--brand-soft); box-shadow: var(--sh-md); } .hdr-search button { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); background: var(--brand); color: #fff; border: 0; width: 38px; height: 38px; font-size: 16px; border-radius: 50%; display: grid; place-items: center; } .hdr-search button:hover { background: var(--brand-dark); } /* Coming-soon placeholder for the AI search box. Same outer shape as the real .hdr-search so the header layout doesn't shift when the field is later swapped back in. Operator decision 2026-07-10: "hide search engine field and put ai search engine coming soon". */ .hdr-search-coming-soon { align-items: center; justify-content: center; gap: 10px; padding: 11px 16px; font-size: 14px; border: 2px dashed var(--brand); border-radius: var(--r-pill); background: linear-gradient(0deg, var(--brand-soft), #fff 60%); color: var(--brand-dark); box-shadow: var(--sh-sm); text-align: center; flex-wrap: wrap; } .hdr-search-cs-ico { font-size: 18px; line-height: 1; } .hdr-search-cs-text { font-weight: 600; letter-spacing: .1px; } .hdr-search-cs-badge { display: inline-block; padding: 2px 9px; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: #fff; background: var(--brand); border-radius: var(--r-pill); } @media (max-width: 540px) { .hdr-search-cs-badge { display: none; } } /* Category strip — wraps to multiple lines instead of horizontal-scrolling. Operator directive 2026-07-03: "kill the scroll bar, no scroll on mobile, shrink as much as possible before doing a hamburger menu". Hamburger is a separate plan, not built yet. */ .hdr-nav { border-top: 1px solid rgba(15,23,42,.06); background: transparent; /* RETIRED 2026-07-04 — operator-direct: the text-link nav strip under the search box is gone. Categories are discoverable via the main card grid below the hero. Block kept in CSS as a no-op in case a future module reintroduces a similar nav. */ display: none; } .hdr-nav-inner { display: flex; flex-wrap: nowrap; gap: 4px; padding: 8px 14px; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox */ } .hdr-nav-inner::-webkit-scrollbar { display: none; } /* Webkit/Chromium */ .hdr-nav-link { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; color: var(--ink-mid) !important; font-size: 12.5px; font-weight: 600; border-radius: var(--r-sm); white-space: nowrap; /* a single label can wrap inside a button, but one label never breaks across two lines */ line-height: 1.2; } .hdr-nav-link:hover { background: var(--brand-soft); color: var(--brand-dark) !important; text-decoration: none; } /* ------------------------------- HERO ------------------------------- */ /* Less prominent than current — like theporndude the hero is the search itself, not a marketing block. */ .hero { padding: 32px 0 24px; text-align: center; } .hero-h1 { font-size: clamp(24px, 3.4vw, 36px); font-weight: 800; color: var(--ink); margin: 0 auto 12px; max-width: 880px; letter-spacing: -.02em; } .hero-accent { background: linear-gradient(90deg, var(--brand) 0%, var(--gold) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hero-sub { font-size: 15px; color: var(--ink-mid); max-width: 720px; margin: 0 auto 18px; } .hero-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; font-size: 13px; color: var(--muted); font-weight: 500; } .hero-trust li { white-space: nowrap; } /* ----------------------------- DIRECTORY ---------------------------- */ /* 4-column grid on desktop like theporndude. Each category = its own card with that category's pastel color as fill and matching accent for stripes/lists. 30+ items per card, numbered. */ .cats { padding: 24px 0 36px; } .cats-title { font-size: clamp(20px, 2.4vw, 26px); font-weight: 800; margin: 0 0 8px; color: var(--ink); letter-spacing: -.01em; padding-left: 4px; border-left: 4px solid var(--brand); } .cats-sub { color: var(--muted); font-size: 14px; margin: 0 0 22px; padding-left: 12px; } .cats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } /* One category card -- pastel-tinted background, accent header strip */ .cat { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-md); display: flex; flex-direction: column; transition: transform .15s ease, box-shadow .15s ease; } .cat:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); } /* Soft tinted background per category. PHP emits `class="cat "` (no accent- prefix). */ .cat.cyan { background: linear-gradient(180deg, var(--c-cyan-soft) 0%, #fff 220px); border-color: var(--c-cyan); } .cat.gold { background: linear-gradient(180deg, var(--c-gold-soft) 0%, #fff 220px); border-color: var(--c-gold); } .cat.pink { background: linear-gradient(180deg, var(--c-pink-soft) 0%, #fff 220px); border-color: var(--c-pink); } .cat.teal { background: linear-gradient(180deg, var(--c-teal-soft) 0%, #fff 220px); border-color: var(--c-teal); } .cat.green { background: linear-gradient(180deg, var(--c-green-soft) 0%, #fff 220px); border-color: var(--c-green); } .cat.orange { background: linear-gradient(180deg, var(--c-orange-soft) 0%, #fff 220px); border-color: var(--c-orange); } .cat.purple { background: linear-gradient(180deg, var(--c-purple-soft) 0%, #fff 220px); border-color: var(--c-purple); } .cat.red { background: linear-gradient(180deg, var(--c-red-soft) 0%, #fff 220px); border-color: var(--c-red); } .cat.indigo { background: linear-gradient(180deg, var(--c-indigo-soft) 0%, #fff 220px); border-color: var(--c-indigo); } .cat.blue { background: linear-gradient(180deg, var(--c-blue-soft) 0%, #fff 220px); border-color: var(--c-blue); } .cat.rose { background: linear-gradient(180deg, var(--c-rose-soft) 0%, #fff 220px); border-color: var(--c-rose); } .cat.amber { background: linear-gradient(180deg, var(--c-amber-soft) 0%, #fff 220px); border-color: var(--c-amber); } /* Per-color accent for the "Otras categorías" sidebar rows. Same 12 brand tokens, but used as the --cat-accent custom property so the row's dot + count pill pick up the color without per-color selectors. Reuses the same .cyan/.gold/.etc classes the operator already uses on the cards above. */ .cat-side-catrow.cyan { --cat-accent: var(--c-cyan); } .cat-side-catrow.gold { --cat-accent: var(--c-gold); } .cat-side-catrow.pink { --cat-accent: var(--c-pink); } .cat-side-catrow.teal { --cat-accent: var(--c-teal); } .cat-side-catrow.green { --cat-accent: var(--c-green); } .cat-side-catrow.orange { --cat-accent: var(--c-orange); } .cat-side-catrow.purple { --cat-accent: var(--c-purple); } .cat-side-catrow.red { --cat-accent: var(--c-red); } .cat-side-catrow.indigo { --cat-accent: var(--c-indigo); } .cat-side-catrow.blue { --cat-accent: var(--c-blue); } .cat-side-catrow.rose { --cat-accent: var(--c-rose); } .cat-side-catrow.amber { --cat-accent: var(--c-amber); } .cat-hdr { padding: 14px 16px 10px; border-bottom: 1px solid rgba(15,23,42,.06); display: flex; flex-direction: column; } /* Icon retired 2026-07-04 — operator directive "categories will always be dynamic". Cards lean on accent color + border + count pill alone. */ .cat.noicon .cat-hdr { padding-top: 16px; } .cat.noicon .cat-title { /* Operator-direct 2026-07-04: title fonts were unacceptable. Was 16px / 800 / uppercase / letter-spacing -.01em — made long category names like "Innovación y Tecnología" overlap the count pill. Now sentence case, proper line-height, weight 700, and a right-padding so the absolute-positioned count pill never sits on top of the text. Word-break breaks on word boundary; the whole title stays on at most 2 lines on a typical card. */ font-size: 19px; line-height: 1.2; font-weight: 700; letter-spacing: -.005em; text-transform: none; padding-right: 78px; /* clears the absolute count pill */ word-break: normal; overflow-wrap: break-word; hyphens: auto; } .cat-icon { display: none; } .cat-title { font-size: 16px; font-weight: 800; letter-spacing: -.01em; text-transform: uppercase; } .cat-title a { color: var(--ink); } .cat-title a:hover { color: var(--brand-dark); text-decoration: none; } .cat-desc { margin: 0; color: var(--ink-mid); font-size: 12.5px; line-height: 1.45; } .cat-count { position: absolute; top: 12px; right: 12px; background: var(--ink); color: #fff; font-size: 11px; font-weight: 700; text-transform: none; /* was uppercase; reads cleaner as title case */ letter-spacing: 0; padding: 4px 9px; border-radius: var(--r-pill); font-variant-numeric: tabular-nums; line-height: 1.2; } .cat { position: relative; } /* DENSE list of items numbered 1..n like theporndude. Operator-direct 2026-07-03 (post-fix): buttons "look bad please align properly". Fix: align-items:start (so buttons line up with the first line of a wrapped label), label cell min-width:0 (lets label shrink and wrap freely), and the actions column gets a fixed pixel width so every row in every card has the buttons in the exact same position. */ .cat-items { padding: 10px 0 6px; flex: 1; } .cat-items li { display: grid; /* 3 columns: number, label, actions. Number=24px. Actions=124px (2 × ~58px button + 2*4px gap) so the buttons always sit at the right edge of the card regardless of card width. Label gets the rest. minmax(0,1fr) instead of plain 1fr so the label column CAN shrink below its intrinsic content width — otherwise long unbroken names ("Mercadona Online", "El Corte Inglés") push the column wide and the actions get shoved out of the right edge. With minmax(0,1fr) the label wraps/ellipses instead, and the actions stay right-aligned. Top-tier rows (cat-item-row--top) get a subtle gold tint via background, plus a small "TOP" badge absolutely-positioned inside the row so the grid layout never shifts between top and normal rows. */ grid-template-columns: 24px minmax(0, 1fr) 124px; align-items: start; column-gap: 10px; padding: 7px 14px; font-size: 13px; border-bottom: 1px dashed rgba(15,23,42,.05); min-height: 30px; position: relative; } .cat-items li:last-child { border-bottom: 0; } .cat-items li::before { content: counter(catitem, decimal-leading-zero); counter-increment: catitem; color: var(--muted); font-weight: 700; font-size: 11px; font-variant-numeric: tabular-nums; text-align: center; padding: 4px 0; border-radius: var(--r-sm); background: var(--bg-alt); } .cat-items { counter-reset: catitem; } /* "TOP" tab block — operator-direct 2026-07-03 "haz ver los tops como un tab". A single grouped block that contains all top-tier items for the category, with a distinct gold header tab at the top-left of the block. Numbering on the ::before still works because the tab's

elements are descendants of .cat-items and share its counter. */ .cat-topblock { position: relative; border: 1px solid #f1c265; border-radius: var(--r-md); background: linear-gradient(180deg, rgba(245,158,11,.06) 0%, rgba(255,255,255,1) 75%); padding: 30px 4px 4px; margin-bottom: 10px; box-shadow: 0 2px 8px rgba(245,158,11,.08); } .cat-topblock::before { /* The "TAB" header — gold pill at the top-left of the block. Operator-direct 2026-07-03: "elimina la palabra top deja solo destacados y se ve perfecto". */ content: '⭐ DESTACADOS'; position: absolute; top: -1px; left: -1px; background: var(--gold); color: #4a3500; padding: 5px 14px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; border-radius: var(--r-md) 0 var(--r-md) 0; box-shadow: 0 2px 6px rgba(245,158,11,.35); } /* The inner list inside the tab — strips out default list spacing */ .cat-topblock-list { list-style: none; margin: 0; padding: 0; } /* Rows inside the tab — flatten the per-row border so the tab looks unified */ .cat-topblock-list .cat-item-row { border: none; border-top: 1px dashed rgba(245,158,11,.25); border-radius: 0; margin-bottom: 0; background: transparent; padding: 10px 12px; } .cat-topblock-list .cat-item-row:first-child { border-top: 0; } .cat-topblock-list .cat-item-row:last-child { border-bottom: 0; } /* Hide the ::before number inside the tab rows — the tab's header IS the visual anchor, and we already used numbers for these via the counter on the outer .cat-items so the visual double-numbering reads busy. */ .cat-topblock-list li::before { content: ''; background: transparent; width: 0; padding: 0; font-size: 0; } /* Drop the 24px number column from the grid inside the tab rows. Switched to flexbox (was grid) because the previous grid layout had a bug where the link ended up in the right column and the actions in the left column — the opposite of what we want. Flexbox with `justify-content: space-between` is unambiguous: the first child (the link) goes left, the second (the actions) goes right, with all leftover space in the middle. min-width: 0 on the link lets long names wrap/ellipsize instead of forcing the row wider than the tab. */ .cat-topblock-list .cat-item-row { display: flex !important; align-items: center; justify-content: space-between; gap: 10px; } .cat-topblock-list .cat-item-link { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .cat-topblock-list .cat-item-actions { flex: 0 0 auto; } .cat-items a { color: var(--ink); font-weight: 600; text-decoration: none !important; } .cat-items a:hover { color: var(--brand-dark); text-decoration: underline !important; } /* Per-item icon actions next to each label: "Visitar" (external link, opens new tab) and "Reseña" (links to /review.php?slug=…). Operator-direct 2026-07-03: "in the index page next to each link there should be a visit site link can be icon based or whatever and read review link" — and "lets change the word review in the link for Reseña and make sure the button is the same size as the word like visit right now the button is cutting in half" — and "card visitar and reseña buttons look bad please align properly". Both buttons now share an identical fixed size so they line up perfectly across the whole list, and the actions wrapper is a fixed pixel width so every row in every card has the buttons in the exact same position. */ .cat-item-link { color: var(--ink); font-weight: 600; text-decoration: none !important; /* Allow the label to wrap on multiple lines when the card is narrow, instead of forcing a horizontal scroll. min-width:0 lets the grid cell shrink below its intrinsic content size. */ min-width: 0; word-break: break-word; line-height: 1.35; padding-top: 1px; /* optical alignment with the icon buttons */ } .cat-item-link:hover { color: var(--brand-dark); text-decoration: underline !important; } /* Fixed-width actions column — the column is 124px (set on .cat-items li) so the buttons always sit at the right edge of the card regardless of how wide the card is. The wrapper is a 2-col grid of its own so both buttons get the same width and vertically center. */ .cat-item-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; align-self: start; } .cat-item-act { display: inline-flex; align-items: center; justify-content: center; gap: 0; padding: 5px 6px; font-size: 11px; font-weight: 700; border-radius: var(--r-sm); text-decoration: none !important; border: 1px solid transparent; line-height: 1.2; white-space: nowrap; /* Hide the icon entirely now — text-only on cards so the buttons are even more compact and uniform across cards. */ min-width: 0; transition: background .15s, border-color .15s, color .15s, transform .15s; } .cat-item-act--visit { background: var(--brand-soft); color: var(--brand-dark); border-color: var(--brand); } .cat-item-act--visit:hover { background: var(--brand); color: #fff; transform: translateY(-1px); } .cat-item-act--review { background: #fff7e6; color: #8a5a00; border-color: #f1c265; } .cat-item-act--review:hover { background: #f1c265; color: #4a3500; transform: translateY(-1px); } /* (Legacy per-row top marker removed 2026-07-03 — top items now render inside a single .cat-topblock tab at the top of the card. See .cat-item-topmark below for the badge that some rows may still carry inside the tab.) */ .cat-item-topmark { /* Compact "Destacado" pill — only used if for some reason a top row shows OUTSIDE the tab. Inline by default, doesn't disturb grid. */ display: none; /* the tab owns visibility now */ } .cat-item-row--top { /* The per-row premium highlight has been replaced by the .cat-topblock container. Older rules kept here as safety nets in case a top row is rendered outside the tab by future code paths. */ background: transparent !important; border-left: 0 !important; padding-left: 14px !important; } /* Phone: drop the column width even further (and hide the icons back in if needed) so nothing wraps. */ @media (max-width: 560px) { .cat-items li { grid-template-columns: 22px 1fr 96px; column-gap: 8px; } .cat-item-actions { grid-template-columns: 1fr 1fr; gap: 3px; } .cat-item-act { padding: 4px 4px; font-size: 10.5px; } } .cat-foot { display: flex; gap: 0; justify-content: stretch; padding: 12px; border-top: 2px solid var(--c-cyan); background: linear-gradient(180deg, #fff 0%, #f8fafc 100%); } .cat.cyan .cat-foot { border-top-color: var(--c-cyan); } .cat.gold .cat-foot { border-top-color: var(--c-gold); } .cat.pink .cat-foot { border-top-color: var(--c-pink); } .cat.teal .cat-foot { border-top-color: var(--c-teal); } .cat.green .cat-foot { border-top-color: var(--c-green); } .cat.orange .cat-foot { border-top-color: var(--c-orange); } .cat.purple .cat-foot { border-top-color: var(--c-purple); } .cat.red .cat-foot { border-top-color: var(--c-red); } .cat.indigo .cat-foot { border-top-color: var(--c-indigo); } .cat.blue .cat-foot { border-top-color: var(--c-blue); } .cat.rose .cat-foot { border-top-color: var(--c-rose); } .cat.amber .cat-foot { border-top-color: var(--c-amber); } .cat-see-all { display: flex; align-items: center; justify-content: center; gap: 10px; flex: 1; width: 100%; padding: 11px 16px; border-radius: 999px; background: var(--c-cyan); color: #fff !important; font-size: 13.5px; font-weight: 800; letter-spacing: .02em; text-decoration: none !important; box-shadow: 0 4px 12px rgba(14, 165, 183, .25), inset 0 1px 0 rgba(255, 255, 255, .25); transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; position: relative; overflow: hidden; } .cat-see-all::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 60%); pointer-events: none; } .cat-see-all:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(14, 165, 183, .35), inset 0 1px 0 rgba(255, 255, 255, .25); } .cat-see-all:hover .cat-see-all-arrow { transform: translateX(3px); } .cat-see-all:active { transform: translateY(0); } .cat-see-all-label { white-space: nowrap; } .cat-see-all-cat { font-weight: 600; opacity: .92; } .cat-see-all-arrow { display: inline-block; font-size: 16px; font-weight: 900; transition: transform .15s ease; margin-left: 2px; } .cat.cyan .cat-see-all { background: linear-gradient(135deg, var(--c-cyan) 0%, #0b8a99 100%); } .cat.gold .cat-see-all { background: linear-gradient(135deg, var(--c-gold) 0%, #d4a017 100%); color: #4a3500 !important; box-shadow: 0 4px 12px rgba(212,160,23,.30), inset 0 1px 0 rgba(255,255,255,.4); } .cat.pink .cat-see-all { background: linear-gradient(135deg, var(--c-pink) 0%, #d63384 100%); } .cat.teal .cat-see-all { background: linear-gradient(135deg, var(--c-teal) 0%, #14b8a6 100%); } .cat.green .cat-see-all { background: linear-gradient(135deg, var(--c-green) 0%, #16a34a 100%); } .cat.orange .cat-see-all { background: linear-gradient(135deg, var(--c-orange) 0%, #ea580c 100%); } .cat.purple .cat-see-all { background: linear-gradient(135deg, var(--c-purple) 0%, #7c3aed 100%); } .cat.red .cat-see-all { background: linear-gradient(135deg, var(--c-red) 0%, #dc2626 100%); } .cat.indigo .cat-see-all { background: linear-gradient(135deg, var(--c-indigo) 0%, #4f46e5 100%); } .cat.blue .cat-see-all { background: linear-gradient(135deg, var(--c-blue) 0%, #2563eb 100%); } .cat.rose .cat-see-all { background: linear-gradient(135deg, var(--c-rose) 0%, #e11d48 100%); } .cat.amber .cat-see-all { background: linear-gradient(135deg, var(--c-amber) 0%, #d97706 100%); color: #4a3500 !important; box-shadow: 0 4px 12px rgba(217,119,6,.30), inset 0 1px 0 rgba(255,255,255,.4); } @media (max-width: 480px) { .cat-see-all { padding: 10px 14px; font-size: 12.5px; gap: 8px; } .cat-see-all-arrow { font-size: 14px; } } /* --------------------------- EDITORIAL SEO -------------------------- */ .editorial { /* Operator directive 2026-07-03: keep the card backgrounds as they were; just unify the page background. Body is warm cream #fafaf7 — the editorial section matches it so the page reads as ONE color across the whole scroll. Borderless, no section-break tint. */ background: #fafaf7; padding: 48px 0; } .editorial h2 { font-size: 22px; font-weight: 800; margin: 0 0 14px; } .editorial h3 { font-size: 16px; font-weight: 700; margin: 22px 0 8px; color: var(--brand-dark); padding-left: 12px; border-left: 3px solid var(--brand); } .editorial p { color: var(--ink-mid); margin: 0 0 10px; max-width: 820px; font-size: 14.5px; } /* -------------------------------- FOOTER ----------------------------- */ .ft { background: #0f172a; color: #cbd5e1; padding: 40px 0 22px; font-size: 13.5px; } .ft-cols { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 28px; } .ft h4 { color: #fff; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 10px; font-weight: 800; } .ft ul { display: flex; flex-direction: column; gap: 5px; } .ft a { color: #cbd5e1; } .ft a:hover { color: #fff; } .ft-small { color: #64748b; font-size: 11.5px; margin-top: 10px; } /* ----------------------------- RESPONSIVE ---------------------------- */ @media (max-width: 1100px) { .cats-grid { grid-template-columns: repeat(3, 1fr); } .hdr-logo, .hdr-search { max-width: 640px; } } @media (max-width: 820px) { .cats-grid { grid-template-columns: repeat(2, 1fr); } .hdr-top-inner { padding: 6px 12px; gap: 6px 10px; } .hdr-mini-nav { gap: 8px 12px; font-size: 12.5px; } .hdr-mini-nav a { white-space: nowrap; } .hdr-top-cta { padding: 3px 8px; font-size: 11px; } .hdr-logo-row { padding: 12px 0 8px; } .hdr-search-row { padding: 0 0 10px; } .hdr-logo, .hdr-search { max-width: 560px; } .hdr-search input { font-size: 14px; padding: 10px 14px; } .hdr-search button { width: 34px; height: 34px; font-size: 14px; } .ft-cols { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { /* Tighten nav labels on phones — the emoji prefixes are stripped from the HTML directly so we don't need a CSS hack here. */ .hdr-mini-nav { gap: 4px 10px; } .hdr-mini-nav a { font-size: 12.5px; } } @media (max-width: 560px) { .cats-grid { grid-template-columns: 1fr; } .hdr-logo, .hdr-search { max-width: 100%; } .hdr-top-inner { justify-content: center; } .hdr-mini-nav { justify-content: center; gap: 6px 12px; } .hdr-top > .wrap > span { display: none; } /* hide the count badge on phones */ .ft-cols { grid-template-columns: 1fr; } } /* ---------------------------- REVIEW PAGE ------------------------------ Operator directive 2026-07-03: "create the review page based on the url i send you you will concentrate on the review card the rest user our index template". Reuses the same header + bg-tiles + footer. The review-card is what we focus styling on here. */ .review-page { padding: 32px 0 48px; } .review-wrap { max-width: 980px; margin: 0 auto; padding: 0 18px; } /* Breadcrumb at the top of the review — like theporndude's review */ .review-breadcrumbs { font-size: 13px; color: var(--muted); margin-bottom: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .review-breadcrumbs a { color: var(--brand-dark); text-decoration: none; } .review-breadcrumbs a:hover { text-decoration: underline; } .review-breadcrumbs .sep { color: var(--muted-soft); } .review-breadcrumbs .current { color: var(--ink); font-weight: 700; } /* The review card. Big, centered, with a hero row (text + visual) and a body of structured sections, plus a CTA bar at the bottom. */ .review-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-lg); overflow: hidden; } /* Hero — site name, URL, stars, two CTAs on the left; full-bleed screenshot as background (when available). When no screenshot exists yet, the soft brand gradient stays put — no letter mark, no fallback tile (operator-direct 2026-07-11: do away with the review-hero-thumb and the letter-thingy placeholder). */ .review-hero { position: relative; isolation: isolate; /* keep bg + overlay below text */ overflow: hidden; min-height: 360px; background: linear-gradient(180deg, var(--brand-soft) 0%, #fff 240px); } .review-hero-bg { position: absolute; top: 0; left: 0; /* Fill the full hero width. height:auto preserves the source aspect ratio (1280x800 -> 1.6:1) so a 942-wide hero gets a 589-tall image. That overflows the 360-tall hero vertically; overflow:hidden on the parent clips it. The hero box acts as a 'scissor' cutting the natural-size image — exactly the operator-direct pattern. */ width: 100%; height: auto; min-height: 100%; /* Anchor top-left so the screenshot's right edge extends past the hero box (it doesn't here since width:100% already matches, but kept for clarity) and gets cropped by overflow:hidden on the parent. Effect: the hero shows the LEFT portion of the source page (logo, nav, headline) instead of the center crop that aspect-mismatched cover gave us on a 942x360 box holding a 1280x800 image. */ object-position: top left; z-index: -2; background: var(--soft); /* placeholder color while image loads */ } .review-hero-bg-overlay { position: absolute; inset: 0; z-index: -1; /* Horizontal gradient: dark on the LEFT (where the title + URL + CTA column lives via .review-hero-text max-width:720px), fading to transparent on the right so the screenshot is still mostly visible. Operator-direct 2026-07-11: bottom-anchored vertical gradient left the title in the 'fading' zone with weak contrast on bright screenshots (cividata-org cookie-banner-style white forms). */ background: linear-gradient( to right, rgba(0, 0, 0, .80) 0%, rgba(0, 0, 0, .55) 25%, rgba(0, 0, 0, .25) 55%, rgba(0, 0, 0, 0) 80% ); } /* When a screenshot is present, push the title/URL/CTA copy from dark on light (default) to light on dark. Scoped to the hero so review- body text below stays unaffected. */ .review-hero:has(.review-hero-bg) .review-hero-text { color: #fff; } .review-hero:has(.review-hero-bg) .review-h1 { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35); } .review-hero:has(.review-hero-bg) .review-url a { color: #fff; text-decoration-color: rgba(255,255,255,.6); } .review-hero:has(.review-hero-bg) .review-url a:hover{ color: #fff; text-decoration-color: #fff; } .review-hero:has(.review-hero-bg) .review-rating-num{ color: rgba(255,255,255,.92); } .review-hero:has(.review-hero-bg) .star--empty { color: rgba(255,255,255,.35); } .review-hero:has(.review-hero-bg) .review-hero-emoji{ background: rgba(255,255,255,.92); } .review-hero:has(.review-hero-bg) .review-cr-score-label, .review-hero:has(.review-hero-bg) .review-cr-score-num { color: #fff; } .review-hero:has(.review-hero-bg) .review-cr-score-info { color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.5); } .review-hero:has(.review-hero-bg) .review-cr-score-info:hover { background: rgba(255,255,255,.12); } .review-hero:has(.review-hero-bg) .review-cr-legend { color: var(--ink); } /* legend popover stays dark-on-light */ .review-hero-text { padding: 32px 32px 28px; display: flex; flex-direction: column; gap: 10px; position: relative; /* above bg + overlay (z-index 0 default) */ z-index: 1; max-width: 720px; /* keeps the line length readable */ } .review-hero-emoji { font-size: 38px; width: 56px; height: 56px; border-radius: var(--r-md); background: #fff; display: grid; place-items: center; box-shadow: var(--sh-sm); margin-bottom: 4px; } .review-h1 { font-size: clamp(26px, 3.4vw, 36px); font-weight: 800; color: var(--ink); letter-spacing: -.02em; margin: 0; } .review-url { margin: 0 0 6px; font-size: 15px; } .review-url a { color: var(--brand-dark); font-weight: 600; text-decoration: none; } .review-url a:hover { text-decoration: underline; } /* Star rating row (★★★★☆ etc.) */ .review-rating { display: flex; align-items: center; gap: 4px; margin: 6px 0 4px; } .review-rating .star { font-size: 22px; line-height: 1; } .review-rating .star--full { color: #f59e0b; } .review-rating .star--half { color: #f59e0b; background: linear-gradient(90deg, #f59e0b 50%, #cbd5e1 50%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .review-rating .star--empty { color: #cbd5e1; } .review-rating-num { font-size: 14px; font-weight: 700; color: var(--ink); margin-left: 8px; } /* Site crawlability score badge (2026-07-11) */ .review-cr-score { position: relative; display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 6px 0; /* no horizontal padding needed — no bg/border */ background: transparent; /* operator-direct 2026-07-11: was #f8fafc which was unreadable on top of the hero screenshot (light pill + white text = invisible) */ border: none; border-radius: 0; font-size: 13px; color: var(--ink); flex-wrap: wrap; } .review-cr-score-label { color: #64748b; font-weight: 600; } .review-cr-score-num { font-weight: 800; font-size: 15px; color: var(--ink); } .review-cr-score-bucket { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .review-cr-score-bucket--excelente { background: #d1fae5; color: #065f46; } .review-cr-score-bucket--bueno { background: #dbeafe; color: #1e40af; } .review-cr-score-bucket--regular { background: #fef3c7; color: #92400e; } .review-cr-score-bucket--pobre { background: #fee2e2; color: #991b1b; } .review-cr-score-info { background: transparent; border: 1px solid #cbd5e1; color: #64748b; width: 20px; height: 20px; border-radius: 50%; font-size: 11px; font-weight: 700; cursor: pointer; line-height: 1; padding: 0; } .review-cr-score-info:hover { background: #e2e8f0; } .review-cr-legend { display: none; position: absolute; top: calc(100% + 6px); left: 0; width: 360px; max-width: 92vw; padding: 14px 16px; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12); font-size: 12px; line-height: 1.5; color: var(--ink); text-align: left; z-index: 50; } .review-cr-legend.is-open { display: block; } .review-cr-legend strong { display: block; margin-bottom: 6px; font-size: 13px; } .review-cr-legend p { margin: 0 0 8px; color: #475569; } .review-cr-legend-bands { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-direction: column; gap: 4px; } .review-cr-legend-bands li { display: flex; align-items: center; gap: 8px; color: #475569; } .review-cr-legend-hint { margin-top: 8px; padding-top: 8px; border-top: 1px solid #e2e8f0; font-style: italic; color: #64748b; } /* Two CTAs below stars: the BIG "Visit" (external) and a "Back" link */ .review-hero-actions { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; } .btn-visit { display: inline-block; background: var(--brand); color: #fff !important; padding: 12px 24px; font-size: 15px; font-weight: 800; border-radius: var(--r-pill); text-decoration: none !important; letter-spacing: .02em; box-shadow: var(--sh-md); transition: background .15s, transform .15s; } .btn-visit:hover { background: var(--brand-dark); transform: translateY(-1px); } .btn-back { display: inline-block; background: #fff; color: var(--ink-mid) !important; padding: 12px 20px; font-size: 14px; font-weight: 600; border-radius: var(--r-pill); border: 1px solid var(--line); text-decoration: none !important; transition: background .15s, border-color .15s; } .btn-back:hover { background: var(--bg-alt); border-color: var(--brand); color: var(--brand-dark) !important; } /* Structured review body — 4 sections, each an H2 + paragraphs */ .review-body { padding: 24px 32px 32px; } .review-section { margin-bottom: 24px; } .review-section:last-child { margin-bottom: 0; } .review-h2 { font-size: 19px; font-weight: 800; color: var(--brand-dark); margin: 0 0 10px; display: flex; align-items: baseline; gap: 8px; letter-spacing: -.01em; } .review-h2-num { display: inline-block; background: var(--gold); color: #4a3500; padding: 2px 9px; border-radius: var(--r-pill); font-size: 14px; font-weight: 800; } .review-section p { margin: 0 0 10px; color: var(--ink-mid); font-size: 15px; line-height: 1.65; } .review-section p:last-child { margin-bottom: 0; } /* Footer CTA bar inside the card */ .review-foot { display: flex; gap: 12px; padding: 20px 32px; border-top: 2px solid var(--brand-soft); background: var(--bg-alt); flex-wrap: wrap; } .review-foot .btn-visit { flex: 1 1 auto; text-align: center; min-width: 220px; } /* "Review not found" fallback */ .review-notfound { padding: 60px 24px; text-align: center; } .review-notfound-emoji { font-size: 56px; } .review-notfound h1 { font-size: 28px; margin: 12px 0 8px; } .review-notfound p { font-size: 15px; color: var(--muted); } .review-notfound code { background: var(--brand-soft); padding: 2px 6px; border-radius: var(--r-sm); font-family: ui-monospace, monospace; font-size: 13px; } /* Editorial call-to-action below the review */ .editorial-cta { display: inline-block; background: var(--brand); color: #fff !important; padding: 11px 18px; border-radius: var(--r-pill); font-weight: 700; text-decoration: none !important; } .editorial-cta:hover { background: var(--brand-dark); } /* Coming-soon variant — same shape as .editorial-cta so the layout doesn't shift when the live button returns. Operator directive 2026-07-10: "puedes cambiar el boton para que diga que pronto habilitaremos esa funcion asi de bonito como hiciste con el search". Mirrors the .hdr-search-coming-soon pattern. */ .editorial-cta--soon { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px 10px 18px; border: 2px dashed var(--brand); border-radius: var(--r-pill); background: linear-gradient(0deg, var(--brand-soft), #fff 60%); color: var(--brand-dark) !important; font-weight: 700; cursor: default; box-shadow: var(--sh-sm); flex-wrap: wrap; } .editorial-cta-soon-ico { font-size: 17px; line-height: 1; } .editorial-cta-soon-text { letter-spacing: .1px; } .editorial-cta-soon-badge { display: inline-block; padding: 2px 9px; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: #fff; background: var(--brand); border-radius: var(--r-pill); } .editorial-cta-foot { margin-top: 14px; font-size: 14px; color: var(--muted); } .editorial-cta-foot a { color: var(--brand); font-weight: 600; } @media (max-width: 540px) { .editorial-cta-soon-badge { display: none; } } /* Responsive */ @media (max-width: 820px) { /* No two-column hero anymore — text and bg image stack vertically. */ .review-hero-text, .review-body, .review-foot { padding-left: 22px; padding-right: 22px; } } @media (max-width: 560px) { .review-h1 { font-size: 24px; } .review-h2 { font-size: 16px; } .review-body { padding-top: 18px; padding-bottom: 22px; } .review-hero-text { padding-top: 22px; padding-bottom: 16px; } } /* --------------------------- CATEGORY PAGE ---------------------- Operator directive 2026-07-03: "we build the category page ... we have advertising space at the top right then top sites then all sites in category". Header/footer/tiles reuse the index recipe. The page is 2-col: main (66%) lists ALL items in the category with Visit/Reseña actions + top-marker; sidebar (33%) has a Top-5 card, a sponsor slot, and an "other categories" card. */ .cat-page { padding: 32px 0 48px; } .cat-wrap { max-width: 1180px; margin: 0 auto; padding: 0 18px; } /* Breadcrumb at the top */ .cat-breadcrumbs { font-size: 13px; color: var(--muted); margin-bottom: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cat-breadcrumbs a { color: var(--brand-dark); text-decoration: none; } .cat-breadcrumbs a:hover { text-decoration: underline; } .cat-breadcrumbs .sep { color: var(--muted-soft); } .cat-breadcrumbs .current { color: var(--ink); font-weight: 700; } /* Hero — big title with the category icon, description, and 3 info pills */ .cat-hero { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: var(--r-lg); padding: 24px 28px; margin-bottom: 16px; box-shadow: var(--sh-sm); } .cat-h1 { font-size: clamp(26px, 3.4vw, 36px); font-weight: 800; color: var(--ink); letter-spacing: -.02em; margin: 0 0 8px; display: flex; align-items: center; gap: 14px; } .cat-hero-desc { margin: 0 0 16px; font-size: 15px; color: var(--ink-mid); max-width: 760px; } .cat-hero-meta { display: flex; gap: 8px; flex-wrap: wrap; } .cat-count-pill { display: inline-block; background: var(--brand-soft); color: var(--brand-dark); font-size: 12.5px; font-weight: 700; padding: 5px 11px; border-radius: var(--r-pill); } .cat-count-pill--top { background: #fff7e6; color: #8a5a00; } /* Editorial disclaimer row between hero and main body */ .cat-disclaimer { background: var(--bg-alt); border-left: 3px solid var(--gold); padding: 12px 18px; margin: 0 0 22px; border-radius: 0 var(--r-md) var(--r-md) 0; color: var(--ink-mid); font-size: 13.5px; line-height: 1.55; } /* 2-column body */ .cat-body { display: grid; grid-template-columns: 1fr 320px; gap: 22px; align-items: start; } @media (max-width: 980px) { .cat-body { grid-template-columns: 1fr; } } /* Main column — title + ordered item list (NOT yet styled-by-row, we use a static ordered list with numbered badges) */ .cat-h2 { font-size: 20px; font-weight: 800; color: var(--ink); margin: 0 0 14px; letter-spacing: -.01em; display: flex; align-items: baseline; gap: 10px; padding-left: 4px; border-left: 4px solid var(--brand); } .cat-h2-count { font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: 0; } .cat-list { padding: 0; margin: 0; list-style: none; counter-reset: catlistitem; } .cat-list-row { display: grid; grid-template-columns: 36px 1fr; align-items: center; gap: 12px; padding: 11px 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: 8px; box-shadow: var(--sh-sm); position: relative; transition: transform .12s, box-shadow .12s; } .cat-list-row:hover { transform: translateX(2px); box-shadow: var(--sh-md); } .cat-list-row--top { /* Same v2 highlight as .cat-item-row--top on index: 4px gold left stripe + stronger gold gradient that fades left→right. */ background: linear-gradient(90deg, rgba(245,158,11,.22) 0%, rgba(245,158,11,.10) 25%, rgba(245,158,11,0) 60%); border-color: var(--gold); border-left: 4px solid var(--gold); padding-left: 12px; } .cat-list-row--top:hover { transform: translateX(2px); box-shadow: 0 6px 18px rgba(245,158,11,.18); border-left-color: #b8870d; } .cat-list-num { font-family: ui-monospace, monospace; font-size: 12px; font-weight: 700; color: var(--muted); background: var(--bg-alt); text-align: center; padding: 4px 0; border-radius: var(--r-sm); letter-spacing: .04em; font-variant-numeric: tabular-nums; } .cat-list-row--top .cat-list-num { /* Premium gold number badge with bold contrast text. */ background: var(--gold); color: #4a3500; font-weight: 800; } .cat-list-row--top .cat-list-num::after { /* Tiny star below the number to seal the "this is premium" feeling without adding another element to the grid. */ content: '★'; display: block; font-size: 10px; line-height: 1; margin-top: 1px; color: #4a3500; opacity: .85; } .cat-list-body { display: grid; grid-template-columns: 1fr 156px; align-items: center; gap: 10px; position: relative; min-width: 0; } .cat-list-name { font-size: 15px; font-weight: 700; color: var(--ink); text-decoration: none; min-width: 0; word-break: break-word; line-height: 1.3; } .cat-list-name:hover { color: var(--brand-dark); text-decoration: underline; } .cat-list-topmark { /* Small "Destacado" pill absolutely positioned at the top-right of the row, slightly inside the card so it doesn't escape. Pill shape (rounded) + soft gold shadow for the same treatment as the index. */ position: absolute; top: -8px; right: 168px; background: var(--gold); color: #4a3500; padding: 3px 9px 3px 7px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; border-radius: var(--r-pill); box-shadow: 0 2px 6px rgba(245,158,11,.4); z-index: 1; pointer-events: none; } .cat-list-topmark::before { content: '⭐ '; } .cat-list-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; } /* Sidebar — cards stack vertically */ .cat-side { display: flex; flex-direction: column; gap: 16px; } .cat-side-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; box-shadow: var(--sh-md); } .cat-side-card--top { border-top: 4px solid var(--gold); padding-top: 14px; } .cat-side-h3 { font-size: 14px; font-weight: 800; color: var(--ink); margin: 0 0 10px; letter-spacing: -.005em; text-transform: uppercase; } .cat-side-h3--sponsor { color: var(--gold-dark); } .cat-side-desc { font-size: 12.5px; color: var(--muted); margin: 0 0 12px; line-height: 1.45; } /* Top-5 ranked list in the sidebar */ .cat-side-toplist { padding: 0; margin: 0; list-style: none; counter-reset: cattoplist; } .cat-side-toplist li { display: grid; grid-template-columns: 26px 1fr; align-items: center; gap: 8px; padding: 8px 4px; border-bottom: 1px dashed var(--line); font-size: 13px; } .cat-side-toplist li:last-child { border-bottom: 0; } .cat-side-rank { font-family: ui-monospace, monospace; font-size: 11px; font-weight: 700; background: var(--brand); color: #fff; text-align: center; padding: 3px 0; border-radius: var(--r-sm); } .cat-side-body { min-width: 0; } .cat-side-name { display: block; font-weight: 700; color: var(--ink); text-decoration: none; word-break: break-word; line-height: 1.25; margin-bottom: 4px; } .cat-side-name:hover { color: var(--brand-dark); text-decoration: underline; } .cat-side-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; } .cat-side-actions .cat-item-act { padding: 4px 4px; font-size: 10.5px; } /* "Otras categorías" list in the sidebar. Operator directive 2026-07-04: each row gets the per-category accent color (deterministic by slug, no per-row table to maintain). Title stays on one line, count is a colored pill on the right, the accent dot is the visual anchor. Card itself stays neutral; the rows carry the color. */ .cat-side-card--cats { padding: 14px 14px 12px; } .cat-side-card--cats .cat-side-h3 { margin-bottom: 8px; font-size: 13px; } .cat-side-catlist { padding: 0; margin: 0; list-style: none; } .cat-side-catlist li + li { margin-top: 3px; } .cat-side-catrow a { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 8px; padding: 7px 10px; border-radius: var(--r-md); color: var(--ink); text-decoration: none !important; font-size: 13px; line-height: 1.2; background: var(--bg-alt); border: 1px solid transparent; transition: background .12s, border-color .12s, transform .12s; } .cat-side-catrow a:hover { border-color: var(--cat-accent, var(--brand)); transform: translateX(2px); } .cat-side-cat-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cat-accent, var(--brand)); flex-shrink: 0; } .cat-side-cat-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .cat-side-cat-count { font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: #fff; background: var(--cat-accent, var(--muted)); padding: 2px 8px; border-radius: 999px; min-width: 22px; text-align: center; line-height: 1.4; } .cat-side-cat-icon { display: none; } /* Sponsor / advertising slot card — currently a placeholder, will switch to real sponsored creative when paid membership lands */ .cat-side-card--sponsor { background: linear-gradient(180deg, #fff7e6 0%, #fdfaf0 100%); border-color: #f1c265; border-top: 4px solid var(--gold); } .cat-side-sponsor-inner { border: 1px dashed var(--gold); border-radius: var(--r-md); padding: 14px; background: rgba(255,255,255,.6); } .cat-side-sponsor-msg { margin: 0 0 10px; font-size: 12.5px; color: var(--ink-mid); line-height: 1.5; } .cat-side-sponsor-cta { display: inline-block; font-size: 12.5px; font-weight: 700; color: var(--gold-dark); text-decoration: none !important; border-bottom: 1px solid currentColor; } /* ============================================================ Phase 2 — subcategory nav pills. Wraps on small screens. 8-wireframe compliant: border, no shadow, text-only pills, Spanish copy, active state via the brand color. ============================================================ */ .cat-subnav { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 24px; padding: 12px 14px; background: var(--card, #fff); border: 1px solid var(--line, #e5e5e5); border-radius: 6px; } .cat-subnav-link { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 13px; font-weight: 500; text-decoration: none; color: var(--ink, #0f172a); background: var(--bg, #fafaf7); border: 1px solid var(--line, #e5e5e5); border-radius: 999px; white-space: nowrap; transition: background 120ms ease, border-color 120ms ease, color 120ms ease; } .cat-subnav-link:hover { background: var(--brand-soft, #e6f6f8); border-color: var(--brand, #0ea5b7); color: var(--brand, #0ea5b7); } .cat-subnav-link--active { background: var(--brand, #0ea5b7); border-color: var(--brand, #0ea5b7); color: #fff; } .cat-subnav-link--active:hover { background: #0c8a98; border-color: #0c8a98; color: #fff; } .cat-subnav-count { display: inline-block; min-width: 22px; padding: 1px 7px; text-align: center; font-size: 11px; font-weight: 700; background: rgba(15, 23, 42, 0.08); border-radius: 10px; color: inherit; } .cat-subnav-link--active .cat-subnav-count { background: rgba(255, 255, 255, 0.22); } @media (max-width: 560px) { .cat-subnav { padding: 10px; gap: 4px; } .cat-subnav-link { padding: 5px 10px; font-size: 12px; } } /* "Category not found" card — shown for ?slug=missing */ .cat-card--notfound { padding: 36px 32px; } .cat-card--notfound h1 { font-size: 26px; font-weight: 800; margin: 0 0 8px; color: var(--ink); } .cat-card--notfound p { color: var(--muted); margin: 0 0 14px; } .cat-card--notfound code { background: var(--brand-soft); padding: 1px 6px; border-radius: var(--r-sm); font-family: ui-monospace, monospace; } .cat-notfound-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 12px; padding: 0; margin: 16px 0 0; list-style: none; } .cat-notfound-list a { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: var(--r-sm); background: var(--bg-alt); color: var(--ink); text-decoration: none; font-size: 13px; } .cat-notfound-list a:hover { background: var(--brand-soft); } @media (max-width: 560px) { .cat-list-body { grid-template-columns: 1fr 120px; gap: 8px; } .cat-list-actions { gap: 3px; } .cat-list-actions .cat-item-act { padding: 4px 4px; font-size: 11px; } .cat-side-actions .cat-item-act { font-size: 10px; padding: 3px 3px; } .cat-notfound-list { grid-template-columns: 1fr; } .cat-h1 { font-size: 22px; } } /* ========================================================================= /admin/* — admin shell (login + dashboard + all CRUD pages) All admin pages load the same style.css so the admin chrome shares the storefront brand tokens (cyan + gold) but flips to a darker "operations" treatment so the operator can tell at a glance that they are inside the admin area, not the storefront. The admin shell is POST-SeededRequest: we added admin CSS in the same /admin/* pass that fixed login + dashboard + categories/sites CRUD (the storefront CSS up top had no .btn, no .card, no input styling — admin pages had been rendering unstyled since v1.0 shipped). ========================================================================= */ body.admin, body.login { background: var(--bg); } /* ---- admin top nav: white card over light bg --------------------------- */ body.admin .hdr, body.login .hdr { background: var(--bg-card); border-bottom: 1px solid var(--line); box-shadow: var(--sh-sm); padding: 12px 0; margin-bottom: 22px; } body.admin .hdr .wrap, body.login .hdr .wrap { display: flex; align-items: center; justify-content: space-between; gap: 18px; } body.admin .hdr .logo, body.login .hdr .logo { font-weight: 700; color: var(--ink); font-size: 16px; display: flex; align-items: center; gap: 10px; } body.admin .hdr .logo img, body.login .hdr .logo img { height: 32px; } body.admin .hdr nav, body.login .hdr nav { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; } body.admin .hdr nav a, body.login .hdr nav a { color: var(--ink-mid); font-weight: 500; padding: 6px 10px; border-radius: var(--r-sm); font-size: 13.5px; } body.admin .hdr nav a:hover, body.login .hdr nav a:hover { background: var(--brand-soft); color: var(--brand-dark); text-decoration: none; } body.admin .hdr nav a.active, body.login .hdr nav a.active { background: var(--brand-dark); color: #fff; } body.admin .hdr nav .lang-toggle, body.login .hdr nav .lang-toggle { margin-left: 8px; padding-left: 10px; border-left: 1px solid var(--line); display: inline-flex; gap: 6px; } body.admin .hdr nav .lang-toggle a, body.login .hdr nav .lang-toggle a { font-size: 12px; padding: 3px 8px; } /* ---- buttons (.btn, .btn.primary, .btn.danger, .btn.small) ------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 18px; border-radius: var(--r-md); background: var(--bg-card); color: var(--ink); border: 1px solid var(--line); font-weight: 600; font-size: 14px; text-decoration: none; cursor: pointer; line-height: 1.2; transition: background-color .12s ease, border-color .12s ease, transform .05s ease; } .btn:hover { background: var(--brand-soft); border-color: var(--brand); text-decoration: none; } .btn:active { transform: translateY(1px); } .btn.primary { background: var(--brand-dark); color: #fff; border-color: var(--brand-dark); } .btn.primary:hover { background: var(--brand); border-color: var(--brand); color: #fff; } .btn.danger { background: #fff; color: var(--c-red); border-color: var(--c-red-soft); } .btn.danger:hover { background: var(--c-red-soft); } .btn.gold { background: var(--gold); color: #fff; border-color: var(--gold); } .btn.gold:hover { background: var(--gold-dark); border-color: var(--gold-dark); color: #fff; } .btn.small { padding: 5px 10px; font-size: 12.5px; border-radius: var(--r-sm); } .btn.tiny { padding: 3px 7px; font-size: 11.5px; border-radius: var(--r-sm); } .btn[disabled] { opacity: .45; cursor: not-allowed; } .btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } /* ---- cards (form containers + admin sections) -------------------------- */ .card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--sh-sm); margin: 0 0 22px; } .card.narrow { max-width: 440px; margin: 28px auto; } .card h2, .card h3 { margin: 0 0 14px; } .card .card-foot { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-soft); display: flex; gap: 8px; justify-content: flex-end; } /* ---- forms (input, select, label, textarea) ---------------------------- */ label, .label { display: block; font-size: 13px; color: var(--ink-mid); margin: 0 0 14px; font-weight: 500; } label > input, label > select, label > textarea, .label > input, .label > select, .label > textarea { display: block; width: 100%; margin-top: 6px; } input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], input[type="search"], input[type="tel"], input[type="date"], select, textarea { font: inherit; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-card); color: var(--ink); width: 100%; transition: border-color .12s ease, box-shadow .12s ease; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(14, 165, 183, .18); } textarea { min-height: 90px; resize: vertical; } .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; } .form-grid .full { grid-column: 1 / -1; } @media (max-width: 720px) { .form-grid { grid-template-columns: 1fr; } } .form-help { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; } .checkbox-row, .toggle-row { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; padding: 8px 12px; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-md); } .toggle-row input[type="checkbox"] { width: 18px; height: 18px; margin: 0; cursor: pointer; } .checkbox-row input[type="checkbox"] { margin: 0; } /* ---- alerts ------------------------------------------------------------ */ .alert { padding: 11px 14px; border-radius: var(--r-md); margin: 0 0 16px; border: 1px solid transparent; font-size: 14px; } .alert.err { background: var(--c-red-soft); color: #7f1d1d; border-color: #fca5a5; } .alert.ok { background: var(--c-green-soft); color: #14532d; border-color: #86efac; } .alert.info { background: var(--brand-soft); color: #0c4a52; border-color: #a5e8f0; } .alert.warn { background: var(--gold-soft); color: #6b4d04; border-color: #f3d27e; } /* ---- page header + filters -------------------------------------------- */ .page-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 18px; flex-wrap: wrap; } .page-head h1 { font-size: 26px; margin: 0; } .page-head .actions { display: flex; gap: 8px; flex-wrap: wrap; } .filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 18px; } .filters input[type="text"], .filters input[type="search"], .filters select { max-width: 320px; } .filters .filter-count { margin-left: auto; font-size: 12.5px; color: var(--muted); } /* ---- KPI strip on dashboard ------------------------------------------- */ .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 0 0 24px; } .kpi { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px; box-shadow: var(--sh-sm); } .kpi .num { font-size: 26px; font-weight: 700; color: var(--ink); line-height: 1.1; } .kpi .lab, .kpi > div:not(.num):not(.kpi-sub):last-child { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 4px; } .kpi .kpi-sub { font-size: 11.5px; color: var(--muted); margin-top: 6px; text-transform: none; letter-spacing: 0; } /* ---- status pills (invoice status, send status) ---- */ .pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .03em; background: #e5e7eb; color: #374151; text-transform: uppercase; } .pill.paid { background: #d1fae5; color: #065f46; } .pill.sent { background: #dbeafe; color: #1e40af; } .pill.draft { background: #e5e7eb; color: #374151; } .pill.overdue { background: #fee2e2; color: #991b1b; } .pill.cancelled { background: #f3f4f6; color: #6b7280; text-decoration: line-through; } .pill.success { background: #d1fae5; color: #065f46; } .pill.failed { background: #fee2e2; color: #991b1b; } /* Contact-message pill aliases — alias to success/failed so the code can use semantic "ok"/"warn" without growing the pill palette. (pill.ok = read, pill.warn = unread) */ .pill.ok { background: #d1fae5; color: #065f46; } .pill.warn { background: var(--gold-soft); color: #6b4d04; } /* ---- /admin/contact_messages.php — list + detail ---- */ .contact-unread { background: var(--brand-soft); } .contact-unread:hover { background: #fcf6e0 !important; } .contact-dot { display: inline-block; color: var(--brand); font-size: 14px; line-height: 1; } .contact-detail { max-width: 760px; } .contact-message-body { background: #f9fafb; border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px 18px; white-space: pre-wrap; word-wrap: break-word; font-size: 14px; line-height: 1.55; margin: 8px 0 18px; } .contact-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); } .pill.pending { background: #fef3c7; color: #92400e; } /* ---- generic helpers ---- */ .small { font-size: 12.5px; } .mb-4 { margin-bottom: 16px; } /* ---- table (.lines — invoices list, sites list, categories list) ------- */ table.lines, table.admin-table { width: 100%; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-lg); border-collapse: separate; border-spacing: 0; overflow: hidden; box-shadow: var(--sh-sm); font-size: 13.5px; } table.lines thead, table.admin-table thehead { background: var(--bg-card); } table.lines thead th, table.admin-table thead th, table.lines > thead > tr > th, table.admin-table > thead > tr > th { text-align: left; padding: 11px 12px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border-bottom: 1px solid var(--line); font-weight: 600; background: var(--bg-card); } table.lines tbody td, table.admin-table tbody td { padding: 11px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; } table.lines tbody tr:last-child td, table.admin-table tbody tr:last-child td { border-bottom: none; } table.lines tbody tr:hover, table.admin-table tbody tr:hover { background: var(--brand-soft); } table.lines td.right, table.admin-table td.right { text-align: right; } table.lines td.muted, table.admin-table td.muted { color: var(--muted); font-size: 12.5px; } table.lines td.actions, table.admin-table td.actions, table.lines th.actions, table.admin-table th.actions { text-align: right; white-space: nowrap; } table.lines .nowrap, table.admin-table .nowrap { white-space: nowrap; } table.lines code, table.admin-table code { font-size: 12px; background: var(--bg-alt); padding: 2px 5px; border-radius: 4px; } /* compact row variant for category list (icon + title + counts) */ table.admin-table td.icon-cell { width: 38px; } table.admin-table td.icon-cell .cat-bullet { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; background: var(--brand-soft); color: var(--brand-dark); } /* ---- badges (DRAFT / SENT / PAID + on/off toggle states) -------------- */ .badge { display: inline-block; padding: 3px 9px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; border: 1px solid transparent; } .badge.draft { background: var(--bg-alt); color: var(--ink-mid); border-color: var(--line); } .badge.sent { background: var(--brand-soft); color: var(--brand-dark); border-color: var(--brand); } .badge.paid { background: var(--c-green-soft); color: #14532d; border-color: #86efac; } .badge.overdue { background: #fde2e2; color: #7f1d1d; border-color: #fca5a5; } .badge.cancelled{ background: var(--bg-alt); color: var(--muted); border-color: var(--line); } .badge.on { background: var(--c-green-soft); color: #14532d; border-color: #86efac; } .badge.off { background: var(--bg-alt); color: var(--ink-mid); border-color: var(--line); opacity: .85; } /* ---- enable/disable toggle (used on categories + sites rows) ----------- */ .enable-toggle { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 3px 4px 3px 10px; font-size: 12px; font-weight: 600; background: var(--bg-card); cursor: pointer; transition: background-color .12s ease, border-color .12s ease; } .enable-toggle.is-on { background: var(--c-green-soft); border-color: #86efac; color: #14532d; } .enable-toggle.is-off { background: var(--bg-alt); border-color: var(--line); color: var(--ink-mid); } .enable-toggle .knob { display: inline-block; width: 28px; height: 18px; border-radius: 999px; background: #d1d5db; position: relative; transition: background-color .12s ease; } .enable-toggle .knob::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .12s ease; } .enable-toggle.is-on .knob { background: var(--c-green); } .enable-toggle.is-on .knob::after { transform: translateX(10px); } .enable-toggle:hover { filter: brightness(.97); } /* ---- Destacado / Normal tier toggle (admin/sites.php) ---------------- Gold pill for 'top' (Destacado), muted outline for 'normal'. Clicking flips via /admin/sites.php?action=set_tier (CSRF-protected POST). */ .tier-toggle { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 3px 10px; font-size: 12px; font-weight: 700; cursor: pointer; transition: background-color .12s ease, border-color .12s ease, color .12s ease; } .tier-toggle.is-top { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); border-color: #f59e0b; color: #92400e; } .tier-toggle.is-normal { background: var(--bg-card); border-color: var(--line); color: var(--ink-mid); } .tier-toggle:hover { filter: brightness(.97); } /* ---- login page (body.login) ------------------------------------------ */ body.login { display: flex; flex-direction: column; min-height: 100vh; } body.login main.wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 24px; } body.login main.wrap h1 { font-size: 22px; margin: 0 0 18px; text-align: center; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: center; } body.login main.wrap h1 img { height: 40px; } body.login .card.narrow { box-shadow: var(--sh-md); } body.login .alert.err { font-size: 13px; } body.login .card-foot { font-size: 12px; color: var(--muted); } /* ---- generic helpers used by CRUD pages ------------------------------- */ .muted { color: var(--muted); } .text-right { text-align: right; } .text-center { text-align: center; } .flex { display: flex; gap: 12px; align-items: center; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .mt-0 { margin-top: 0; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 18px; } .mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 18px; } .empty { padding: 36px 18px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--r-lg); background: var(--bg-card); } .section-title { font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 18px 0 8px; } /* ---- responsive: collapse admin nav on narrow screens ------------------ */ @media (max-width: 720px) { body.admin .hdr .wrap, body.login .hdr .wrap { flex-direction: column; align-items: flex-start; } body.admin .hdr nav, body.login .hdr nav { width: 100%; } .page-head h1 { font-size: 22px; } } /* ========================================================================= /admin/* — left sidebar nav (replaces the previous top-bar nav). Two-column grid: 240px sticky sidebar | flexible main column. The sidebar never scrolls; main scrolls inside its own overflow context so the brand/nav are always visible even on the 364-row sites list. ========================================================================= */ body.admin { background: var(--bg); } body.admin .admin-shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; } /* ---- sidebar ----- */ body.admin .admin-sidebar { background: var(--bg-card); border-right: 1px solid var(--line); padding: 22px 14px 18px; position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; } body.admin .admin-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 10px; border-bottom: 1px solid var(--line-soft); text-decoration: none; } body.admin .admin-brand img { height: 34px; width: auto; } body.admin .admin-brand span { font-weight: 700; color: var(--ink); font-size: 14px; line-height: 1.15; letter-spacing: -0.01em; } body.admin .admin-user { padding: 10px 10px 4px; } body.admin .admin-user-greet { font-size: 12.5px; font-weight: 600; color: var(--ink); text-transform: none; } body.admin .admin-user-mail { font-size: 11.5px; color: var(--muted); margin-top: 2px; word-break: break-all; } /* ---- nav links ----- */ body.admin .admin-nav { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; } body.admin .admin-nav-section { font-size: 10.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; padding: 14px 10px 6px; } body.admin .admin-nav-section:first-child { padding-top: 0; } body.admin .admin-nav-link { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--r-md); color: var(--ink-mid); font-weight: 500; font-size: 13.5px; text-decoration: none; border-left: 3px solid transparent; transition: background-color .12s ease, color .12s ease; } body.admin .admin-nav-link:hover { background: var(--brand-soft); color: var(--brand-dark); text-decoration: none; } body.admin .admin-nav-link.active { background: var(--brand-dark); color: #fff; border-left-color: var(--brand); } body.admin .admin-nav-link.active:hover { background: var(--brand-dark); color: #fff; } /* Label + badge alignment — the label fills the available space and pushes the badge to the far right of the nav row. */ body.admin .admin-nav-link .admin-nav-label { flex: 1; min-width: 0; } body.admin .admin-nav-badge { display: inline-block; min-width: 22px; padding: 1px 7px; font-size: 11px; font-weight: 700; text-align: center; color: #fff; background: var(--brand); border-radius: 10px; line-height: 18px; } body.admin .admin-nav-link.active .admin-nav-badge { background: #fff; color: var(--brand-dark); } body.admin .admin-nav-ico { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex-shrink: 0; } body.admin .admin-nav-ico svg { width: 18px; height: 18px; stroke-width: 2; } /* ---- main column ----- */ body.admin .admin-main { padding: 28px 36px 80px; min-width: 0; /* avoid grid blowout on wide tables */ background: var(--bg); } @media (max-width: 980px) { body.admin .admin-shell { grid-template-columns: minmax(0, 1fr); } body.admin .admin-sidebar { position: static; height: auto; border-right: none; border-bottom: 1px solid var(--line); } body.admin .admin-nav { flex-direction: row; flex-wrap: wrap; } body.admin .admin-nav-section { width: 100%; } body.admin .admin-main { padding: 22px 18px 60px; } } /* ============================================================================= /admin/site_crawler.php — dashboard + new tabs Operator-directive 2026-07-06. ============================================================================= */ /* Dashboard stat cards (5 across at full width, 2-3 on narrow screens) */ .dash-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin: 0 0 22px; } .dash-card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; display: flex; flex-direction: column; } .dash-card-num { font-size: 30px; font-weight: 700; line-height: 1; color: var(--ink); } .dash-card-label { font-size: 12.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 6px; } .dash-card-sub { font-size: 12px; color: var(--muted); margin-top: 4px; } .dash-card-ok { border-left: 4px solid #10b981; } .dash-card-bad { border-left: 4px solid #ef4444; } /* Status tile grid (one per fetch_status) */ .status-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .status-tile { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 8px; background: var(--soft); border: 1px solid var(--line); gap: 4px; } .status-tile-name { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); } .status-tile-n { font-size: 22px; font-weight: 700; color: var(--ink); } .status-tile-meta { font-size: 11.5px; color: var(--muted); } .status-tile-ok { background: #d1fae5; border-color: #6ee7b7; } .status-tile-ok .status-tile-name { color: #065f46; } .status-tile-failed { background: #fee2e2; border-color: #fca5a5; } .status-tile-failed .status-tile-name { color: #991b1b; } .status-tile-blocked_robots { background: #fef3c7; border-color: #fcd34d; } .status-tile-blocked_robots .status-tile-name { color: #92400e; } .status-tile-timeout { background: #ffedd5; border-color: #fdba74; } .status-tile-timeout .status-tile-name { color: #9a3412; } .status-tile-ssl_error { background: #fce7f3; border-color: #f9a8d4; } .status-tile-ssl_error .status-tile-name { color: #9d174d; } .status-tile-pending { background: #e5e7eb; border-color: #d1d5db; } .status-tile-redirect_loop { background: #fee2e2; border-color: #fca5a5; } .status-tile-too_large { background: #ffedd5; border-color: #fdba74; } .status-tile-dns_error { background: #f3e8ff; border-color: #d8b4fe; } .status-tile-dns_error .status-tile-name { color: #6b21a8; } /* Error bars (last-24h error breakdown) */ .error-bars { list-style: none; padding: 0; margin: 0; } .error-bars li { display: flex; align-items: center; gap: 10px; padding: 6px 0; } .error-bar-label { width: 130px; font-size: 12.5px; color: var(--muted); } .error-bar { height: 14px; background: linear-gradient(90deg, #fbbf24, #ef4444); border-radius: 3px; min-width: 4px; flex: 1 1 auto; } .error-bar-n { font-size: 13px; font-weight: 600; min-width: 24px; text-align: right; } /* Screenshot gallery */ .screenshot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } .screenshot-card { display: block; background: var(--card); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; text-decoration: none; color: var(--ink); transition: transform 0.12s, box-shadow 0.12s; } .screenshot-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.08); } .screenshot-card img { display: block; width: 100%; height: 140px; object-fit: cover; object-position: top center; background: #f3f4f6; border-bottom: 1px solid var(--line); } .screenshot-card-meta { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 0; } .screenshot-card-id { font-size: 11px; color: var(--muted); } .screenshot-card-title { font-size: 12.5px; padding: 4px 10px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); } /* Detail card head with action row */ .card-head-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 0 0 14px; } .card-head-row h2 { margin: 0; } .card-head-actions { display: flex; gap: 8px; flex-wrap: wrap; } /* Bulk-select bar at bottom of tables */ .bulk-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; margin: 0; background: var(--soft); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 10px 10px; position: sticky; bottom: 0; z-index: 5; } .bulk-bar #bulk-count { font-size: 13px; color: var(--muted); } /* kv (key/value) definition list — for the identity card */ dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; } dl.kv dt { color: var(--muted); font-size: 12.5px; font-weight: 600; } dl.kv dd { margin: 0; font-size: 13px; word-break: break-word; } dl.kv dd.err { color: #b91c1c; } dl.kv dd code { background: var(--soft); padding: 1px 5px; border-radius: 3px; font-size: 12px; } /* Destructive button */ .btn.danger { background: #fee2e2; color: #991b1b; border-color: #fca5a5; } .btn.danger:hover { background: #fecaca; } .btn.small { padding: 4px 10px; font-size: 12px; } /* Status pill — for the new fetch_status values */ .pill.ok { background: #d1fae5; color: #065f46; } .pill.failed { background: #fee2e2; color: #991b1b; } .pill.pending { background: #e5e7eb; color: #374151; } .pill.timeout { background: #ffedd5; color: #9a3412; } .pill.too_large { background: #fde68a; color: #92400e; } .pill.redirect_loop { background: #fee2e2; color: #7f1d1d; } .pill.dns_error { background: #f3e8ff; color: #6b21a8; } .pill.ssl_error { background: #fce7f3; color: #9d174d; } .pill.blocked_robots { background: #fef3c7; color: #92400e; } /* Outreach lifecycle pills */ .pill.contacted { background: #dbeafe; color: #1e40af; } .pill.resolved { background: #d1fae5; color: #065f46; } .pill.ignored { background: #f3f4f6; color: #6b7280; text-decoration: line-through; } /* Empty-state card */ .card.empty { text-align: center; padding: 28px 18px; } /* Responsive squeeze: stack bulk bar */ @media (max-width: 720px) { .bulk-bar { flex-direction: column; align-items: stretch; } dl.kv { grid-template-columns: 1fr; } } /* ============================================================ Admin page header — used by every admin page (sites, categories, site_crawler, review_generator, agent). Pattern:

Title

Subtitle

============================================================ */ .admin-page-head { margin: 0 0 22px; padding: 0 0 16px; border-bottom: 1px solid var(--line-soft); } .admin-page-head h1 { margin: 0 0 4px; font-size: 24px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; } .admin-page-head p.muted { margin: 0; font-size: 13.5px; color: var(--muted); max-width: 720px; line-height: 1.45; } .admin-page-head .actions { float: right; display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; } /* ============================================================ Admin tabs — used by every tabbed admin page. Pattern: ============================================================ */ .admin-tabs { display: flex; flex-wrap: wrap; gap: 2px; margin: 0 0 20px; padding: 4px; background: var(--soft); border: 1px solid var(--line); border-radius: var(--r-lg); } .admin-tab { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; font-size: 13.5px; font-weight: 600; color: var(--ink-mid); text-decoration: none; border-radius: var(--r-md); transition: background .12s, color .12s; } .admin-tab:hover { background: rgba(255, 255, 255, .55); color: var(--ink); } .admin-tab.active { background: var(--bg-card); color: var(--brand-dark); box-shadow: var(--sh-sm); } .admin-tab .count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 18px; padding: 0 6px; font-size: 11.5px; font-weight: 700; color: var(--ink-mid); background: var(--bg); border: 1px solid var(--line); border-radius: 9px; } .admin-tab.active .count { background: var(--brand-soft); border-color: rgba(14, 165, 183, .25); color: var(--brand-dark); } /* Sub-tabs (used INSIDE a tab for second-level navigation, e.g. Pipeline tab has drafts/pipeline/blacklist sub-tabs). */ .admin-subtabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 12px 0 16px; padding: 4px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); } .admin-subtab { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; font-size: 12.5px; font-weight: 600; color: var(--ink-mid); text-decoration: none; border-radius: var(--r-sm); transition: background .12s, color .12s; } .admin-subtab:hover { background: var(--soft); color: var(--ink); } .admin-subtab.active { background: var(--bg-card); color: var(--brand-dark); box-shadow: var(--sh-sm); } .admin-subtab .badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 16px; padding: 0 5px; font-size: 10.5px; font-weight: 700; color: var(--ink-mid); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; } .admin-subtab.active .badge { background: var(--brand-soft); border-color: rgba(14, 165, 183, .25); color: var(--brand-dark); } .admin-tab .count.warn { background: var(--c-red-soft); border-color: #fca5a5; color: #7f1d1d; } /* ============================================================ Toolbar (action row above tables) — used on admin lists. Pattern: ============================================================ */ .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px; } .toolbar form { display: inline-flex; gap: 6px; align-items: center; } .toolbar form input[type="text"], .toolbar form input[type="number"], .toolbar form input[type="search"], .toolbar form select { width: auto; display: inline-block; margin: 0; padding: 6px 10px; font-size: 13px; } .toolbar .muted { margin-left: auto; font-size: 13px; color: var(--muted); } /* ============================================================ Stacked form layout (the form .form-grid pattern used by category_edit.php / site_edit.php / clt edit). ============================================================ */ .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; margin: 0; } .form-grid label { margin: 0; } .form-grid label.full, .form-grid .full { grid-column: 1 / -1; } .form-grid textarea { min-height: 70px; resize: vertical; font-family: inherit; } @media (max-width: 720px) { .form-grid { grid-template-columns: 1fr; } } /* ============================================================ Review-generator specific: extracted section cards with inline edit forms, source-marker chips, JSON previews. ============================================================ */ .rg-section { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 20px; margin: 0 0 14px; } .rg-section h3 { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: var(--ink); /* Override the .card h3 / default h3 uppercase styling. Each section title is already translated by i18n (e.g. "Resumen ejecutivo"), no need to scream at the operator in all caps. */ text-transform: none; letter-spacing: 0; } .rg-section h3 .badge { margin-left: 6px; } .rg-section.rg-section--compact { padding: 14px 16px; } .rg-section h4 { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--ink-mid); text-transform: none; letter-spacing: 0; } .rg-content { font-size: 14px; line-height: 1.55; color: var(--ink); margin: 0 0 8px; } .rg-content p { margin: 0 0 8px; } .rg-content p:last-child { margin-bottom: 0; } .rg-content pre { background: var(--soft); border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 12px; font-size: 12.5px; overflow-x: auto; margin: 0; } .rg-edit { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); } .rg-edit summary { cursor: pointer; font-size: 12.5px; color: var(--brand-dark); font-weight: 600; padding: 4px 0; } .rg-edit summary:hover { text-decoration: underline; } .rg-edit textarea { font-family: inherit; font-size: 13px; line-height: 1.5; width: 100%; margin: 6px 0; resize: vertical; min-height: 60px; } .rg-meta-grid { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0 0 14px; font-size: 13px; } .rg-meta-grid dt { font-weight: 600; color: var(--ink-mid); margin: 0; } .rg-meta-grid dd { margin: 0; color: var(--ink); word-break: break-word; } .rg-meta-grid code { font-size: 12.5px; } .rg-src-marker { display: inline-block; padding: 1px 6px; font-size: 11.5px; font-weight: 700; color: var(--brand-dark); background: var(--brand-soft); border: 1px solid rgba(14, 165, 183, .25); border-radius: 9px; text-decoration: none; vertical-align: 1px; } .rg-src-marker:hover { background: var(--brand); color: #fff; } .rg-evidence { margin: 0; padding: 0; list-style: none; counter-reset: rg-evidence; } .rg-evidence li { counter-increment: rg-evidence; padding: 10px 12px; margin: 0 0 6px; background: var(--soft); border: 1px solid var(--line); border-radius: var(--r-md); font-size: 13px; } .rg-evidence li::before { content: "[" counter(rg-evidence) "]"; font-weight: 700; color: var(--brand-dark); margin-right: 8px; } .rg-evidence li:last-child { margin-bottom: 0; } .rg-evidence small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.45; } .rg-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 16px; padding: 12px 14px; background: var(--soft); border: 1px solid var(--line); border-radius: var(--r-md); } .rg-actions form { display: inline-flex; gap: 6px; align-items: center; margin: 0; } .rg-actions input[type="text"] { width: auto; display: inline-block; margin: 0; padding: 6px 10px; font-size: 13px; min-width: 180px; } .rg-back { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-mid); font-size: 13px; text-decoration: none; margin-bottom: 12px; } .rg-back:hover { color: var(--brand-dark); text-decoration: underline; } .rg-json-block { margin: 0; padding: 10px 12px; background: var(--soft); border: 1px solid var(--line); border-radius: var(--r-md); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; line-height: 1.5; white-space: pre; overflow-x: auto; } /* Tight button variant for the "← Volver" / "Ver" inline links */ .btn.link { background: none; border: none; padding: 0; color: var(--brand-dark); text-decoration: none; font-weight: 600; font-size: 13px; } .btn.link:hover { text-decoration: underline; color: var(--brand); } /* Screenshot card (1280x800 headless-Chrome capture from the crawler). Lives in var/state/dtew-crawler/screenshots/{site_crawl_id}/homepage.png. The actual routes through /admin/site_crawler/screenshot.php (a real endpoint that streams the file with proper auth + content-type). Clicking the image opens the source page in a new tab. */ .rg-screenshot { display: block; width: 100%; max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-sm); background: var(--soft); cursor: zoom-in; transition: transform .12s, box-shadow .12s; } .rg-screenshot:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0, 0, 0, .08); } .rg-screenshot-frame { display: block; background: var(--soft); border: 1px solid var(--line); border-radius: var(--r-md); padding: 8px; margin: 0; } .rg-screenshot-frame img { display: block; width: 100%; } .rg-screenshot-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 8px 2px 0; font-size: 12.5px; color: var(--muted); } .rg-screenshot-meta code { font-size: 11.5px; padding: 1px 6px; background: var(--bg); border: 1px solid var(--line); border-radius: 4px; } .rg-screenshot-empty { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--soft); border: 1px dashed var(--line); border-radius: var(--r-md); font-size: 13px; color: var(--muted); } /* Inline list of pages the crawler fetched. Compact, scrollable on narrow screens. */ .rg-pages-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr; gap: 6px; } .rg-pages-list li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; background: var(--soft); border: 1px solid var(--line); border-radius: var(--r-md); font-size: 12.5px; } .rg-pages-list .pill { flex: 0 0 auto; } .rg-pages-list a { color: var(--brand-dark); text-decoration: none; word-break: break-all; flex: 1 1 200px; } .rg-pages-list a:hover { text-decoration: underline; } .rg-pages-list .muted { font-size: 11.5px; } /* Show-page action bar — buttons laid out in a flex row that wraps cleanly on narrow screens, with the destructive button pushed to the end (rg-actions--left vs rg-actions--right). */ .rg-actions--left { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex: 1 1 auto; } .rg-actions--right { display: flex; gap: 8px; flex: 0 0 auto; } @media (max-width: 720px) { .rg-actions { flex-direction: column; align-items: stretch; } .rg-actions--left, .rg-actions--right { width: 100%; } } /* ========================================================================== /admin/pipeline.php — unified operator GUI (operator-direct 2026-07-09) ========================================================================== */ /* Header counter on Drafts tab */ .pipeline-header { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 1em; margin-bottom: 1em; } .pipeline-header h2 { margin: 0; } .pipeline-counter { display: flex; align-items: baseline; gap: 0.4em; font-size: 0.95em; color: var(--c-fg-muted, #888); } .pipeline-counter .big { font-size: 2em; font-weight: 700; color: var(--c-fg, #111); line-height: 1; } .pipeline-counter .target { font-size: 1.1em; font-weight: 500; } .pipeline-counter .pill { margin-left: 0.5em; font-size: 0.85em; } /* Stat grid for the Pipeline tab */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.75em; margin: 1em 0 1.5em; } .stat-box { display: block; padding: 1em; border: 1px solid var(--c-border, #e5e5e5); border-radius: 8px; background: var(--c-card, #fff); text-decoration: none; color: inherit; transition: border-color 0.15s, background 0.15s; } a.stat-box:hover { border-color: var(--c-accent, #3a7afe); background: var(--c-card-hover, #f6f8ff); } .stat-value { font-size: 2em; font-weight: 700; line-height: 1.1; color: var(--c-fg, #111); } .stat-label { font-size: 0.85em; color: var(--c-fg-muted, #888); margin-top: 0.25em; } .stat-box.stat-ok { border-left: 3px solid #2da44e; } .stat-box.stat-warn { border-left: 3px solid #bf8700; } .stat-box.stat-danger { border-left: 3px solid #cf222e; } .stat-box.stat-muted { opacity: 0.7; } .stat-box.stat-running { border-left: 3px solid #3a7afe; animation: pulse 1.6s ease-in-out infinite; } .stat-box.stat-target { border: 2px solid var(--c-accent, #3a7afe); background: var(--c-card-accent, #f0f4ff); } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } /* Draft list — the operator's main view */ .draft-list { display: grid; gap: 1em; margin-top: 1em; } .draft-card { border: 1px solid var(--c-border, #e5e5e5); border-radius: 8px; padding: 1em 1.25em; background: var(--c-card, #fff); transition: border-color 0.15s; } .draft-card:hover { border-color: var(--c-accent, #3a7afe); } .draft-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75em; margin-bottom: 0.75em; } .draft-url { font-weight: 600; font-size: 0.95em; color: var(--c-fg, #111); text-decoration: none; word-break: break-all; } a.draft-url:hover { text-decoration: underline; } .draft-meta { display: flex; flex-wrap: wrap; gap: 0.4em; align-items: center; font-size: 0.85em; } .draft-summary { font-size: 0.95em; line-height: 1.55; color: var(--c-fg, #222); margin: 0.5em 0 1em; max-height: 7em; overflow: hidden; position: relative; } .draft-summary::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1.5em; background: linear-gradient(to bottom, transparent, var(--c-card, #fff)); pointer-events: none; } .draft-actions { display: flex; flex-wrap: wrap; gap: 0.5em; align-items: center; border-top: 1px solid var(--c-border-soft, #f0f0f0); padding-top: 0.75em; } .draft-actions form { margin: 0; } /* Pill variants (reuse existing .pill where possible) */ .pill-ok { background: #dafbe1; color: #1a7f37; padding: 0.15em 0.6em; border-radius: 12px; font-size: 0.85em; } .pill-warn { background: #fff8c5; color: #9a6700; padding: 0.15em 0.6em; border-radius: 12px; font-size: 0.85em; } .pill-danger { background: #ffebe9; color: #cf222e; padding: 0.15em 0.6em; border-radius: 12px; font-size: 0.85em; } /* Button variants */ .btn-primary { background: var(--c-accent, #3a7afe); color: #fff; border: 1px solid var(--c-accent, #3a7afe); } .btn-primary:hover { background: #2a5fd9; border-color: #2a5fd9; } .btn-secondary { background: var(--c-card, #fff); color: var(--c-fg, #111); border: 1px solid var(--c-border, #ccc); } .btn-secondary:hover { background: #f6f6f6; } .btn-danger { background: #cf222e; color: #fff; border: 1px solid #cf222e; } .btn-danger:hover { background: #a40e26; } .btn-danger-text { background: none; color: #cf222e; border: none; cursor: pointer; } .btn-danger-text:hover { text-decoration: underline; } .btn-text { background: none; color: var(--c-accent, #3a7afe); border: none; cursor: pointer; } .btn-text:hover { text-decoration: underline; } /* Reject inline form */ .reject-details { margin-right: auto; } .reject-details summary { cursor: pointer; user-select: none; list-style: none; padding: 0.35em 0.75em; font-size: 0.9em; color: #cf222e; } .reject-details summary::-webkit-details-marker { display: none; } .reject-details summary:hover { text-decoration: underline; } .reject-form { margin-top: 0.5em; display: flex; gap: 0.4em; flex-wrap: wrap; } .reject-form input[type=text] { flex: 1 1 200px; padding: 0.35em 0.5em; border: 1px solid var(--c-border, #ccc); border-radius: 4px; } /* Blacklist tab */ .blacklist-add { display: flex; gap: 0.5em; flex-wrap: wrap; margin-bottom: 1.5em; padding-bottom: 1.5em; border-bottom: 1px solid var(--c-border-soft, #f0f0f0); } .blacklist-add input { padding: 0.45em 0.6em; border: 1px solid var(--c-border, #ccc); border-radius: 4px; font-size: 0.95em; } .blacklist-add input[name=domain] { flex: 0 0 200px; } .blacklist-add input[name=reason] { flex: 1 1 240px; } /* Log tail viewer */ .log-tail { background: #0d1117; color: #c9d1d9; padding: 0.75em 1em; border-radius: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.82em; line-height: 1.5; max-height: 18em; overflow: auto; white-space: pre-wrap; word-break: break-all; } /* Full review display (?show=N) */ .draft-full h3 { margin-top: 1.5em; margin-bottom: 0.5em; font-size: 1.05em; color: var(--c-fg-muted, #666); border-bottom: 1px solid var(--c-border-soft, #f0f0f0); padding-bottom: 0.25em; } .review-section { font-size: 0.95em; line-height: 1.6; margin-bottom: 1em; } /* Action row for manual triggers */ .action-row { display: flex; flex-wrap: wrap; gap: 0.5em; margin: 1em 0; } .action-row form { margin: 0; } /* Compact admin table for crawl failures */ .admin-table.compact td, .admin-table.compact th { padding: 0.4em 0.6em; font-size: 0.9em; } @media (max-width: 720px) { .pipeline-header { flex-direction: column; align-items: flex-start; } .draft-actions { flex-direction: column; align-items: stretch; } .draft-actions form { width: 100%; } .draft-actions .btn { width: 100%; } .stat-grid { grid-template-columns: 1fr 1fr; } } /* --------------------------------------------------------------------------- Pipeline flow indicator (added 2026-07-09 second-pass). Five numbered cells with arrows between them. Each cell links to the page where the operator can drill into that stage. Non-empty cells highlight so a glance says "where is the work sitting right now". ------------------------------------------------------------------------- */ .pipeline-flow { display: flex; align-items: stretch; gap: 0; margin: 1em 0 1.5em; flex-wrap: wrap; } .flow-cell { flex: 1 1 0; min-width: 110px; padding: 0.85em 1em; border: 1px solid var(--c-border, #e5e5e5); border-right-width: 0; background: var(--c-card, #fff); text-decoration: none; color: inherit; display: flex; flex-direction: column; align-items: flex-start; gap: 0.25em; transition: background 0.15s, border-color 0.15s; } .flow-cell:last-of-type { border-right-width: 1px; } .flow-cell:hover { background: var(--brand-soft, #f8f8ff); } .flow-cell.has-data { border-color: var(--c-accent, #6c5ce7); border-bottom-width: 2px; } .flow-num { font-size: 1.5em; font-weight: 700; line-height: 1; color: var(--c-fg, #111); } .flow-cell.has-data .flow-num { color: var(--c-accent, #6c5ce7); } .flow-label { font-size: 0.85em; color: var(--c-fg-muted, #888); text-transform: uppercase; letter-spacing: 0.04em; } .flow-arrow { display: flex; align-items: center; padding: 0 0.5em; font-size: 1.4em; color: var(--c-fg-muted, #888); font-weight: 300; user-select: none; } @media (max-width: 720px) { .pipeline-flow { flex-direction: column; } .flow-cell { border-right-width: 1px; border-bottom-width: 0; } .flow-cell:last-of-type { border-bottom-width: 1px; } .flow-arrow { display: none; } } /* --------------------------------------------------------------------------- Drafts-tab improvements: stateful border, condensed card, full-review surfaced as an expandable inline pane (no scroll-to-bottom). The drafts list page now feels like a stack of cards the operator can triage linearly rather than 20 copies of the same Approve/Reject bar. ------------------------------------------------------------------------- */ .draft-card { border-left: 3px solid var(--c-border, #e5e5e5); padding: 1em 1.1em; margin-bottom: 0.75em; background: var(--c-card, #fff); border-radius: 6px; border: 1px solid var(--c-border, #e5e5e5); } .draft-card.state-draft { border-left: 3px solid var(--c-accent, #6c5ce7); } .draft-summary { margin: 0.6em 0; line-height: 1.5; } .draft-actions { display: flex; gap: 0.5em; align-items: center; flex-wrap: wrap; } .draft-full { margin-top: 1.5em; border-color: var(--c-accent, #6c5ce7); } .draft-full h3 { margin: 1em 0 0.25em; font-size: 0.95em; text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-fg-muted, #888); } .review-section { line-height: 1.6; margin-bottom: 0.75em; } /* ========================================================================= DTEW Directory admin (operator-direct 2026-07-11) Consolidated tabs: home / categorias / sitios / reviews / lista-negra ========================================================================= */ /* ----- Section + KPI grid (clickable KPI cards) ----- */ .dir-section { margin-bottom: 18px; } .dir-kpis { margin-bottom: 14px; } .kpi-clickable { cursor: pointer; transition: transform .12s, box-shadow .12s; text-decoration: none; color: inherit; display: block; } .kpi-clickable:hover { transform: translateY(-2px); box-shadow: var(--sh-md); } /* ----- Toolbar: search + chips + filter button ----- */ .dir-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px 14px; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-md); margin: 14px 0; } .dir-search { position: relative; flex: 1; min-width: 220px; } .dir-search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); pointer-events: none; } .dir-search input { width: 100%; padding: 8px 12px 8px 36px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); font-size: 14px; } .dir-search input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); } .dir-chips { display: flex; gap: 6px; flex-wrap: wrap; } .dir-chip { display: inline-block; padding: 5px 11px; font-size: 12.5px; font-weight: 500; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-mid); background: var(--bg-card); text-decoration: none; transition: all .12s; } .dir-chip:hover { border-color: var(--brand); color: var(--brand-dark); } .dir-chip.active { background: var(--brand); border-color: var(--brand); color: #fff; } .dir-select { padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-card); font-size: 13px; } /* ----- Table wrapper + icon actions ----- */ .dir-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-card); } .dir-table-wrap .admin-table { border: none; } .dir-actions { display: flex; gap: 4px; justify-content: flex-end; } .dir-icon-btn { width: 28px; height: 28px; padding: 0; border: 1px solid var(--line); background: var(--bg-card); border-radius: var(--r-sm); cursor: pointer; font-size: 14px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-mid); transition: all .12s; } .dir-icon-btn:hover { border-color: var(--brand); color: var(--brand-dark); } .dir-icon-btn.is-on { color: #0a7a3a; border-color: #86efac; background: var(--c-green-soft); } .dir-icon-btn.is-off { color: var(--muted); } .dir-icon-btn.is-top { color: var(--gold-dark); border-color: var(--gold); background: var(--gold-soft); } .dir-icon-btn.danger:hover { color: #991b1b; border-color: #fca5a5; background: #fee2e2; } .dir-star { color: var(--gold-dark); font-weight: 600; } /* ----- Empty states ----- */ .dir-empty { padding: 32px 20px; background: var(--bg-card); border: 1px dashed var(--line); border-radius: var(--r-md); text-align: center; color: var(--muted); } .dir-empty svg { width: 36px; height: 36px; color: var(--line); margin: 0 auto 8px; display: block; } .dir-empty p { margin: 0; font-size: 13.5px; } .dir-empty.small { padding: 18px 16px; } .dir-empty.small p { font-size: 12.5px; } /* ----- Blacklist: sit sample URLs under the domain ----- */ .dir-bl-samples { display: inline-block; margin-top: 3px; line-height: 1.4; word-break: break-all; max-width: 380px; } /* ----- Inline form for blacklist add ----- */ .dir-add-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 12px 14px; background: var(--gold-soft); border: 1px dashed var(--gold); border-radius: var(--r-md); margin: 14px 0; } .dir-add-form input[type="text"] { padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 13px; min-width: 200px; } .dir-add-form input[type="text"]:first-of-type { min-width: 240px; } /* ========================================================================= Modal (cat + site create/edit) ========================================================================= */ .dir-modal { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 20px; } .dir-modal.is-open { display: flex; } .dir-modal-backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.55); backdrop-filter: blur(2px); } .dir-modal-card { position: relative; background: var(--bg-card); border-radius: var(--r-lg); box-shadow: var(--sh-lg); width: 100%; max-width: 640px; max-height: calc(100vh - 40px); display: flex; flex-direction: column; overflow: hidden; animation: dir-modal-in .18s ease-out; } .dir-modal-card-wide { max-width: 820px; } @keyframes dir-modal-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } } .dir-modal-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--line); background: linear-gradient(to right, var(--brand-soft), transparent); } .dir-modal-head h2 { margin: 0; font-size: 18px; color: var(--ink); } .dir-modal-close { width: 32px; height: 32px; border: none; background: transparent; font-size: 24px; line-height: 1; cursor: pointer; color: var(--muted); border-radius: var(--r-sm); } .dir-modal-close:hover { background: var(--bg); color: var(--ink); } .dir-modal-body { padding: 20px; overflow-y: auto; flex: 1; } .dir-modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .dir-field { display: flex; flex-direction: column; gap: 4px; } .dir-field-full { grid-column: 1 / -1; } .dir-field > span { font-size: 12px; font-weight: 600; color: var(--ink-mid); text-transform: uppercase; letter-spacing: .03em; } .dir-field > span em { color: #dc2626; font-style: normal; } .dir-field input[type="text"], .dir-field input[type="url"], .dir-field input[type="number"], .dir-field textarea, .dir-field select { padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); font-size: 14px; font-family: inherit; } .dir-field input:focus, .dir-field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); } .dir-field textarea { resize: vertical; min-height: 50px; } .dir-help { color: var(--muted); font-size: 11.5px; } /* toggle rows (Active / Destacado) */ .dir-toggle { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer; background: var(--bg); } .dir-toggle:hover { border-color: var(--brand); } .dir-toggle-gold { background: var(--gold-soft); border-color: var(--gold); } .dir-toggle input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; } .dir-toggle span { font-size: 13.5px; } /* category multi-checkbox inside site modal */ .dir-cats { border: none; padding: 0; margin: 0; } .dir-cats legend { font-size: 12px; font-weight: 600; color: var(--ink-mid); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 6px; padding: 0; } .dir-cats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; max-height: 220px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px; background: var(--bg); } .dir-cat-check { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: var(--r-sm); cursor: pointer; font-size: 13px; } .dir-cat-check:hover { background: var(--brand-soft); } .dir-cat-check input { cursor: pointer; } /* footer */ .dir-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--line); background: var(--bg); } /* ----- Review inline citations rendered from LLM markdown ----- */ .cite, a.cite { display: inline-block; font-size: 0.78em; vertical-align: super; padding: 0 3px; margin: 0 1px; color: var(--link, #0ea5b7); text-decoration: none; font-weight: 500; border: 1px solid rgba(14, 165, 183, 0.25); border-radius: 3px; background: rgba(14, 165, 183, 0.06); } .cite:hover { background: rgba(14, 165, 183, 0.16); border-color: rgba(14, 165, 183, 0.55); } sup.cite-marker { font-size: 0.78em; color: var(--muted, #6b7280); margin: 0 1px; font-weight: 500; }