/* ==========================================================
   CERCA FEATURE — HERRAMIENTAS V2.0 / V606
   Catálogo visual tipo streaming.
   Fuente canónica: src/features/herramientas/herramientas.css
   ========================================================== */

:root{
  --ctc-bg:#020711;
  --ctc-panel:#07111f;
  --ctc-line:rgba(145,196,220,.10);
  --ctc-text:#f5fbff;
  --ctc-muted:#748b9a;
  --ctc-cyan:#4de4ff;
  --ctc-blue:#58a8ff;
  --ctc-violet:#927cff;
  --ctc-green:#3ee895;
  --ctc-red:#ff5b78;
  --ctc-amber:#ffc65a;
}

html.cerca-tools-center-open,
body.cerca-tools-center-open{
  overflow:hidden!important;
}

#cercaToolsCenterV1{
  position:fixed;
  inset:0;
  z-index:999999;

  display:none;

  width:100%;
  height:100%;

  overflow:hidden;

  background:
    radial-gradient(circle at 92% 2%,rgba(77,228,255,.08),transparent 24%),
    radial-gradient(circle at 0% 36%,rgba(146,124,255,.055),transparent 28%),
    linear-gradient(180deg,#040b16,#020711);

  color:var(--ctc-text);

  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

#cercaToolsCenterV1.open{
  display:block;
}

#cercaToolsCenterV1 *{
  box-sizing:border-box;
}

#cercaToolsCenterV1 button,
#cercaToolsCenterV1 input{
  font:inherit;
}

#cercaToolsCenterV1 button{
  -webkit-tap-highlight-color:transparent;
}

#cercaToolsCenterV1 .ctc-safe{
  width:100%;
  height:100%;

  display:flex;
  flex-direction:column;

  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}

#cercaToolsCenterV1 .ctc-header{
  flex:none;

  min-height:68px;
  padding:11px 15px;

  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  gap:11px;
  align-items:center;

  border-bottom:1px solid rgba(145,196,220,.065);

  background:rgba(3,10,19,.90);

  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

#cercaToolsCenterV1 .ctc-back{
  width:42px;
  height:42px;
  padding:0;

  display:grid;
  place-items:center;

  border:1px solid rgba(145,196,220,.10);
  border-radius:14px;

  background:rgba(255,255,255,.026);

  color:#e1edf3;
}

#cercaToolsCenterV1 .ctc-back:active{
  transform:scale(.96);
}

#cercaToolsCenterV1 .ctc-back .material-icons-round{
  font-size:21px;
}

#cercaToolsCenterV1 .ctc-brand{
  min-width:0;
}

#cercaToolsCenterV1 .ctc-brand small{
  display:block;

  color:var(--ctc-cyan);
  font-size:9px;
  line-height:1;
  font-weight:950;
  letter-spacing:.15em;
}

#cercaToolsCenterV1 .ctc-brand strong{
  display:block;
  margin-top:3px;

  color:#f4fbff;
  font-size:18px;
  line-height:1;
  font-weight:920;
  letter-spacing:-.025em;
}

#cercaToolsCenterV1 .ctc-version{
  min-width:32px;
  height:26px;
  padding:0 8px;

  display:grid;
  place-items:center;

  border:1px solid rgba(77,228,255,.11);
  border-radius:999px;

  background:rgba(77,228,255,.045);

  color:#79e6f6;
  font-size:9px;
  font-weight:950;
}

#cercaToolsCenterV1 .ctc-scroll{
  flex:1;
  min-height:0;

  overflow-y:auto;
  overflow-x:hidden;

  padding:
    16px
    0
    calc(34px + env(safe-area-inset-bottom,0px));

  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}

#cercaToolsCenterV1 .ctc-scroll::-webkit-scrollbar{
  display:none;
}

/* ==========================================================
   HERO
   ========================================================== */

#cercaToolsCenterV1 .ctc-hero{
  position:relative;

  margin:0 15px;
  min-height:196px;
  padding:20px;

  display:grid;
  grid-template-columns:minmax(0,1fr) 104px;
  gap:12px;
  align-items:center;

  overflow:hidden;

  border:1px solid rgba(77,228,255,.12);
  border-radius:26px;

  background:
    radial-gradient(circle at 100% 0%,rgba(77,228,255,.14),transparent 38%),
    radial-gradient(circle at 0% 100%,rgba(146,124,255,.09),transparent 42%),
    linear-gradient(145deg,rgba(10,24,39,.98),rgba(4,11,20,.99));

  box-shadow:0 20px 48px rgba(0,0,0,.22);
}

#cercaToolsCenterV1 .ctc-hero::after{
  content:"";

  position:absolute;
  right:-56px;
  bottom:-76px;

  width:190px;
  height:190px;

  border:1px solid rgba(77,228,255,.075);
  border-radius:50%;

  pointer-events:none;
}

