/* ======================================================
   ESTILO "CLAY" (claymorfismo)
   Para las páginas con <body class="admite-clay"> (datos, editor y vista de datos).
   Se activa con el selector "Clásico | Clay" de la barra (html[data-estilo-datos="clay"]);
   la elección se comparte entre páginas.

   Rasgos: superficies pastel, esquinas muy redondeadas, sombras dobles
   (luz arriba-izquierda, sombra abajo-derecha) que hacen ver los elementos
   "inflados", controles hundidos y botones que se aplastan al presionarlos.
   ====================================================== */

html[data-estilo-datos="clay"] .admite-clay {
  /* Dorado: crema cálida de fondo, oro en los acentos, sombras tibias */
  --fondo: #f5efe3;
  --panel: #fffaf1;
  --panel-2: #f3ebdc;
  --borde: transparent;
  --borde-suave: rgba(150, 112, 40, 0.12);
  --borde-control: transparent;
  --secundario: #efe5d1;
  --secundario-hover: #e8dbc1;
  --acento: #9a6b00;               /* oro oscuro: se lee bien como texto o borde sobre crema */
  --acento-hover: #7f5800;
  --acento-suave: #f6e5b5;
  --acento-texto: #6e4d00;
  --morado: #7a4a12;               /* las etiquetas "distintivas" pasan a bronce */
  --morado-fondo: #f2e1c2;
  --resaltado: #fbe3a0;
  --anillo: 0 0 0 3px rgba(212, 160, 23, 0.38);
  --radio: 24px;
  --radio-chico: 16px;

  /* Oro para botones y marcas: degradado claro→profundo, con texto oscuro (el blanco sobre oro no se lee) */
  --clay-degradado: linear-gradient(145deg, #f3d27a, #d29e1e);
  --clay-degradado-claro: linear-gradient(145deg, #f7dc8f, #d6a52a);
  --clay-degradado-texto: #3a2900;

  /* La sombra "clay": exterior suave + brillo interior arriba + sombra interior abajo */
  --clay-sombra: 12px 12px 28px rgba(150, 112, 40, 0.2), -10px -10px 24px rgba(255, 255, 255, 0.95),
    inset 3px 3px 6px rgba(255, 255, 255, 0.85), inset -4px -4px 10px rgba(150, 112, 40, 0.1);
  --clay-sombra-chica: 6px 6px 14px rgba(150, 112, 40, 0.18), -6px -6px 14px rgba(255, 255, 255, 0.9),
    inset 2px 2px 4px rgba(255, 255, 255, 0.8), inset -3px -3px 6px rgba(150, 112, 40, 0.09);
  --clay-hundido: inset 5px 5px 10px rgba(150, 112, 40, 0.16), inset -5px -5px 10px rgba(255, 255, 255, 0.95);
  --clay-boton: 6px 8px 16px rgba(196, 146, 20, 0.35), inset -3px -4px 8px rgba(120, 80, 0, 0.25), inset 3px 4px 8px rgba(255, 245, 210, 0.55);

  --tipografia: Nunito, Inter, system-ui, sans-serif;
  background: radial-gradient(1200px 600px at 20% -10%, #fff1cc 0%, transparent 60%),
    radial-gradient(1000px 600px at 110% 110%, #fbe4cf 0%, transparent 55%), var(--fondo);
}

html[data-estilo-datos="clay"][data-apariencia="oscuro"] .admite-clay {
  /* Dorado nocturno: carbón cálido con oro brillante */
  --fondo: #1c1913;
  --panel: #27231b;
  --panel-2: #211d16;
  --borde-suave: rgba(255, 235, 190, 0.06);
  --secundario: #322c21;
  --secundario-hover: #3b3427;
  --acento: #e8b93f;
  --acento-hover: #f3cb63;
  --acento-suave: rgba(232, 185, 63, 0.18);
  --acento-texto: #f4d58a;
  --morado: #e9c38c;
  --morado-fondo: rgba(214, 160, 90, 0.18);
  --resaltado: rgba(232, 185, 63, 0.35);
  --anillo: 0 0 0 3px rgba(232, 185, 63, 0.4);
  --clay-degradado: linear-gradient(145deg, #f3cf6c, #c4901a);
  --clay-degradado-claro: linear-gradient(145deg, #f6d987, #c99a26);
  --clay-degradado-texto: #2a1d00;
  --clay-sombra: 12px 12px 28px rgba(0, 0, 0, 0.5), -8px -8px 20px rgba(255, 240, 200, 0.035),
    inset 3px 3px 6px rgba(255, 240, 200, 0.06), inset -4px -4px 10px rgba(0, 0, 0, 0.35);
  --clay-sombra-chica: 6px 6px 14px rgba(0, 0, 0, 0.45), -4px -4px 12px rgba(255, 240, 200, 0.03),
    inset 2px 2px 4px rgba(255, 240, 200, 0.05), inset -3px -3px 6px rgba(0, 0, 0, 0.3);
  --clay-hundido: inset 5px 5px 10px rgba(0, 0, 0, 0.45), inset -4px -4px 10px rgba(255, 240, 200, 0.04);
  --clay-boton: 6px 8px 18px rgba(0, 0, 0, 0.5), inset -3px -4px 8px rgba(90, 55, 0, 0.45), inset 3px 4px 8px rgba(255, 240, 190, 0.3);
  background: radial-gradient(1200px 600px at 20% -10%, #3a2c10 0%, transparent 60%),
    radial-gradient(1000px 600px at 110% 110%, #2e2416 0%, transparent 55%), var(--fondo);
}

/* Barra y columnas: flotan sobre el fondo en lugar de dividirse con líneas */
html[data-estilo-datos="clay"] .admite-clay .barra {
  background: transparent; border-bottom: none; height: 68px;
}
html[data-estilo-datos="clay"] .admite-clay .paso-datos { gap: 18px; padding: 4px 18px 18px; }
html[data-estilo-datos="clay"] .admite-clay { --velo: rgba(233, 236, 251, 0.86); }
html[data-estilo-datos="clay"][data-apariencia="oscuro"] .admite-clay { --velo: rgba(26, 30, 51, 0.86); }
html[data-estilo-datos="clay"] .admite-clay .columna.explorar,
html[data-estilo-datos="clay"] .admite-clay .columna.seleccion {
  border: none; border-radius: var(--radio); box-shadow: var(--clay-sombra);
}
html[data-estilo-datos="clay"] .admite-clay .columna.ficha { padding: 14px 10px 40px; }

/* Tarjetas infladas */
html[data-estilo-datos="clay"] .admite-clay .tarjeta,
html[data-estilo-datos="clay"] .admite-clay .serie-elegida {
  border: none; box-shadow: var(--clay-sombra); padding: 18px 20px;
}
html[data-estilo-datos="clay"] .admite-clay .agregar { background: none; }
html[data-estilo-datos="clay"] .admite-clay .agregar .tarjeta { box-shadow: var(--clay-sombra); }

/* Lista de resultados: cada uno es una pastilla con separación */
html[data-estilo-datos="clay"] .admite-clay .lista-catalogo { border: none; overflow: visible; display: grid; gap: 10px; padding: 4px 2px; }
html[data-estilo-datos="clay"] .admite-clay .lista-catalogo .item {
  border: none; border-radius: var(--radio-chico); box-shadow: var(--clay-sombra-chica);
  transition: transform var(--rapido) var(--curva), box-shadow var(--rapido) ease, background-color var(--rapido) ease;
}
html[data-estilo-datos="clay"] .admite-clay .lista-catalogo .item:hover { transform: translateY(-2px); background: var(--panel); }
html[data-estilo-datos="clay"] .admite-clay .lista-catalogo .item.activo {
  background: var(--acento-suave); box-shadow: var(--clay-hundido);
}
html[data-estilo-datos="clay"] .admite-clay .grupo-resultados {
  position: static; border: none; background: none; padding: 6px 4px 0;
}

/* Controles hundidos */
html[data-estilo-datos="clay"] .admite-clay input[type=text],
html[data-estilo-datos="clay"] .admite-clay input[type=search],
html[data-estilo-datos="clay"] .admite-clay select,
html[data-estilo-datos="clay"] .admite-clay textarea {
  border: none; background: var(--panel-2); box-shadow: var(--clay-hundido); padding: 10px 14px;
}
html[data-estilo-datos="clay"] .admite-clay input:focus,
html[data-estilo-datos="clay"] .admite-clay select:focus {
  box-shadow: var(--clay-hundido), var(--anillo);
}

/* Botones de plastilina: se aplastan al presionarlos */
html[data-estilo-datos="clay"] .admite-clay .btn {
  border-radius: 18px; box-shadow: var(--clay-sombra-chica);
  transition: transform var(--rapido) var(--curva), box-shadow var(--rapido) ease, background-color var(--rapido) ease;
}
html[data-estilo-datos="clay"] .admite-clay .btn.acento {
  background: var(--clay-degradado); color: var(--clay-degradado-texto); box-shadow: var(--clay-boton);
}
html[data-estilo-datos="clay"] .admite-clay .btn:hover:not(:disabled) { transform: translateY(-2px); }
html[data-estilo-datos="clay"] .admite-clay .btn:active:not(:disabled) {
  transform: translateY(1px) scale(0.97); box-shadow: var(--clay-hundido);
}

/* Pastillas, círculos y pasos */
html[data-estilo-datos="clay"] .admite-clay .chip { box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.6), 1px 2px 4px rgba(150, 112, 40, 0.12); padding: 3px 10px; }
html[data-estilo-datos="clay"] .admite-clay .circulo,
html[data-estilo-datos="clay"] .admite-clay .paso.actual b {
  background: var(--clay-degradado); color: var(--clay-degradado-texto); box-shadow: var(--clay-boton);
}
html[data-estilo-datos="clay"] .admite-clay .paso.actual { background: var(--panel); box-shadow: var(--clay-sombra-chica); color: var(--acento-texto); }
html[data-estilo-datos="clay"] .admite-clay .interruptor,
html[data-estilo-datos="clay"] .admite-clay .segmentado { border: none; box-shadow: var(--clay-sombra-chica); background: var(--panel); }
html[data-estilo-datos="clay"] .admite-clay .segmentado button[aria-pressed="true"] { background: var(--acento-suave); box-shadow: var(--clay-hundido); color: var(--acento-texto); }

html[data-estilo-datos="clay"] .admite-clay .seleccion-vacia { border: none; box-shadow: var(--clay-hundido); }
html[data-estilo-datos="clay"] .admite-clay .pie-seleccion { border-top: none; }
html[data-estilo-datos="clay"] .admite-clay table.datos th { border-bottom-color: var(--borde-suave); }
html[data-estilo-datos="clay"] .admite-clay h2.titulo-columna,
html[data-estilo-datos="clay"] .admite-clay .ficha-encabezado h1 { font-weight: 800; }
html[data-estilo-datos="clay"][data-apariencia="oscuro"] .admite-clay .chip {
  box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.06), 1px 2px 4px rgba(0, 0, 0, 0.35);
}


/* ======================================================
   EDITOR (paso 2) en estilo Clay
   ====================================================== */

/* El panel de opciones flota como una tarjeta; la gráfica, en su "almohada" */
html[data-estilo-datos="clay"] .admite-clay .paso-grafica { gap: 18px; padding: 4px 18px 18px; }
html[data-estilo-datos="clay"] .admite-clay #panel {
  border: none; border-radius: var(--radio); box-shadow: var(--clay-sombra); padding: 18px 20px 40px;
}
html[data-estilo-datos="clay"] .admite-clay #escenario { padding: 12px 8px; }
html[data-estilo-datos="clay"] .admite-clay #marco {
  border-radius: 28px; padding: 10px; background: var(--panel); box-shadow: var(--clay-sombra);
}
html[data-estilo-datos="clay"] .admite-clay #grafica { border-radius: 20px; overflow: hidden; }

/* Secciones separadas por aire, no por líneas */
html[data-estilo-datos="clay"] .admite-clay .seccion { border-top: none; padding: 16px 0 6px; }
html[data-estilo-datos="clay"] .admite-clay h2.titulo-seccion { color: var(--acento-texto); }

/* Botones de opción (Líneas / Barras / Mapa): pastillas; la elegida queda "presionada" */
html[data-estilo-datos="clay"] .admite-clay .botones { gap: 10px; }
html[data-estilo-datos="clay"] .admite-clay .opcion {
  border: none; border-radius: var(--radio-chico); background: var(--panel); box-shadow: var(--clay-sombra-chica);
  padding: 10px 6px; font-weight: 600;
}
html[data-estilo-datos="clay"] .admite-clay .opcion:hover:not(:disabled):not(.activa) { background: var(--panel); transform: translateY(-2px); }
html[data-estilo-datos="clay"] .admite-clay .opcion.activa {
  background: var(--acento-suave); color: var(--acento-texto); box-shadow: var(--clay-hundido);
}

/* Listas (entidades, series, colores) y notas: contenedores hundidos */
html[data-estilo-datos="clay"] .admite-clay .lista {
  border: none; border-radius: var(--radio-chico); background: var(--panel-2); box-shadow: var(--clay-hundido); padding: 6px;
}
html[data-estilo-datos="clay"] .admite-clay .renglon { border-bottom: none; border-radius: 10px; }
html[data-estilo-datos="clay"] .admite-clay .renglon:hover { background: var(--panel); }
html[data-estilo-datos="clay"] .admite-clay .nota { border: none; border-radius: var(--radio-chico); box-shadow: var(--clay-sombra-chica); background: var(--panel); padding: 12px; }

/* Muestras de color: pastillas infladas */
html[data-estilo-datos="clay"] .admite-clay #muestras { gap: 10px; }
html[data-estilo-datos="clay"] .admite-clay #muestras input[type=color] {
  border: 3px solid var(--panel); border-radius: 14px; box-shadow: var(--clay-sombra-chica); width: 36px; height: 36px;
}
html[data-estilo-datos="clay"] .admite-clay #muestras button { border: none; border-radius: 14px; box-shadow: var(--clay-hundido); }

/* Reproductor: botones de plastilina y línea de tiempo hundida */
html[data-estilo-datos="clay"] .admite-clay #reproductor button {
  width: 44px; height: 44px; background: var(--clay-degradado); color: var(--clay-degradado-texto); box-shadow: var(--clay-boton);
}
html[data-estilo-datos="clay"] .admite-clay #reproductor button.secundario { background: var(--panel); color: var(--texto); box-shadow: var(--clay-sombra-chica); }
html[data-estilo-datos="clay"] .admite-clay #reproductor button:active { box-shadow: var(--clay-hundido); }
html[data-estilo-datos="clay"] .admite-clay input[type=range] {
  -webkit-appearance: none; appearance: none; height: 12px; border-radius: 999px;
  background: var(--panel-2); box-shadow: var(--clay-hundido);
}
html[data-estilo-datos="clay"] .admite-clay input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; cursor: pointer;
  background: var(--clay-degradado-claro); box-shadow: var(--clay-boton);
}
html[data-estilo-datos="clay"] .admite-clay input[type=range]::-moz-range-thumb {
  width: 22px; height: 22px; border: none; border-radius: 50%; cursor: pointer;
  background: var(--clay-degradado-claro); box-shadow: var(--clay-boton);
}
html[data-estilo-datos="clay"] .admite-clay #periodo-actual {
  padding: 6px 12px; border-radius: 999px; background: var(--panel); box-shadow: var(--clay-sombra-chica);
}

