/*
Theme Name: BlankSlate Child
Theme URI: https://tusitio.com
Description: Tema hijo de BlankSlate para trabajar con Constructor de Plantillas Personalizadas
Author: Tu Nombre
Author URI: https://tusitio.com
Template: blankslate
Version: 1.0.0
License: GPL-2.0+
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: blankslate-child
*/

/* ==========================================================================
   Estilos personalizados del tema hijo
   ========================================================================== */

/* Variables CSS personalizadas */
:root {
    --color-primario: #007cba;
    --color-secundario: #005a87;
    --color-texto: #333333;
    --color-fondo: #ffffff;
    --color-borde: #dddddd;
    --fuente-principal: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --fuente-codigo: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    --ancho-contenedor: 1200px;
    --espacio-base: 1rem;
}

/* Reset básico */
* {
    box-sizing: border-box;
}

/* Contenedor principal */
.container {
    max-width: var(--ancho-contenedor);
    margin: 0 auto;
    padding: 0 var(--espacio-base);
}

/* Tipografía base */
body {
    font-family: var(--fuente-principal);
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-texto);
    background-color: var(--color-fondo);
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: var(--espacio-base);
    line-height: 1.2;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

/* Enlaces */
a {
    color: var(--color-primario);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover,
a:focus {
    color: var(--color-secundario);
    text-decoration: underline;
}

/* Imágenes responsivas */
img {
    max-width: 100%;
    height: auto;
}

/* Utilidades */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--espacio-base); }
.mt-2 { margin-top: calc(var(--espacio-base) * 0); }
.mt-3 { margin-top: calc(var(--espacio-base) * 0); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--espacio-base); }
.mb-2 { margin-bottom: calc(var(--espacio-base) * 2); }
.mb-3 { margin-bottom: calc(var(--espacio-base) * 3); }

.pt-0 { padding-top: 0; }
.pt-1 { padding-top: var(--espacio-base); }
.pt-2 { padding-top: calc(var(--espacio-base) * 0); }
.pt-3 { padding-top: calc(var(--espacio-base) * 3); }

.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: var(--espacio-base); }
.pb-2 { padding-bottom: calc(var(--espacio-base) * 0); }
.pb-3 { padding-bottom: calc(var(--espacio-base) * 3); }

/* Grid básico */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: calc(var(--espacio-base) * -0.5);
    margin-right: calc(var(--espacio-base) * -0.5);
}

.col {
    flex: 1;
    padding-left: calc(var(--espacio-base) * 0.5);
    padding-right: calc(var(--espacio-base) * 0.5);
}

.col-12 { flex: 0 0 100%; max-width: 100%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-3 { flex: 0 0 25%; max-width: 25%; }

/* Responsivo */
@media (max-width: 768px) {
    .col-md-12 { flex: 0 0 100%; max-width: 100%; }
    .col-md-6 { flex: 0 0 50%; max-width: 50%; }
    
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.5rem; }
}

@media (max-width: 480px) {
    .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
    
    .container {
        padding: 0 calc(var(--espacio-base) * 0.5);
    }
}

/* Estilos para las secciones del Constructor de Plantillas */
.ctb-section {
    margin: calc(var(--espacio-base) * 2) 0;
}

/* Navegación básica */
.site-header {
    background-color: var(--color-fondo);
    border-bottom: 1px solid var(--color-borde);
    padding: var(--espacio-base) 0;
}

.site-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--espacio-base);
}

.site-navigation a {
    display: block;
    padding: calc(var(--espacio-base) * 0.5) var(--espacio-base);
}

/* Footer básico */
.site-footer {
    background-color: var(--color-texto);
    color: var(--color-fondo);
    padding: calc(var(--espacio-base) * 0) 0;
    margin-top: calc(var(--espacio-base) * 0);
}

.site-footer a {
    color: var(--color-fondo);
}

/* Botones */
.button,
.btn {
    display: inline-block;
    padding: calc(var(--espacio-base) * 0.5) var(--espacio-base);
    background-color: var(--color-primario);
    color: var(--color-fondo);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.button:hover,
.btn:hover {
    background-color: var(--color-secundario);
    color: var(--color-fondo);
    text-decoration: none;
}

/* Formularios */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea,
select {
    width: 100%;
    padding: calc(var(--espacio-base) * 0.5);
    border: 1px solid var(--color-borde);
    border-radius: 4px;
    font-family: inherit;
    font-size: inherit;
}

/* Código */
code,
pre {
    font-family: var(--fuente-codigo);
    background-color: #f5f5f5;
    padding: 2px 4px;
    border-radius: 3px;
}

pre {
    padding: var(--espacio-base);
    overflow-x: auto;
}

/* Tablas */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--espacio-base);
}

th,
td {
    padding: calc(var(--espacio-base) * 0.5);
    border-bottom: 1px solid var(--color-borde);
    text-align: left;
}

th {
    font-weight: bold;
    background-color: #f5f5f5;
}