/*
Theme Name: Influencia Digital (ColorMag Child)
Theme URI: https://influenciadigital.cl
Description: Child theme de ColorMag con la identidad editorial de Influencia Digital: tipografía Fraunces + IBM Plex, paleta de tres acentos por categoría, modo oscuro y el módulo "Brújula editorial".
Author: Influencia Digital
Template: colormag
Version: 1.0.0
Text Domain: influencia-digital-child
*/

/* El enqueue real de este archivo y de las fuentes se hace en functions.php
   (@import aquí sería más lento — se deja functions.php como método recomendado). */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* =========================================================
   1. TOKENS — variables de diseño
   ========================================================= */
:root{
  --id-paper:      #EDEEF0;
  --id-surface:    #FFFFFF;
  --id-surface-2:  #F5F6F8;
  --id-ink:        #12161C;
  --id-ink-soft:   #4B5563;
  --id-line:       #D9DCE1;

  --id-signal:     #2648FF;  /* IA & Tecnología / Ciberseguridad */
  --id-signal-ink: #16309E;
  --id-copper:     #B5502E;  /* Innovación / Actualidad Digital */
  --id-copper-ink: #7C3A22;
  --id-moss:       #2F7A5C;  /* Educación / Opinión */
  --id-moss-ink:   #1F5940;

  --id-serif: 'Fraunces', Georgia, serif;
  --id-sans:  'IBM Plex Sans', -apple-system, sans-serif;
  --id-mono:  'IBM Plex Mono', ui-monospace, monospace;
}

body[data-id-theme="dark"]{
  --id-paper:      #0D1013;
  --id-surface:    #14181D;
  --id-surface-2:  #1B2027;
  --id-ink:        #E9EBEE;
  --id-ink-soft:   #9AA3AE;
  --id-line:       #2A2F37;
  --id-signal:     #6C8CFF; --id-signal-ink:#A8B9FF;
  --id-copper:     #E28758; --id-copper-ink:#F0AC85;
  --id-moss:       #5FBE94; --id-moss-ink:  #8FDBB8;
}

/* =========================================================
   2. BASE
   ========================================================= */
body{
  background:var(--id-paper) !important;
  color:var(--id-ink) !important;
  font-family:var(--id-sans) !important;
  line-height:1.6;
}
a{ color:var(--id-ink); }
a:hover{ color:var(--id-signal-ink); }

h1, h2, h3, h4,
.entry-title, .entry-title a,
.widget-title,
.cm-front-page-top-section .entry-title{
  font-family:var(--id-serif) !important;
  font-weight:600 !important;
  letter-spacing:-0.01em;
  color:var(--id-ink) !important;
}

/* =========================================================
   3. HEADER / MASTHEAD
   ========================================================= */
.site-header,
#masthead,
.cm-header-main-section{
  background:var(--id-paper) !important;
  border-bottom:1px solid var(--id-line);
}
.site-title, .site-title a{
  font-family:var(--id-serif) !important;
  font-weight:700 !important;
  color:var(--id-ink) !important;
}
.site-description{ color:var(--id-ink-soft) !important; font-family:var(--id-mono); font-size:12px; }

.main-navigation,
#site-navigation,
.cm-nav-menu-container{
  background:transparent !important;
  border:none !important;
}
.main-navigation a,
#site-navigation a{
  font-family:var(--id-sans) !important;
  font-weight:500;
  color:var(--id-ink-soft) !important;
  text-transform:none !important;
  font-size:14px !important;
}
.main-navigation a:hover,
#site-navigation a:hover,
.main-navigation .current-menu-item > a{
  color:var(--id-ink) !important;
}

/* =========================================================
   4. CATEGORÍAS — badges con acento por temática
   Ajusta los selectores de categoría (.category-ia, etc.) según
   el slug real de cada categoría en tu WordPress.
   ========================================================= */
.cat-links a,
.cm-post-cat a,
.entry-meta .cat-links a{
  font-family:var(--id-mono) !important;
  font-size:11px !important;
  text-transform:uppercase !important;
  letter-spacing:.06em !important;
  background:transparent !important;
  padding:0 !important;
  border:none !important;
  color:var(--id-signal-ink) !important;
}
/* Grupos temáticos por slug de categoría — edita los slugs si no calzan */
.category-ia-tecnologia .cat-links a,
.category-ciberseguridad-fraude .cat-links a{ color:var(--id-signal-ink) !important; }

.category-innovacion .cat-links a,
.category-actualidad-digital .cat-links a{ color:var(--id-copper-ink) !important; }

.category-educacion-digital .cat-links a,
.category-opinion .cat-links a{ color:var(--id-moss-ink) !important; }

