/* 
 * CSS/STYLES.CSS
 * Theme: "Comunicativa" (Gradient + Glassmorphism)
 * Matches resources/views/layouts/app.blade.php from reference project.
 */
:root {
    /* Brand Colors */
    --primary: #F2059F;
    /* vc-magenta */
    --primary-dark: #BF1F6A;
    /* vc-berry */
    --active-glow: #ff4dc4;
    /* Lighter magenta */

    --secondary: #8704BF;
    /* vc-purple */
    --secondary-dark: #5F1BF2;
    /* vc-indigo */

    --accent: #00F0FF;
    /* vc-cyan */

    /* Glassmorphism Backgrounds (Translucent) */
    --bg-dark: rgba(15, 23, 42, 0.3);
    /* Very sheer slate */
    --bg-card: rgba(30, 41, 59, 0.35);
    /* Sheer card bg */
    --bg-input: rgba(15, 23, 42, 0.5);
    /* Darker for readability */
    --bg-hover: rgba(255, 255, 255, 0.1);

    --text-main: #f8fafc;
    /* Slate-50 */
    --text-muted: #e2e8f0;
    /* Slate-200 (Lighter for contrast on gradient) */

    --border: rgba(255, 255, 255, 0.15);

    --success: #10b981;
    /* Emerald-500 */
    --danger: #ef4444;
    /* Red-500 */

    --radius: 16px;
    /* Slightly rounder */
    --shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    --glow: 0 0 25px rgba(242, 5, 159, 0.4);
}

* {
    box-sizing: border-box;
    outline: none;
}

body {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    /* Comunicativa Gradient: Indigo -> Purple -> Berry */
    background: linear-gradient(135deg, #5F1BF2 0%, #8704BF 50%, #BF1F6A 100%);
    background-attachment: fixed;
    color: var(--text-main);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
}

/* Login Section */
#loginSection {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    /* subtle overlay pattern */
    background-image:
        radial-gradient(circle at 20% 15%, rgba(242, 5, 159, 0.2), transparent 30%),
        radial-gradient(circle at 80% 0%, rgba(95, 27, 242, 0.2), transparent 30%);
}

.login-card {
    background: rgba(30, 41, 59, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 40px;
    border-radius: 24px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    text-align: center;
}

.login-logo {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    /* Gradient Text */
    background: linear-gradient(to bottom right, #fff, #e2e8f0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    filter: drop-shadow(0 0 15px rgba(242, 5, 159, 0.5));
}

/* Dashboard Layout */
#dashboardSection {
    display: flex;
    min-height: 100vh;
    background: transparent;
    /* Let body gradient show */
}

/* Sidebar Glassmorphism */
.sidebar {
    width: 270px;
    background: rgba(15, 23, 42, 0.25);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-right: 1px solid var(--border);
    padding: 24px;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}

@media (max-width: 768px) {
    .sidebar {
        display: none;
    }

    #dashboardSection {
        flex-direction: column;
    }

    .main-content {
        padding: 16px;
    }
}

.nav-brand {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.brand-icon {
    color: var(--accent);
    filter: drop-shadow(0 0 8px var(--accent));
}

.nav-item {
    padding: 12px 18px;
    border-radius: var(--radius);
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 14px;
    font-weight: 500;
    margin-bottom: 8px;
    border: 1px solid transparent;
}

.nav-item:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.nav-item.active {
    background: linear-gradient(90deg, rgba(242, 5, 159, 0.2) 0%, transparent 100%);
    border: 1px solid rgba(242, 5, 159, 0.3);
    color: #fff;
    text-shadow: 0 0 10px rgba(242, 5, 159, 0.6);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.main-content {
    flex: 1;
    padding: 32px;
    overflow-y: auto;
}

.header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
}

/* Glass Cards */
.card {
    background: var(--bg-card);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: var(--shadow);
}

.grid-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}

label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