#cercaToolsCenterV1 .ctc-hero-copy{
  position:relative;
  z-index:2;
  min-width:0;
}

#cercaToolsCenterV1 .ctc-live{
  width:max-content;
  max-width:100%;
  min-height:24px;
  padding:0 9px;

  display:inline-flex;
  align-items:center;
  gap:6px;

  border:1px solid rgba(77,228,255,.11);
  border-radius:999px;

  background:rgba(77,228,255,.045);

  color:#75e4f4;
  font-size:8px;
  font-weight:950;
  letter-spacing:.10em;
}

#cercaToolsCenterV1 .ctc-live i{
  width:6px;
  height:6px;

  border-radius:50%;

  background:#4de4ff;

  box-shadow:0 0 0 4px rgba(77,228,255,.08);
}

#cercaToolsCenterV1 .ctc-hero h1{
  margin:10px 0 0;

  color:#f6fbfe;
  font-size:25px;
  line-height:1.05;
  font-weight:950;
  letter-spacing:-.045em;
}

#cercaToolsCenterV1 .ctc-hero p{
  max-width:360px;
  margin:9px 0 0;

  color:#8299a7;
  font-size:11px;
  line-height:1.45;
}

#cercaToolsCenterV1 .ctc-hero-stats{
  margin-top:14px;

  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

#cercaToolsCenterV1 .ctc-hero-stats > span{
  min-width:60px;
  padding:7px 8px;

  border:1px solid rgba(145,196,220,.075);
  border-radius:12px;

  background:rgba(255,255,255,.022);
}

#cercaToolsCenterV1 .ctc-hero-stats strong{
  display:block;

  color:#dff9fd;
  font-size:13px;
  line-height:1;
  font-weight:950;
}

#cercaToolsCenterV1 .ctc-hero-stats small{
  display:block;
  margin-top:4px;

  color:#667f8d;
  font-size:7px;
  line-height:1;
  font-weight:850;
  letter-spacing:.04em;
}

#cercaToolsCenterV1 .ctc-hero-art{
  position:relative;
  width:96px;
  height:126px;

  display:grid;
  place-items:center;

  justify-self:end;

  border:1px solid rgba(77,228,255,.10);
  border-radius:26px;

  background:
    linear-gradient(155deg,rgba(77,228,255,.11),rgba(146,124,255,.08)),
    rgba(3,11,20,.45);

  box-shadow:
    inset 0 0 30px rgba(77,228,255,.035);
}

#cercaToolsCenterV1 .ctc-hero-art > .material-icons-round{
  position:relative;
  z-index:3;

  width:56px;
  height:56px;

  display:grid;
  place-items:center;

  border:1px solid rgba(77,228,255,.15);
  border-radius:19px;

  background:rgba(2,8,15,.56);

  color:#67e6f7;
  font-size:30px;
}

#cercaToolsCenterV1 .ctc-hero-art .orb{
  position:absolute;

  display:block;

  border:1px solid rgba(77,228,255,.13);
  border-radius:50%;
}

#cercaToolsCenterV1 .ctc-hero-art .orb.one{
  width:88px;
  height:88px;
}

#cercaToolsCenterV1 .ctc-hero-art .orb.two{
  width:62px;
  height:62px;

  border-color:rgba(146,124,255,.14);
}

#cercaToolsCenterV1 .ctc-hero-art .orb.three{
  width:20px;
  height:20px;
  right:8px;
  top:10px;

  border:0;

  background:rgba(62,232,149,.60);

  box-shadow:0 0 20px rgba(62,232,149,.22);
}

/* ==========================================================
   SEARCH
   ========================================================== */

#cercaToolsCenterV1 .ctc-search{
  width:auto;
  min-height:52px;
  margin:14px 15px 0;
  padding:0 10px 0 13px;

  display:grid;
  grid-template-columns:22px minmax(0,1fr) 30px;
  gap:8px;
  align-items:center;

  border:1px solid rgba(145,196,220,.095);
  border-radius:17px;

  background:rgba(255,255,255,.027);
}

#cercaToolsCenterV1 .ctc-search > .material-icons-round{
  color:#648291;
  font-size:19px;
}

#cercaToolsCenterV1 .ctc-search input{
  width:100%;
  min-width:0;

  border:0;
  outline:0;

  background:transparent;

  color:#edf8fc;
  font-size:13px;
}

#cercaToolsCenterV1 .ctc-search input::placeholder{
  color:#526b79;
}

#cercaToolsCenterV1 .ctc-search button{
  width:30px;
  height:30px;
  padding:0;

  display:grid;
  place-items:center;

  border:0;
  border-radius:10px;

  background:transparent;

  color:#526b79;
}

#cercaToolsCenterV1 .ctc-search button .material-icons-round{
  font-size:17px;
}

