@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --font-code: 'JetBrains Mono', monospace;
    --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --primary: #0F4C5C;        /* Tu color Petrol */
    --primary-hover: #09313b;  /* Versión oscura para interacciones */
    --primary-light: #E7F1F3;  /* Versión muy clara para fondos/badges */

    /* === 2. FONDOS (Backgrounds) === */
    --bg-body: #f8f9fa;        /* Fondo general de la página */
    --bg-card: #ffffff;        /* Fondo de tarjetas (para que destaquen sobre el body) */
    --bg-secondary: #E9ECEF;   /* Fondo de secciones alternas o inputs deshabilitados */

    /* === 3. TIPOGRAFÍA (Typography) === */
    --text-main: #212529;      /* Títulos y párrafos principales */
    --text-muted: #6C757D;     /* Metadatos, fechas, placeholders */
    --text-light: #F8F9FA;     /* Texto sobre fondos oscuros */

    /* === 4. BORDES Y LÍNEAS (Borders) === */
    --border-strong: #212529;  /* Tus bordes estilo "Wireframe" externos */
    --border-subtle: #DEE2E6;  /* Líneas divisorias internas suaves */

    /* === 5. ESTADOS FUNCIONALES (Feedback) === */
    --success: #10B981;        /* Éxito, Completado, Online */
    --danger: #EF4444;         /* Error, Eliminar, Offline */
    --warning: #F59E0B;        /* Alerta, En Progreso, Pendiente */
    --info: #0EA5E9;           /* Información, Ayuda */
}

body{
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
    background-color: #f8f9fa;
    color: var(--text-main) !important;
}

/* ELEMENTOS ESTRUCTURALES */
h1, h2, h3, h4, h5, h6, 
.navbar, 
.btn, 
.badge,
small {
    font-family: var(--font-code);
    letter-spacing: -1px;
}

/* DEAQUÍ PARA ABAJO TENGO QUE VOLVER A REVISAR TODOS LOS ESTILOS PARA QUE ESTÉN EN CONSONANCIA CON ESTA REFORMULACIÓN DE MARCA */


/* ------------------------------ */
/* ---- ESTILOS GENERALES ------  */
/* ------------------------------ */


/* ------- TEXTOS ------- */
.text-muted{
    color: var(--text-muted) !important;
}

.text-primary   { color: var(--primary) !important; }
.text-secondary { color: var(--secondary) !important; }
.text-success   { color: var(--success) !important; }
.text-danger    { color: var(--danger) !important; }
.text-warning   { color: var(--warning) !important; }

.bg-primary     { background-color: var(--primary) !important; }
.bg-secondary   { background-color: var(--secondary) !important; }
.bg-light       { background-color: var(--primary-light) !important; }



/* ------- BOTONES -------------- */
/* NIVEL 1: LA ACCIÓN PRINCIPAL (Solid) */
/* Úsalo para: Submit, Descargar CV, Ver Proyectos (Hero) */
.btn-primary-custom {
    background-color: var(--primary);
    border: 2px solid var(--primary);
    color: white;
    font-weight: 600; /* Un poco más grueso para destacar */
    border-radius: 8px;
}

.btn-primary-custom:hover,
.btn-primary-custom:focus,
.btn-primary-custom:active {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
    color: white;
}

/* NIVEL 2: LA ACCIÓN SECUNDARIA (Outline) */
/* Úsalo para: Ver Repositorio, Ver Demo, Cargar más */
.btn-outline-custom {
    background-color: transparent;
    border: 2px solid var(--primary);
    color: var(--primary);
    font-weight: 600;
    border-radius: 8px;
}

.btn-outline-custom:hover {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
    color: white;
}

/* NIVEL 3: LA NAVEGACIÓN (Ghost / Text) */
/* Úsalo para: Botón Volver */
.btn-ghost-custom {
    background-color: transparent;
    border: none;
    color: #333; /* Gris oscuro, no necesariamente Petrol */
    text-decoration: none; /* O underline si prefieres */
    padding-left: 0; /* Alineado a la izquierda */
}

.btn-ghost-custom:hover {
    color: var(--primary); /* Al pasar el mouse se ilumina con tu marca */
    text-decoration: underline;
}

.btn-danger-custom{
    background-color: var(--danger);
    color: white;
    border-radius: 8px;
    border: 2px solid var(--danger);
}

.btn-danger-custom:hover{
    background-color: color-mix(in srgb, var(--danger), black 10%);
    color: white;
}

.btn-warning-custom{
    background-color: var(--warning);
    color: var(--text-dark);
    border-radius: 8px;
    border: 2px solid var(--warning);
}

.btn-warning-custom:hover{
    background-color: color-mix(in srgb, var(--warning), black 10%);
    color: var(--text-light);
}

.btn-primary-outline-custom{
    background-color: transparent;
    color: var(--primary);
    border-radius: 8px;
    border: 1px solid var(--primary);
}

.btn-primary-outline-custom:hover{
    background-color: color-mix(in srgb, var(--primary), black 10%);
    color: var(--text-light);
    border: 1px solid var(--primary);
}

.btn-success-outline-custom{
    background-color: transparent;
    color: var(--success);
    border-radius: 8px;
    border: 1px solid var(--success);
}

.btn-success-outline-custom:hover{
    background-color: color-mix(in srgb, var(--success), black 10%);
    color: var(--text-light);
    border: 1px solid var(--success);
}

.btn-info-outline-custom{
    background-color: transparent;
    color: var(--info);
    border-radius: 8px;
    border: 1px solid var(--info);
}

.btn-info-outline-custom:hover{
    background-color: color-mix(in srgb, var(--info), black 10%);
    color: var(--text-light);
    border: 1px solid var(--info);
}

svg{
    width: 24px;
}