input,
select,
textarea {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px 16px;
    border-radius: var(--radius);
    color: #fff;
    font-family: inherit;
    transition: all 0.2s;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(0, 240, 255, 0.2);
    background: rgba(15, 23, 42, 0.7);
}

/* Buttons */
button {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: var(--radius);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 15px rgba(242, 5, 159, 0.4);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(242, 5, 159, 0.6);
    filter: brightness(1.1);
}

button:active {
    transform: translateY(0);
}

button.secondary {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: none;
    color: rgba(255, 255, 255, 0.8);
}

button.secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border-color: #fff;
}

/* Word Button Style (Celeste) */
.btn-word {
    background: #00C2FF;
    /* Celeste vibrant */
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 15px rgba(0, 194, 255, 0.4);
}

.btn-word:hover {
    background: #0099cc;
    /* Slightly darker */
    box-shadow: 0 6px 20px rgba(0, 194, 255, 0.6);
    transform: translateY(-2px);
}

/* Tables */
.table-container {
    overflow-x: auto;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.1);
}

table {
    width: 100%;
    border-collapse: collapse;
}

th {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
    padding: 16px;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border);
    text-align: center;
    /* Centered headers */
}

td {
    padding: 16px;
    border-bottom: 1px solid var(--border);
    color: #fff;
    text-align: center;
    /* Centered content */
}

/* Optional: Keep first column (Domain) left aligned if preferred, 
   but user asked for centering. Let's stick to center for now 
   or maybe just left align the very first column for readability? 
   "titulos mas centrado con sus columnas" -> suggests they match.
   If I center everything, they will match.
*/

tr:last-child td {
    border-bottom: none;
}

tr:hover td {
    background: rgba(255, 255, 255, 0.05);
}

.capsule {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    background: rgba(0, 240, 255, 0.15);
    /* Accent bg */
    color: var(--accent);
    border: 1px solid rgba(0, 240, 255, 0.3);
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.1);
}

.hidden {
    display: none !important;
}

.section-panel {
    display: none;
}

.section-panel.active {
    display: block;
    animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Utility */
.text-gradient {
    background: linear-gradient(135deg, #fff, #cbd5e1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.status-msg {
    margin-top: 1rem;
    font-size: 0.9rem;
    min-height: 1.4em;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.status-msg.error {
    color: #f87171;
}

.status-msg.success {
    color: #34d399;
}

/* Month Navigation */
/* Month Navigation */
.month-nav {
    display: flex;
    justify-content: center;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 12px;
    margin-bottom: 24px;
    scrollbar-width: thin;
    -ms-overflow-style: none;
    flex-wrap: wrap;
    /* Allow wrapping on small screens if preferred, or keep scroll */
}

/* For wider screens, center. For small, likely scroll. 
   Actually, let's keep scroll but try to center if possible. 
   justify-content: center works if flex items < container width.
*/

.month-nav::-webkit-scrollbar {
    height: 4px;
}

.month-nav::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.month-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.month-pill {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 8px 20px;
    /* Larger click area */
    border-radius: 30px;
    /* More rounded */
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* Subtle depth */
}

.month-pill:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.month-pill.active {
    background: #22b8ff;
    color: #fff;
    border-color: transparent;
    box-shadow: none;
    font-weight: 600;
    text-shadow: none;
}

/* FAB Button */
.fab-btn {
    position: fixed;
    bottom: 32px;
    right: 32px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), #00c3ff);
    color: #000;
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px rgba(0, 240, 255, 0.4);
    border: none;
    cursor: pointer;
    z-index: 100;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.fab-btn:hover {
    transform: scale(1.1) rotate(90deg);
    box-shadow: 0 15px 35px rgba(0, 240, 255, 0.6);
}


/* Utility Definition */
.hidden {
    display: none !important;
}

/* Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease-out;
}

.modal-content {
    width: 90%;
    max-width: 600px;
    background: rgba(30, 41, 59, 0.85);
    /* Darker, more solid for modal */
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    animation: slideUp 0.3s ease-out;
    max-height: 90vh;
    overflow-y: auto;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}