#cercaToolsCenterV1 .ctc-browse-hint{
  margin:10px 16px 0;

  display:flex;
  align-items:center;
  gap:5px;

  color:#617987;
  font-size:8px;
  font-weight:800;
}

#cercaToolsCenterV1 .ctc-browse-hint .material-icons-round{
  color:#517382;
  font-size:15px;
}

/* ==========================================================
   CATEGORY ROWS
   ========================================================== */

#cercaToolsCenterV1 .ctc-body{
  margin-top:19px;
}

#cercaToolsCenterV1 .ctc-group + .ctc-group{
  margin-top:24px;
}

#cercaToolsCenterV1 .ctc-group > header{
  padding:0 15px 9px;

  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
}

#cercaToolsCenterV1 .ctc-group-heading{
  min-width:0;
}

#cercaToolsCenterV1 .ctc-group > header small{
  display:block;

  color:#617a88;
  font-size:8px;
  line-height:1;
  font-weight:950;
  letter-spacing:.12em;
}

#cercaToolsCenterV1 .ctc-group > header strong{
  display:block;
  margin-top:4px;

  color:#edf7fb;
  font-size:18px;
  line-height:1.1;
  font-weight:920;
  letter-spacing:-.025em;
}

#cercaToolsCenterV1 .ctc-group > header p{
  margin:4px 0 0;

  color:#647c8a;
  font-size:9px;
  line-height:1.35;
}

#cercaToolsCenterV1 .ctc-group-count{
  flex:none;

  min-width:29px;
  height:25px;
  padding:0 8px;

  display:grid;
  place-items:center;

  border:1px solid rgba(145,196,220,.075);
  border-radius:999px;

  background:rgba(255,255,255,.025);

  color:#758d99;
  font-size:9px;
  font-weight:950;
}

#cercaToolsCenterV1 .ctc-grid{
  width:100%;
  padding:0 15px 6px;

  display:flex;
  gap:10px;

  overflow-x:auto;
  overflow-y:hidden;

  scroll-snap-type:x mandatory;
  scroll-padding-inline:15px;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-inline:contain;
}

#cercaToolsCenterV1 .ctc-grid::-webkit-scrollbar{
  display:none;
}

#cercaToolsCenterV1 .ctc-tool{
  --ctc-accent:#4de4ff;
  --ctc-soft:rgba(77,228,255,.14);

  position:relative;

  flex:0 0 clamp(168px,48vw,190px);
  min-width:0;
  height:218px;
  padding:0;

  overflow:hidden;

  scroll-snap-align:start;

  display:flex;
  flex-direction:column;
  align-items:stretch;

  text-align:left;

  border:1px solid rgba(145,196,220,.085);
  border-radius:21px;

  background:linear-gradient(180deg,rgba(10,21,34,.97),rgba(3,9,16,.99));

  color:#f0f8fc;

  box-shadow:0 12px 30px rgba(0,0,0,.15);
}

#cercaToolsCenterV1 .ctc-tool:active{
  transform:scale(.985);
}

#cercaToolsCenterV1 .ctc-cover{
  position:relative;

  height:112px;
  flex:none;

  overflow:hidden;

  display:flex;
  align-items:center;
  justify-content:center;

  background:
    radial-gradient(circle at 82% 12%,rgba(255,255,255,.13),transparent 17%),
    radial-gradient(circle at 5% 105%,var(--ctc-soft),transparent 46%),
    linear-gradient(145deg,var(--ctc-soft),rgba(4,12,22,.28));
}

#cercaToolsCenterV1 .ctc-cover::before{
  content:"";

  position:absolute;
  right:-38px;
  top:-42px;

  width:112px;
  height:112px;

  border:1px solid var(--ctc-soft);
  border-radius:50%;
}

#cercaToolsCenterV1 .ctc-cover::after{
  content:"";

  position:absolute;
  left:-28px;
  bottom:-38px;

  width:82px;
  height:82px;

  border:1px solid var(--ctc-soft);
  border-radius:50%;
}

#cercaToolsCenterV1 .ctc-cover-icon{
  position:relative;
  z-index:2;

  width:58px;
  height:58px;

  display:grid;
  place-items:center;

  border:1px solid var(--ctc-soft);
  border-radius:19px;

  background:rgba(2,8,15,.48);

  color:var(--ctc-accent);

  box-shadow:
    0 16px 30px rgba(0,0,0,.16),
    inset 0 0 28px rgba(255,255,255,.012);
}

#cercaToolsCenterV1 .ctc-cover-icon .material-icons-round{
  font-size:30px;
}

