/* =========================================
   SELLCONTROL - SKEUOMORPHIC DESIGN SYSTEM
   ========================================= */

body {
    background-color: #d8dde3;
    /* Textura de ruido/lino sutil incrustada en base64 para evitar cargar imágenes externas */
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIklEQVQIW2NkQAKrVq36zwjjgzhhYWGMYAEYB8RmROaABADeOQ8CXl/xfgAAAABJRU5ErkJggg==');
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #333;
}

/* Navbar Metálica tipo Mac / iOS */
.navbar-skeuo {
    background: linear-gradient(to bottom, #f9f9f9 0%, #e3e3e3 40%, #cccccc 100%);
    border-bottom: 1px solid #888;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,1);
}

.navbar-skeuo .navbar-brand {
    font-weight: bold;
    color: #444;
    text-shadow: 0 1px 0 rgba(255,255,255,0.8);
}

/* Tarjetas y Contenedores */
.card-skeuo {
    background: linear-gradient(to bottom, #ffffff 0%, #f0f0f0 100%);
    border: 1px solid #a0a0a0;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,1);
    margin-bottom: 20px;
}

.card-skeuo .card-header {
    background: linear-gradient(to bottom, #eeeeee 0%, #d4d4d4 100%);
    border-bottom: 1px solid #a0a0a0;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    font-weight: bold;
    text-shadow: 0 1px 0 rgba(255,255,255,0.9);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}

/* Botones tridimensionales */
.btn-skeuo-primary {
    background: linear-gradient(to bottom, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%);
    border: 1px solid #144e9e;
    border-radius: 6px;
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 2px 3px rgba(0,0,0,0.3);
    transition: none; /* Quitamos transición para el efecto de presión inmediato */
}

.btn-skeuo-primary:hover {
    background: linear-gradient(to bottom, #7fc1f5 0%, #6ab2f0 50%, #509ff2 51%, #2b7ce3 100%);
    color: #fff;
}

.btn-skeuo-primary:active {
    background: #1e69de;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.6);
    transform: translateY(1px);
}

/* Inputs de formulario con profundidad */
.input-skeuo {
    border: 1px solid #999;
    border-radius: 5px;
    background: #fff;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.15), 0 1px 0 rgba(255,255,255,0.8);
    transition: border-color 0.2s;
}

.input-skeuo:focus {
    border-color: #54a3ee;
    outline: none;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1), 0 0 5px rgba(84, 163, 238, 0.5);
}