/* ---- BADGES ---- */
.badge-custom {
    background-color: rgba(15, 76, 92, 0.1); /* Tu color Petrol al 10% de opacidad */
    color: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 8px;
}

/* --- FORMULARIOS ---- */
.form-control:focus, .form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.25rem rgba(15, 76, 92, 0.25);
}

/* ---- NAVBAR ----- */
.navbar {
    background-color: #ffffff; /* O var(--bg-body) */
    border-bottom: 2px solid var(--primary); /* Límite duro, no sombra difusa */
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.navbar-brand {
    font-weight: 700;
    color: var(--primary) !important;
}

.nav-link {
    color: var(--text-muted) !important;
    position: relative; /* Necesario para el truco matemático siguiente */
}

.nav-link:hover, .nav-link.active {
    color: var(--primary) !important;
}

.navbar-brand:hover::after {
    content: '_';
    animation: blink 1s step-end infinite;
}

@keyframes blink {
    50% { opacity: 0; }
}


/* --- TABLAS ---- */
/* 1. Personalizar la barra de búsqueda de DataTables */
.dataTables_filter {
    text-align: left !important; /* Alinear a la izquierda */
    float: none !important;
    width: 100%;
}

.dataTables_filter label {
    width: 100%; /* El label envuelve al input */
}

.dataTables_filter input {
    width: 100% !important;     /* Forzar ancho completo */
    margin-left: 0 !important;  /* Quitar margen izquierdo por defecto */
    padding: 10px 15px;         /* Más espacio interno (padding) */
    border-radius: 8px;         /* Bordes redondeados modernos */
    border: 1px solid #dee2e6;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02); /* Sombra muy sutil */
    font-size: 1rem;
}

.dataTables_filter input:focus {
    border-color: #2563EB;      /* Tu color primario al hacer click */
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.dt-input{
    width: 100%;
}

/* 2. Limpiar estilo de la Tabla */
table.dataTable {
    border-collapse: collapse !important; /* Quitar doble borde */
    width: 100% !important;
}

table.dataTable thead th {
    border-bottom: 2px solid #f3f4f6 !important; /* Línea suave abajo del header */
    color: #6b7280; /* Texto gris suave (Slate 500) */
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    padding-bottom: 12px;
}

/* Filas más altas para mejor lectura */
table.dataTable tbody td {
    padding: 16px 10px !important;
    vertical-align: middle;
    border-bottom: 1px solid #f3f4f6;
    color: #1f2937;
}

/* Quitar bordes laterales si usas table-bordered */
.table-bordered td, .table-bordered th {
    border: none;
}


/* -------------------------- */
/* ---- PUBLIC: LOGIN ------  */
/* -------------------------- */

#formLogin{
    width: 100%; 
    max-width: 400px;
    /* border: none;  */
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

#formLogin .form-label {
    display: block;
    text-align: left;    
    font-weight: 600;
    font-size: 0.9rem;
    color: #4b5563;
}

#formLogin .btn-primary-custom {
    width: 100%;
    padding: 10px;
    font-weight: 600;
}

/* ---------------------------------- */
/* ---- AUTH: SELECCIONAR PERFIL ----  */
/* ----------------------------Ñ----- */

.btn-select-profile {
    transition: all 0.3s ease;
    border: 2px solid #dee2e6;
    color: var(--primary);
}
.btn-select-profile:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    border-color: var(--primary);
    background-color: #f8f9fa;
    color: var(--primary);
}
/* Clase para el icono dentro del botón */
.btn-select-profile i {
    font-size: 2rem;
    color: #adb5bd;
    transition: color 0.3s;
}
.btn-select-profile:hover i {
    color: var(--primary);
}

/* -------------------------- */
/* ---- PUBLIC: INDEX ------  */
/* -------------------------- */

/* ------ CARDS ------ */
/* Efecto de Hover en la imagen */
.group-hover-zoom img {
    transition: transform 0.5s ease;
}

.card:hover .group-hover-zoom img {
    transform: scale(1.05); /* Zoom sutil al pasar el mouse por la tarjeta */
}

/* Overlay técnico sobre la imagen */
.overlay-tech {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(15, 76, 92, 0.7); /* Tu Petrol con transparencia */
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 10;
}

.card:hover .overlay-tech {
    opacity: 1;
}

/* Ajuste de tipografía para el interior de la tarjeta */
.card-header small {
    letter-spacing: -0.5px;
}


/* ----------------------------- */
/* ---- PUBLIC: PROYECTOS ------  */
/* ----------------------------- */
/* Estilos específicos para la consola de búsqueda */
.form-control::placeholder {
    color: #6c757d;
    opacity: 0.5;
}
.form-control:focus, .form-select:focus {
    background-color: #2c2c2c !important; /* Mantiene oscuro al enfocar */
    color: white !important;
    border-color: var(--success) !important;
    box-shadow: none;
}

/* Hover sutil en la tarjeta completa */
.project-card-hover {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.project-card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 8px 8px 0px var(--primary-light) !important; /* Sombra dura al hacer hover */
}


/* -------------------------- */
/* ---- ADMIN: USUARIOS ----  */
/* -------------------------- */

#sidebar{
    background-color: var(--background-secondary);
    height: 100%;
}

#sidebar span, #sidebar a{
    color: var(--text-dark);
}

.form-admin{
    width: 100%; 
    max-width: 600px;
    /* border: none;  */
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

.btn-action{
    height: 40px;

}

.form-admin .form-label {
    display: block;
    text-align: left;    
    font-weight: 600;
    font-size: 0.9rem;
    color: #4b5563;
}

.form-admin .btn-primary {
    width: 100%;
    padding: 10px;
    font-weight: 600;
    background-color: var(--primary-color);
}