/*
  Estilo Vintage tipo Windows Vista para tablas, botones y headers
  Puedes incluir este archivo en cualquier página para aplicar el diseño clásico.
  Usa las clases: vista-table, vista-btn, vista-header
*/

/* Fuente general tipo Segoe UI (Windows Vista) */
@import url('https://fonts.googleapis.com/css?family=Segoe+UI:400,700&display=swap');
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #e3e9f0 0%, #c8d6e5 100%);
    color: #222;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

html, body {
    height: 100%;
    min-height: 100%;
}

main {
    flex: 1 0 auto;
}

.vintage-table {
    background: rgba(255,255,255,0.95);
    border-radius: 12px;
    box-shadow: 0 4px 16px 0 rgba(0,0,0,0.10), 0 1.5px 4px 0 rgba(0,0,0,0.08);
    border: 1px solid #b0b9c6;
    overflow: hidden;
}

.vintage-table th {
    background: linear-gradient(180deg, #eaf3fa 0%, #c8d6e5 100%);
    color: #2b3a4a;
    font-weight: bold;
    border-bottom: 2px solid #b0b9c6;
    padding: 12px 8px;
    font-size: 1.1em;
    letter-spacing: 0.5px;
}

.vintage-table td {
    background: rgba(255,255,255,0.85);
    border-bottom: 1px solid #e3e9f0;
    padding: 10px 8px;
    font-size: 1em;
}

.vintage-table tr {
    transition: background 0.2s;
}

.vintage-table tr:hover {
    background: #e3f0fa;
}

.vintage-btn, .btn-primary, .btn-danger, .btn-success, .btn-outline-info {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border-radius: 8px;
    border: 1px solid #b0b9c6;
    background: linear-gradient(180deg, #fafdff 0%, #dbe7f3 100%);
    color: #2b3a4a;
    box-shadow: 0 2px 6px 0 rgba(0,0,0,0.10);
    padding: 8px 18px;
    font-size: 1em;
    margin: 2px 0;
    transition: background 0.2s, box-shadow 0.2s;
    cursor: pointer;
}

.vintage-btn:hover, .btn-primary:hover, .btn-danger:hover, .btn-success:hover, .btn-outline-info:hover {
    background: linear-gradient(180deg, #e3f0fa 0%, #b0b9c6 100%);
    color: #1a2330;
    box-shadow: 0 4px 12px 0 rgba(0,0,0,0.13);
}

caption {
    font-size: 1.3em;
    font-weight: bold;
    color: #3a4a5a;
    padding: 10px 0 5px 0;
    letter-spacing: 1px;
    text-shadow: 0 1px 0 #fff, 0 2px 2px #b0b9c6;
}

h4, h6 {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #2b3a4a;
    text-shadow: 0 1px 0 #fff, 0 2px 2px #b0b9c6;
}

input[type="submit"], input[type="button"] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Efecto glass para paneles */
.scrollable-content {
    background: rgba(255,255,255,0.7);
    border-radius: 14px;
    box-shadow: 0 2px 8px 0 rgba(0,0,0,0.08);
    padding: 12px 8px;
    margin-bottom: 18px;
}

/* Bordes y detalles extra para look Vista */
.vintage-table, .scrollable-content {
    border: 1.5px solid #b0b9c6;
}

/* Opcional: iconos o detalles decorativos */
/* Puedes agregar más detalles visuales aquí si lo deseas */

/* Tablas vintage */
.vista-table th {
    background: linear-gradient(90deg, #4f7db3 0%, #a3c0e9 100%);
    color: #fff;
    border-bottom: 2px solid #3a5a8c;
    font-weight: bold;
}
.vista-table td, .vista-table th {
    border: 1px solid #b0b8c9;
}
.vista-table tbody tr:nth-child(even) {
    background: #f4f8fc;
}
.vista-table tbody tr:nth-child(odd) {
    background: #eaf0fa;
}

/* Botones glass vintage */
.vista-btn {
    background: linear-gradient(180deg, #eaf3ff 0%, #b3c6e7 100%);
    border: 1px solid #7fa1d6;
    color: #23406e;
    box-shadow: 0 2px 8px #b3c6e7a0;
    font-weight: bold;
  
    transition: background 0.2s, box-shadow 0.2s;
}
.vista-btn:hover {
    background: linear-gradient(180deg, #d0e1fa 0%, #a3c0e9 100%);
    color: #1a2c4a;
    box-shadow: 0 4px 16px #a3c0e980;
}

/* Encabezados grandes vintage */
.vista-header {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 2rem;
    color: #23406e;
    text-shadow: 1px 1px 0 #fff, 0 2px 8px #b3c6e7a0;
    margin-bottom: 2rem;
    margin-top: 1rem;
}

/* Botones con color de texto según tipo */
.btn-primary, .vintage-btn.btn-primary {
    color: #1565c0 !important; /* Azul Vista */
    border-color: #1565c0;
}
.btn-primary:hover, .vintage-btn.btn-primary:hover {
    color: #0d47a1 !important;
    border-color: #0d47a1;
}

.btn-danger, .vintage-btn.btn-danger {
    color: #b71c1c !important; /* Rojo Vista */
    border-color: #b71c1c;
}
.btn-danger:hover, .vintage-btn.btn-danger:hover {
    color: #7f0000 !important;
    border-color: #7f0000;
}

.btn-success, .vintage-btn.btn-success {
    color: #388e3c !important; /* Verde Vista */
    border-color: #388e3c;
}
.btn-success:hover, .vintage-btn.btn-success:hover {
    color: #1b5e20 !important;
    border-color: #1b5e20;
}

.btn-outline-info, .vintage-btn.btn-outline-info {
    color: #0288d1 !important; /* Celeste Vista */
    border-color: #0288d1;
}
.btn-outline-info:hover, .vintage-btn.btn-outline-info:hover {
    color: #01579b !important;
    border-color: #01579b;
}

/*
  Para usarlo:
  1. Incluye en tu HTML: <link rel="stylesheet" href="assets/css/estilovintage.css">
  2. Agrega la clase 'vista-table' a tus tablas, 'vista-btn' a tus botones y 'vista-header' a tus encabezados.
*/

/* NAVBAR ESTILO VISTA */
.navbar {
    background: rgba(255,255,255,0.85);
    border-radius: 0 0 16px 16px;
    box-shadow: 0 4px 16px 0 rgba(0,0,0,0.10), 0 1.5px 4px 0 rgba(0,0,0,0.08);
    border-bottom: 2px solid #b0b9c6;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.navbar-brand {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.5em;
    color: #1565c0 !important;
    letter-spacing: 1px;
    text-shadow: 0 1px 0 #fff, 0 2px 2px #b0b9c6;
}

.navbar-nav .nav-link, .navbar-nav .dropdown-toggle {
    color: #2b3a4a !important;
    font-size: 1.1em;
    padding: 8px 18px;
    border-radius: 8px;
    transition: background 0.2s, color 0.2s;
}

.navbar-nav .nav-link:hover, .navbar-nav .dropdown-toggle:hover, .navbar-nav .nav-link:focus {
    background: linear-gradient(180deg, #e3f0fa 0%, #b0b9c6 100%);
    color: #1565c0 !important;
}

.dropdown-menu {
    background: rgba(255,255,255,0.97);
    border-radius: 10px;
    box-shadow: 0 4px 16px 0 rgba(0,0,0,0.10);
    border: 1px solid #b0b9c6;
    margin-top: 8px;
}

.dropdown-item {
    color: #2b3a4a;
    font-size: 1em;
    border-radius: 6px;
    padding: 8px 18px;
    transition: background 0.2s, color 0.2s;
}

.dropdown-item:hover, .dropdown-item:focus {
    background: linear-gradient(90deg, #e3f0fa 0%, #b0b9c6 100%);
    color: #1565c0;
}

.navbar-text .btn-light {
    background: linear-gradient(180deg, #fafdff 0%, #dbe7f3 100%);
    color: #1565c0;
    border-radius: 8px;
    border: 1px solid #b0b9c6;
    box-shadow: 0 2px 6px 0 rgba(0,0,0,0.10);
    font-weight: bold;
    padding: 7px 18px;
    margin-left: 10px;
    transition: background 0.2s, color 0.2s;
}

.navbar-text .btn-light:hover {
    background: linear-gradient(180deg, #e3f0fa 0%, #b0b9c6 100%);
    color: #0d47a1;
}