/* =========================================================
   5. GRID DE POSTS / TARJETAS
   ========================================================= */
.cm-posts,
.cm-row{
  background:transparent !important;
}
article.post,
.cm-posts .post,
.type-post{
  background:var(--id-surface) !important;
  border:1px solid var(--id-line) !important;
  border-radius:2px !important;
  padding:16px !important;
}
.entry-title a{ font-size:20px !important; line-height:1.25 !important; }
.entry-content, .entry-summary, p{ color:var(--id-ink) !important; font-size:15px; }
.entry-meta, .posted-on, .byline, .author.vcard{
  font-family:var(--id-mono) !important;
  font-size:11px !important;
  color:var(--id-ink-soft) !important;
  text-transform:none !important;
}

/* Miniaturas: quitar sombras/bordes redondeados por defecto del tema */
.post-thumbnail img, .cm-post-thumbnail img{
  border-radius:2px !important;
  filter:none !important;
}

/* =========================================================
   6. SINGLE POST
   ========================================================= */
.single .entry-header .entry-title{
  font-size:clamp(28px, 4vw, 42px) !important;
  line-height:1.1 !important;
}
.single .entry-content{
  max-width:700px;
  margin:0 auto;
  font-size:17px !important;
  line-height:1.75 !important;
}
.single .entry-content h2{
  font-family:var(--id-serif) !important;
  font-size:26px !important;
  margin-top:40px !important;
}
.single .entry-content blockquote{
  font-family:var(--id-serif) !important;
  font-size:22px !important;
  border-left:3px solid var(--id-copper) !important;
  padding-left:20px !important;
  color:var(--id-ink) !important;
  background:transparent !important;
}

/* Módulo "Brújula editorial" — insertado vía shortcode [brujula_editorial] */
.brujula-editorial{
  max-width:700px; margin:28px auto; border:1px solid var(--id-line);
  border-radius:2px; background:var(--id-surface); padding:16px;
}
.brujula-editorial summary{
  font-family:var(--id-mono); font-size:12px; text-transform:uppercase;
  letter-spacing:.06em; cursor:pointer; color:var(--id-ink);
}
.brujula-editorial dl{ display:grid; gap:10px; margin-top:14px; }
.brujula-editorial dt{
  font-family:var(--id-mono); font-size:11px; text-transform:uppercase;
  color:var(--id-ink-soft); margin-bottom:2px;
}
.brujula-editorial dd{ margin:0; font-size:14px; color:var(--id-ink); }

/* =========================================================
   7. SIDEBAR / WIDGETS
   ========================================================= */
.widget{
  background:var(--id-surface) !important;
  border:1px solid var(--id-line) !important;
  border-radius:2px !important;
}
.widget-title{
  font-size:16px !important;
  border-bottom:1px solid var(--id-line) !important;
  color:var(--id-ink) !important;
}

/* =========================================================
   8. FOOTER
   ========================================================= */
.site-footer, #colophon, .footer-widget-area{
  background:var(--id-surface) !important;
  border-top:1px solid var(--id-line) !important;
  color:var(--id-ink-soft) !important;
}
.site-footer a{ color:var(--id-ink-soft) !important; }
.site-footer a:hover{ color:var(--id-signal-ink) !important; }
.site-info, .footer-copyright{
  font-family:var(--id-mono) !important;
  font-size:12px !important;
}

/* =========================================================
   9. BOTONES / FORMULARIOS (newsletter, buscar, etc.)
   ========================================================= */
input[type="submit"], button, .wp-block-button__link, .searchform-submit{
  background:var(--id-ink) !important;
  color:var(--id-paper) !important;
  border:1px solid var(--id-ink) !important;
  border-radius:2px !important;
  font-weight:600 !important;
  text-transform:none !important;
}
input[type="submit"]:hover, button:hover{
  background:var(--id-signal) !important;
  border-color:var(--id-signal) !important;
  color:#fff !important;
}
input[type="text"], input[type="email"], input[type="search"], textarea{
  border:1px solid var(--id-line) !important;
  border-radius:2px !important;
  background:var(--id-paper) !important;
  color:var(--id-ink) !important;
}

/* =========================================================
   10. TOGGLE DE MODO OSCURO (inyectado por functions.php)
   ========================================================= */
#id-theme-toggle{
  position:fixed; bottom:20px; right:20px; z-index:9999;
  width:44px; height:44px; border-radius:50%;
  background:var(--id-surface); border:1px solid var(--id-line);
  color:var(--id-ink); display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
}
#id-theme-toggle:hover{ border-color:var(--id-signal); }

@media (max-width: 782px){
  .single .entry-content{ max-width:100%; padding:0 12px; }
}