/* Checkboxes redondeados con el acento */
html[data-estilo-datos="clay"] .admite-clay input[type=checkbox] { width: 16px; height: 16px; }

/* Ventana de compartir y velo de carga */
html[data-estilo-datos="clay"] .admite-clay dialog { border: none; border-radius: 28px; box-shadow: var(--clay-sombra); background: var(--panel); }
html[data-estilo-datos="clay"] .admite-clay .barra-grafica .btn { box-shadow: var(--clay-sombra-chica); }


/* ======================================================
   VISTA DE DATOS (tabla.html) en estilo Clay
   ====================================================== */

html[data-estilo-datos="clay"] .admite-clay .pestanas { background: transparent; border-bottom: none; gap: 10px; padding: 8px 24px 6px; }
html[data-estilo-datos="clay"] .admite-clay .pestana {
  border: none; border-radius: 999px; margin: 0; background: var(--panel); box-shadow: var(--clay-sombra-chica);
}
html[data-estilo-datos="clay"] .admite-clay .pestana.activa { background: var(--acento-suave); color: var(--acento-texto); box-shadow: var(--clay-hundido); }
html[data-estilo-datos="clay"] .admite-clay .tabla-contenedor { border: none; border-radius: var(--radio-chico); box-shadow: var(--clay-hundido); background: var(--panel-2); }
html[data-estilo-datos="clay"] .admite-clay .tabla-contenedor table.datos thead th { background: var(--panel-2); }
html[data-estilo-datos="clay"] .admite-clay table.datos .fija { background: var(--panel-2); }
html[data-estilo-datos="clay"] .admite-clay pre.json { border: none; border-radius: var(--radio-chico); box-shadow: var(--clay-hundido); }

/* La marca de la barra, en oro */
html[data-estilo-datos="clay"] .admite-clay .marca::before { background: var(--clay-degradado); box-shadow: var(--clay-boton); }
html[data-estilo-datos="clay"] .admite-clay .paso.actual b { color: var(--clay-degradado-texto); }
html[data-estilo-datos="clay"] .admite-clay .interruptor.cuenta .inicial { background: var(--clay-degradado); color: var(--clay-degradado-texto); box-shadow: var(--clay-boton); }
html[data-estilo-datos="clay"] .admite-clay .tarjeta-acceso { box-shadow: var(--clay-sombra); border: none; padding: 32px 32px 26px; }
html[data-estilo-datos="clay"] .admite-clay input[type=password] {
  border: none; background: var(--panel-2); box-shadow: var(--clay-hundido); padding: 10px 14px; width: 100%;
  font: inherit; font-size: 13px; color: var(--texto); border-radius: var(--radio-chico);
}