/*
Theme Name: Prefu Theme
Theme URI: https://prefu.edu.do
Author: Prefu Development Team
Author URI: https://prefu.edu.do
Description: Tema personalizado para el Sistema de Gestión Escolar Prefu SMS
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: prefu-theme
Tags: education, school, custom, responsive
*/

/* ==========================================================================
   Variables CSS
   ========================================================================== */
:root {
	--color-primary: #2271b1;
	--color-secondary: #3498db;
	--color-success: #27ae60;
	--color-warning: #f39c12;
	--color-danger: #c0392b;
	--color-info: #3498db;
	
	--color-text: #2c3e50;
	--color-text-light: #7f8c8d;
	--color-bg: #ffffff;
	--color-bg-light: #f8f9fa;
	--color-border: #e0e0e0;
	
	--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-size-base: 16px;
	--line-height-base: 1.6;
	
	--spacing-xs: 0.5rem;
	--spacing-sm: 1rem;
	--spacing-md: 1.5rem;
	--spacing-lg: 2rem;
	--spacing-xl: 3rem;
	
	--border-radius: 8px;
	--box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   Reset y Base
   ========================================================================== */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: var(--font-family);
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
	color: var(--color-text);
	background-color: var(--color-bg-light);
}

a {
	color: var(--color-primary);
	text-decoration: none;
	transition: color 0.3s ease;
}

a:hover {
	color: var(--color-secondary);
}

img {
	max-width: 100%;
	height: auto;
}

/* ==========================================================================
   Utilidades
   ========================================================================== */
.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 var(--spacing-md);
}

.text-center {
	text-align: center;
}

.mb-1 { margin-bottom: var(--spacing-xs); }
.mb-2 { margin-bottom: var(--spacing-sm); }
.mb-3 { margin-bottom: var(--spacing-md); }
.mb-4 { margin-bottom: var(--spacing-lg); }

.mt-1 { margin-top: var(--spacing-xs); }
.mt-2 { margin-top: var(--spacing-sm); }
.mt-3 { margin-top: var(--spacing-md); }
.mt-4 { margin-top: var(--spacing-lg); }

/* ==========================================================================
   Botones
   ========================================================================== */
.btn {
	display: inline-block;
	padding: 0.75rem 1.5rem;
	font-size: 1rem;
	font-weight: 600;
	text-align: center;
	border: none;
	border-radius: var(--border-radius);
	cursor: pointer;
	transition: all 0.3s ease;
	text-decoration: none;
}

.btn-primary {
	background-color: var(--color-primary);
	color: white;
}

.btn-primary:hover {
	background-color: var(--color-secondary);
	color: white;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(34, 113, 177, 0.3);
}

.btn-success {
	background-color: var(--color-success);
	color: white;
}

.btn-success:hover {
	background-color: #229954;
	color: white;
}

/* ==========================================================================
   Cards
   ========================================================================== */
.card {
	background: white;
	border-radius: var(--border-radius);
	box-shadow: var(--box-shadow);
	padding: var(--spacing-md);
	margin-bottom: var(--spacing-md);
}

.card-title {
	font-size: 1.5rem;
	font-weight: 700;
	margin-bottom: var(--spacing-sm);
	color: var(--color-text);
}

.card-body {
	color: var(--color-text-light);
}

/* ==========================================================================
   Grid System
   ========================================================================== */
.grid {
	display: grid;
	gap: var(--spacing-md);
}

.grid-2 {
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid-3 {
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.grid-4 {
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 768px) {
	:root {
		--font-size-base: 14px;
	}
	
	.container {
		padding: 0 var(--spacing-sm);
	}
	
	.grid-2,
	.grid-3,
	.grid-4 {
		grid-template-columns: 1fr;
	}
}