/* ============================================ */
/* ESTILOS ORIGINALES - ORGANIZADOS Y DOCUMENTADOS */
/* ============================================ */
/* ===> Nota: Este código mantiene 100% el diseño original <=== */

/* ==================== */
/* ESTRUCTURA PRINCIPAL */
/* ==================== */

/* Contenedor general */
.panel {
  margin-top: 1em;
  margin-bottom: 1em;
  text-align: center;
}

/* Grupo flexible (contiene columnas) */
.grupo {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
}

/* ==================== */
/* COMPONENTE COLUMNA */
/* ==================== */

/* Estilo base */
.columna {
  margin: 15px auto;
  width: calc(50% - 30px);
  padding: 20px;
  border: 1px solid rgba(128, 128, 128, 0.5);
  max-width: 240px;
  transition: all 0.2s;
  color: black;
  border-color: var(--fondo-botones-borde);
  /* efectos */
  transition: all 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
}

/* ==================== */
/* VARIANTES DE TAMAÑO */
/* ==================== */

/* Columnas angostas */
.columna.small {
  width: 45%;
  min-height: 150px;
}

/* Columnas anchas */
.columna.media {
  max-width: 75%;
  min-width: 250px;
}

/* Columnas extra anchas */
.columna.big {
  max-width: 80%;
  min-width: 270px;
}

/* ==================== */
/* INTERACTIVIDAD */
/* ==================== */

/* Efecto hover para columnas */
.columna:hover {
  transform: scale(1.003);
  border: 2px solid var(--fondo-botones-hoover);
  box-shadow: 0px 0px 0px 2px var(--fondo-botones-hoover);
}

/* Efecto Hundido Clásico Elegante */
/* Básico pero funciona perfectamente 
.columna:active {
  transform: translateY(2px) scale(0.98);
  box-shadow: inset 0 2px 4px var(--fondo-botones-hoover);
}
*/

/* Estado activo (cuando se presiona el botón) */
.columna:active {
  /* Efecto de hundimiento */
  transform: translateY(3px) scale(0.98);

  /* Sombra interior para efecto de profundidad */
  box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.2),
    inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.1) !important;

  /* Ligera reducción de brillo */
  filter: brightness(0.95);

  /* Borde más marcado */
  border-color: var(--fondo-botones-hoover) !important;
}

/* Efecto adicional para botones con imágenes */
.columna:active .columna_imagen,
.columna:active .columna_imagen_small,
.columna:active .columna_imagen_media,
.columna:active .columna_imagen_big {
  transform: scale(0.95);
}

/* Efecto en el título */
.columna:active .columna_titulo {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
  transform: translateY(1px);
}

/* Mantener la transición suave */
.columna_imagen,
.columna_imagen_small,
.columna_imagen_media,
.columna_imagen_big,
.columna_titulo {
  transition: all 0.15s ease;
}

/* ================== */
/* ELEMENTOS INTERNOS */
/* ================== */

/* Títulos */
.columna_titulo {
  font-size: 0.95em;
  font-weight: bolder;
  text-shadow: 1px 1px 2px gray;
}

/* Efecto hover títulos */
.columna_titulo:hover {
  text-shadow: 0 0 0.2em #f87, 0 0 0.2em #f87;
}

/* ==================== */
/* IMÁGENES */
/* ==================== */

/* Tamaño base */
.columna_imagen,
.columna_imagen_small,
.columna_imagen_media,
.columna_imagen_big {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 12px;
}

/* Imagen pequeña */
.columna_imagen_small {
  width: 50px;
  height: 50px;
  object-fit: cover;
}

/* Imagen mediana */
.columna_imagen_media {
  width: 150px;
  height: 150px;
  object-fit: cover;
}

/* Imagen grande */
.columna_imagen_big {
  width: 200px;
  height: 200px;
  object-fit: cover;
}

/* Efecto hover imagen  */
.columna_imagen:hover,
.columna_imagen_small:hover,
.columna_imagen_media:hover,
.columna_imagen_big:hover {
  transform: scale(1.05);
}

/* ======================================= */
/* ESTILOS - MANTIENE DISEÑO ORIGINAL 100% */
/* ======================================= */
/* ==================== */
/* VARIANTES DE COLOR */
/* ==================== */

/* Fondo blanco (default) */
.columna.blanca {
  background: white;
  color: black !important;
}

/* Fondo negro con gradiente */
.columna.negra {
  background: radial-gradient(circle, gray, black);
  color: white !important;
}

/* Fondo plateado con gradiente */
.columna.plateada {
  background: radial-gradient(
    circle,
    rgba(245, 245, 245, 0.911),
    rgba(128, 128, 128, 0.377)
  );
  color: black !important;
}

/* Fondo estilo cuero */
.columna.cuero {
  background: rgb(252, 133, 69);
  background: radial-gradient(
    circle,
    rgba(252, 133, 69, 1) 21%,
    rgba(64, 2, 2, 1) 50%,
    rgba(252, 133, 69, 1) 100%
  );
}

/* Fondo naranja lineal */
.columna.naranja {
  background: rgb(252, 133, 69);
  background: linear-gradient(
    90deg,
    rgba(252, 133, 69, 1) 21%,
    rgba(64, 2, 2, 1) 50%,
    rgba(252, 133, 69, 1) 100%
  );
}

/* Fondo cielo radial */
.columna.cielo {
  background-image: radial-gradient(circle, #5c0067 0%, #00d4ff 100%);
}

/* Fondo arcoíris */
.columna.rainBow {
  background-image: repeating-linear-gradient(
    to right,
    red,
    orange,
    yellow,
    green,
    blue,
    indigo,
    violet
  );
}

/* Fondo espacio sideral */
.columna.sideral {
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}

/* Fondo cónico circular */
.columna.conico1 {
  background-image: conic-gradient(red, yellow, green, blue, black);
  border-radius: 50%;
}

/* ========================== */
/* CRÉDITOS Y AGRADECIMIENTOS */
/* ========================== */
/* 
 * Estilos optimizados con la colaboración de:
 * DeepSeek Chat (https://deepseek.com)
 * Versión final revisada y aprobada por el usuario
 * Mantiene 100% del diseño visual original
 */