#cercaToolsCenterV1 .ctc-cover-badge{
  position:absolute;
  left:10px;
  bottom:9px;
  z-index:2;

  min-height:20px;
  padding:0 7px;

  display:flex;
  align-items:center;

  border:1px solid var(--ctc-soft);
  border-radius:999px;

  background:rgba(2,8,15,.58);

  color:var(--ctc-accent);
  font-size:7px;
  line-height:1;
  font-weight:950;
  letter-spacing:.08em;
}

#cercaToolsCenterV1 .ctc-copy{
  min-width:0;
  padding:12px 30px 12px 12px;
}

#cercaToolsCenterV1 .ctc-copy strong{
  display:block;

  color:#f2f9fc;
  font-size:14px;
  line-height:1.15;
  font-weight:920;
  letter-spacing:-.01em;
}

#cercaToolsCenterV1 .ctc-copy small{
  display:-webkit-box;
  margin-top:6px;
  overflow:hidden;

  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;

  color:#718995;
  font-size:9px;
  line-height:1.4;
}

#cercaToolsCenterV1 .ctc-arrow{
  position:absolute;
  right:11px;
  bottom:12px;

  color:var(--ctc-accent);
  opacity:.58;
  font-size:17px;
}

#cercaToolsCenterV1 .ctc-tool.tone-violet{
  --ctc-accent:#ab98ff;
  --ctc-soft:rgba(146,124,255,.17);
}

#cercaToolsCenterV1 .ctc-tool.tone-blue{
  --ctc-accent:#72b9ff;
  --ctc-soft:rgba(88,168,255,.16);
}

#cercaToolsCenterV1 .ctc-tool.tone-green{
  --ctc-accent:#66eaa8;
  --ctc-soft:rgba(62,232,149,.15);
}

#cercaToolsCenterV1 .ctc-tool.tone-red{
  --ctc-accent:#ff7289;
  --ctc-soft:rgba(255,91,120,.16);
}

#cercaToolsCenterV1 .ctc-tool.tone-amber{
  --ctc-accent:#ffd06b;
  --ctc-soft:rgba(255,198,90,.16);
}

/* ==========================================================
   FOOTER / EMPTY
   ========================================================== */

#cercaToolsCenterV1 .ctc-footer-card{
  margin:26px 15px 0;
  padding:15px;

  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  gap:11px;
  align-items:start;

  border:1px solid rgba(145,196,220,.07);
  border-radius:18px;

  background:rgba(255,255,255,.018);
}

#cercaToolsCenterV1 .ctc-footer-card > .material-icons-round{
  width:38px;
  height:38px;

  display:grid;
  place-items:center;

  border-radius:13px;

  background:rgba(62,232,149,.055);

  color:#67dca0;
  font-size:20px;
}

#cercaToolsCenterV1 .ctc-footer-card small{
  display:block;

  color:#627b88;
  font-size:7px;
  font-weight:950;
  letter-spacing:.11em;
}

#cercaToolsCenterV1 .ctc-footer-card strong{
  display:block;
  margin-top:4px;

  color:#9fb1bb;
  font-size:11px;
  line-height:1.25;
}

#cercaToolsCenterV1 .ctc-footer-card p{
  margin:5px 0 0;

  color:#536b79;
  font-size:8px;
  line-height:1.42;
}

#cercaToolsCenterV1 .ctc-empty{
  min-height:190px;
  margin:0 15px;
  padding:28px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  text-align:center;

  border:1px dashed rgba(145,196,220,.09);
  border-radius:22px;

  background:rgba(255,255,255,.012);

  color:#78909e;
}

#cercaToolsCenterV1 .ctc-empty .material-icons-round{
  font-size:31px;
  color:#56717f;
}

#cercaToolsCenterV1 .ctc-empty strong{
  margin-top:9px;
  color:#bdccd4;
  font-size:13px;
}

#cercaToolsCenterV1 .ctc-empty small{
  margin-top:4px;
  font-size:9px;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media(max-width:370px){
  #cercaToolsCenterV1 .ctc-hero{
    min-height:184px;
    grid-template-columns:minmax(0,1fr) 82px;
    padding:17px;
  }

  #cercaToolsCenterV1 .ctc-hero-art{
    width:80px;
    height:108px;
    border-radius:22px;
  }

  #cercaToolsCenterV1 .ctc-hero-art > .material-icons-round{
    width:48px;
    height:48px;
    font-size:27px;
  }

  #cercaToolsCenterV1 .ctc-hero h1{
    font-size:22px;
  }

  #cercaToolsCenterV1 .ctc-tool{
    flex-basis:160px;
  }
}

@media(min-width:720px){
  #cercaToolsCenterV1 .ctc-scroll{
    width:100%;
    max-width:820px;
    margin:0 auto;
  }

  #cercaToolsCenterV1 .ctc-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    overflow:visible;
  }

  #cercaToolsCenterV1 .ctc-tool{
    width:100%;
    height:220px;
  }
}