/*
Theme Name: Creatos Design TEMA Wordpress
Description: Tema personalizado y optimizado, 100% compatible con Elementor.
Author: Creatos Design
Version: 1.0
Text Domain: creatos-design
*/

/* Reset básico de márgenes para Elementor */
body, html {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

p {
	margin: 0;
}

.desenfoque_fondo  {
    background-color: #ffffff98;
    backdrop-filter: blur(5px);
    border: 1.6px solid #ffffff50;
    box-shadow: 0px 1px 10px 0px rgba( 31, 38, 135, 0.1 );
}

/* 1. Contenedor Principal: Activa el scroll horizontal en móviles */
.table_style_code {
  width: 100%;
  overflow-x: auto; /* Scroll horizontal si el contenido es más ancho */
  -webkit-overflow-scrolling: touch; /* Desplazamiento suave en iOS */
  background-color: #ffffff; /* Fondo gris claro similar al de la imagen */
  padding: 20px;
  border-radius: 8px; /* Bordes ligeramente redondeados para el contenedor */
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* 2. Reseteo y estructura base de la tabla */
.table_style_code table {
  width: 100%;
  min-width: 800px; /* Fuerza un ancho mínimo para que en móvil no se aplaste y active el scroll */
  border-collapse: collapse;
  border: none !important; /* Elimina el border="1" del HTML */
}

/* Anulamos el ancho fijo del colgroup para que sea fluido */
.table_style_code col {
  width: auto !important;
}

/* 3. Estilos generales de las celdas */
.table_style_code td {
  padding: 18px 20px; /* Espaciado amplio para replicar la imagen */
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 1px solid #e5e7eb; /* Línea separadora muy sutil */
  color: #4b5563; /* Gris oscuro elegante para el texto */
  font-size: 16px;
  vertical-align: middle;
  text-align: left;
}

/* 4. Estilos de la cabecera (Primera fila) */
.table_style_code tr:first-child td {
  text-transform: uppercase; /* Mayúsculas como en la foto */
  font-weight: 700;
  font-size: 16px;
  color: #1f2937; /* Gris más oscuro casi negro */
  letter-spacing: 0.05em;
  border-bottom: 2px solid #d1d5db; /* Borde ligeramente más grueso abajo del título */
}

/* 5. Estilo específico de la última columna (Color rojo y negrita) */
.table_style_code td:last-child {
  color: #000000; /* Tono rojo oscuro calcado de la columna 'PAID' */
  font-weight: 600;
  white-space: nowrap; /* Evita que el tiempo de respuesta se rompa en dos líneas */
}

/* Evitar que la cabecera de la última columna sea roja */
.table_style_code tr:first-child td:last-child {
  color: #1f2937; 
}

/* 6. Detalles finales */
.table_style_code tr:last-child td {
  border-bottom: none; /* Eliminar borde de la última fila para mayor limpieza */
}

/* (Opcional) Efecto sutil al pasar el mouse */
.table_style_code tr:not(:first-child):hover td {
  background-color: rgba(0, 0, 0, 0.015);
}