/* ==========================================================================
   PinceLuis — Coloring Paint  |  pc-coloring.css  v1.0.0
   ========================================================================== */

/* ── Variables ────────────────────────────────────────────────────────────── */
:root {
  --pc-primary:      #6366f1;
  --pc-primary-dark: #4f46e5;
  --pc-accent:       #f59e0b;
  --pc-easy:         #22c55e;
  --pc-medium:       #f59e0b;
  --pc-hard:         #ef4444;
  --pc-radius:       14px;
  --pc-shadow:       0 2px 16px rgba(0,0,0,.09);
  --pc-border:       #e5e7eb;
  --pc-bg:           #ffffff;
  --pc-text:         #1f2937;
  --pc-muted:        #6b7280;
  --pc-toolbar-bg:   #f8fafc;
}

/* ── Wrapper ──────────────────────────────────────────────────────────────── */
.cp-wrap {
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif;
  background: var(--pc-bg);
  border: 1px solid var(--pc-border);
  border-radius: var(--pc-radius);
  padding: 20px;
  box-shadow: var(--pc-shadow);
  max-width: 100%;
  color: var(--pc-text);
}

/* ── Encabezado ────────────────────────────────────────────────────────────── */
.cp-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}
.cp-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--pc-text);
}

/* ── Badges ───────────────────────────────────────────────────────────────── */
.cp-badges,
.pc-page-header__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.pc-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .3px;
  white-space: nowrap;
  border: 1.5px solid currentColor;
}
.pc-diff--easy   { color: var(--pc-easy);   background: #f0fdf4; }
.pc-diff--medium { color: var(--pc-medium); background: #fffbeb; }
.pc-diff--hard   { color: var(--pc-hard);   background: #fef2f2; }
.pc-age          { color: var(--pc-primary); background: #eef2ff; }
.pc-dl-badge     { color: #0369a1; background: #e0f2fe; }

/* ── Toolbar ──────────────────────────────────────────────────────────────── */
.cp-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  background: var(--pc-toolbar-bg);
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--pc-border);
  margin-bottom: 12px;
}
.cp-tools-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.cp-tools-group + .cp-tools-group {
  padding-left: 10px;
  border-left: 1px solid var(--pc-border);
}

/* Botones de herramienta */
.cp-tool,
.cp-undo,
.cp-redo,
.cp-clear,
.cp-download,
.cp-printpdf,
.cp-reset {
  background: #fff;
  border: 1.5px solid var(--pc-border);
  border-radius: 8px;
  padding: 7px 10px;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  transition: border-color .15s, box-shadow .15s, transform .1s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.cp-tool:hover,
.cp-undo:hover,
.cp-redo:hover,
.cp-clear:hover,
.cp-download:hover,
.cp-printpdf:hover,
.cp-reset:hover {
  border-color: var(--pc-primary);
  box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}
.cp-tool:active { transform: scale(.94); }
.cp-tool.active {
  border-color: var(--pc-primary);
  background: #eef2ff;
  box-shadow: 0 0 0 3px rgba(99,102,241,.18) inset;
}

/* Color picker */
.cp-color-label { display: flex; align-items: center; }
.cp-color-input {
  width: 38px;
  height: 38px;
  padding: 2px;
  border: 2px solid var(--pc-border);
  border-radius: 8px;
  cursor: pointer;
  background: none;
}
.cp-color-input::-webkit-color-swatch-wrapper { padding: 2px; }
.cp-color-input::-webkit-color-swatch         { border-radius: 5px; border: none; }

/* Grosor */
.cp-size-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .82rem;
  color: var(--pc-muted);
}
.cp-size-input { width: 90px; accent-color: var(--pc-primary); }
.cp-size-val   { min-width: 22px; font-weight: 700; color: var(--pc-text); }

/* Paleta temática */
.cp-palette-label { font-size: .78rem; color: var(--pc-muted); font-weight: 600; }
.cp-palette-color {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2.5px solid rgba(0,0,0,.15);
  cursor: pointer;
  transition: transform .12s, box-shadow .12s;
  padding: 0;
}
.cp-palette-color:hover {
  transform: scale(1.2);
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.cp-palette-color.selected {
  border-color: var(--pc-primary);
  box-shadow: 0 0 0 3px rgba(99,102,241,.4);
  transform: scale(1.15);
}

/* ── Canvas ───────────────────────────────────────────────────────────────── */
.cp-canvas-wrap {
  background: repeating-conic-gradient(#e5e7eb 0% 25%, #fff 0% 50%)
              0 0 / 24px 24px;            /* checker — indica zona transparente */
  border: 1.5px solid var(--pc-border);
  border-radius: 12px;
  padding: 8px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cp-canvas {
  display: block;
  max-width: 100%;
  background: #fff;
  border-radius: 8px;
  touch-action: none;
  cursor: crosshair;
  margin: 0 auto;
}
.cp-canvas[data-tool="eraser"] { cursor: cell; }
.cp-canvas[data-tool="bucket"] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ctext y='20' font-size='20'%3E🪣%3C/text%3E%3C/svg%3E") 4 20, pointer; }
.cp-canvas[data-tool="picker"] { cursor: crosshair; }

/* Hint de cuentagotas */
.cp-picker-hint {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,.72);
  color: #fff;
  font-size: .78rem;
  padding: 4px 12px;
  border-radius: 20px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s;
  white-space: nowrap;
}
.cp-picker-hint.visible { opacity: 1; }

/* ── Botones de acción (filas bajo canvas) ────────────────────────────────── */
.cp-social-row,
.pc-page-header__downloads {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
  justify-content: center;
}
.cp-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: .88rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none !important;
  border: none;
  transition: transform .12s, box-shadow .15s;
  white-space: nowrap;
}
.cp-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.18); }
.cp-btn:active { transform: scale(.96); }
.cp-btn--download-img {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff !important;
}
.cp-btn--pdf {
  background: linear-gradient(135deg, #ef4444, #f97316);
  color: #fff !important;
}
.cp-btn--pinterest {
  background: #e60023;
  color: #fff !important;
}

/* ── AdSense ──────────────────────────────────────────────────────────────── */
.pc-ad {
  margin: 24px auto;
  text-align: center;
  overflow: hidden;
}
.pc-ad--top      { margin-top: 0; }
.pc-ad--incontent{ background: #fafafa; border-radius: 8px; padding: 8px; }

/* ── Footer hint ──────────────────────────────────────────────────────────── */
.cp-footer {
  margin-top: 12px;
  font-size: .78rem;
  color: var(--pc-muted);
  text-align: center;
  line-height: 1.6;
}

/* ── Page header (fuera del canvas) ──────────────────────────────────────── */
.pc-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

/* ── Screen reader only ────────────────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .cp-wrap { padding: 12px; }
  .cp-header { flex-direction: column; }
  .cp-tools { gap: 6px; padding: 8px; }
  .cp-tools-group { width: 100%; justify-content: center; border-left: none !important; padding-left: 0 !important; border-top: 1px solid var(--pc-border); padding-top: 8px; }
  .cp-tools-group:first-child { border-top: none; padding-top: 0; }
  .cp-tool, .cp-undo, .cp-redo, .cp-clear, .cp-download, .cp-printpdf, .cp-reset { font-size: 1.2rem; padding: 10px 12px; }
  .cp-size-input { width: 80px; }
  .cp-social-row { flex-direction: column; align-items: stretch; }
  .cp-btn { justify-content: center; }
}

/* ── Print: ocultar todo menos el canvas ─────────────────────────────────── */
@media print {
  .cp-tools, .cp-header, .cp-social-row, .cp-footer, .pc-ad, nav, header, footer,
  .cp-badges, .pc-page-header__downloads { display: none !important; }
  .cp-canvas-wrap { border: none; padding: 0; background: #fff; }
  .cp-canvas { max-width: 100%; width: 100% !important; }
}