/* =========================================================
   1. ESTILOS GENERALES (Modo Oscuro Elegante)
   ========================================================= */
:root {
    --negro: #0a0a0a;
    --gris-oscuro: #141414;
    --naranja: #e67e22; /* Naranja Institucional */
    --dorado: #d35400;
    --texto: #e0e0e0;
    --blanco: #ffffff;
    --verde: #27ae60;
    --rojo: #c0392b;
}

body { margin: 0; font-family: 'Segoe UI', sans-serif; background: var(--negro); color: var(--texto); height: 100vh; overflow: hidden; }

/* =========================================================
   2. PANTALLA DIVIDIDA (LOGIN Y CONSULTA)
   ========================================================= */
/* IMPORTANTE: Esta clase activa el diseño de dos mitades */
.split-body { display: flex; width: 100%; height: 100vh; }

.split-left {
    width: 40%; background: var(--gris-oscuro);
    display: flex; flex-direction: column; justify-content: center; padding: 60px;
    border-right: 4px solid var(--naranja); box-sizing: border-box;
}

.split-right {
    width: 60%;
    /* FOTO GUADALAJARA (Hospicio Cabañas) */
    background: url('https://images.unsplash.com/photo-1573064347109-957663304149?auto=format&fit=crop&w=1600&q=80') center/cover;
    position: relative;
}
.split-right::after {
    content: ""; position: absolute; top:0; left:0; width:100%; height:100%;
    background: linear-gradient(to right, rgba(230,126,34,0.4), rgba(0,0,0,0.1));
}

/* Títulos y Textos Públicos */
.title-main { font-size: 3rem; margin-bottom: 10px; line-height: 1; color: white; }
.orange-text { color: var(--naranja); }
.subtitle { color: #888; letter-spacing: 2px; margin-bottom: 40px; font-size: 0.9rem; text-transform: uppercase; }

/* Inputs Públicos */
.input-public {
    width: 100%; padding: 15px; margin-bottom: 20px;
    background: rgba(255,255,255,0.05); border: 1px solid #444; color: white;
    border-radius: 8px; font-size: 1rem; outline: none; box-sizing: border-box;
}
.input-public:focus { border-color: var(--naranja); background: rgba(255,255,255,0.1); }

.btn-public {
    width: 100%; padding: 15px; background: linear-gradient(to right, var(--dorado), var(--naranja));
    color: white; border: none; border-radius: 8px; font-weight: bold; cursor: pointer; font-size: 1.1rem;
    transition: 0.3s;
}
.btn-public:hover { transform: scale(1.02); }

.link-public { display: block; text-align: center; color: #666; text-decoration: none; margin-top: 20px; font-size: 0.9rem; }
.link-public:hover { color: var(--naranja); }

/* Caja de Resultados (Consulta) */
.result-box { background: rgba(255,255,255,0.05); padding: 25px; border-radius: 8px; border-left: 4px solid var(--naranja); margin-top: 20px; }
.result-item { margin-bottom: 10px; font-size: 1.1rem; }
.alert-note { background: rgba(192, 57, 43, 0.2); color: #e74c3c; padding: 10px; border-radius: 5px; margin-top: 15px; font-weight: bold; }

/* =========================================================
   3. SISTEMA INTERNO (DASHBOARD)
   ========================================================= */
.admin-body { display: flex; height: 100vh; }

/* Sidebar */
.sidebar { width: 280px; background: #0f0f0f; border-right: 1px solid #333; display: flex; flex-direction: column; }
.profile { padding: 30px 20px; border-bottom: 1px solid #333; }
.profile h3 { color: var(--naranja); margin: 0; }

.menu { flex: 1; overflow-y: auto; padding: 15px; }
.menu-btn {
    display: flex; align-items: center; padding: 12px 15px; width: 100%;
    margin-bottom: 5px; border-radius: 8px; cursor: pointer; border: none; background: transparent;
    color: #aaa; font-weight: 500; font-size: 1rem; text-align: left;
}
.menu-btn:hover { background: rgba(255,255,255,0.05); color: white; }
.menu-btn.active { background: rgba(230,126,34,0.15); color: var(--naranja); border-left: 3px solid var(--naranja); }
.menu-btn i { width: 25px; margin-right: 10px; text-align: center; }

/* Área Principal */
.main { flex: 1; padding: 30px; overflow-y: auto; background: #181818; }

/* Pestañas (El secreto para que funcione) */
.tab-content { display: none; } /* Oculto por defecto */
.tab-content.active { display: block; animation: fade 0.3s; }
@keyframes fade { from {opacity: 0; transform: translateY(10px);} to {opacity: 1; transform: translateY(0);} }

/* Cards y Forms */
.card { background: #222; padding: 25px; border-radius: 10px; border: 1px solid #333; margin-bottom: 25px; }
.card-header { color: white; border-bottom: 2px solid var(--dorado); padding-bottom: 10px; margin-bottom: 20px; font-size: 1.5rem; }

.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.span-2 { grid-column: span 2; }
.span-4 { grid-column: span 4; }

label { font-size: 0.85rem; color: #888; margin-bottom: 5px; display: block; }
.input-admin {
    width: 100%; padding: 10px; background: #121212; border: 1px solid #444; color: white;
    border-radius: 5px; box-sizing: border-box;
}
.input-admin:focus { border-color: var(--naranja); }

.btn-admin {
    background: var(--naranja); color: white; border: none; padding: 12px; width: 100%;
    border-radius: 6px; font-weight: bold; cursor: pointer; margin-top: 10px;
}
.btn-admin:hover { background: var(--dorado); }

/* Tablas */
table { width: 100%; border-collapse: collapse; margin-top: 10px; }
th { background: #333; padding: 12px; text-align: left; color: var(--naranja); }
td { border-bottom: 1px solid #333; padding: 12px; color: #ddd; }
.badge { padding: 3px 8px; border-radius: 4px; background: #444; font-size: 0.8rem; }

.msg-ok { background: var(--verde); color: white; padding: 15px; border-radius: 5px; margin-bottom: 20px; }
.msg-err { background: var(--rojo); color: white; padding: 15px; border-radius: 5px; margin-bottom: 20px; }

/* =========================================================
   ALIAS para compatibilidad (no rompe tu diseño)
   ========================================================= */

/* El dashboard en mi HTML usa admin-wrap */
.admin-wrap { display:flex; height:100vh; }

/* Mis templates usan .inp y .btn, tú usas .input-admin y .btn-admin */
.inp { 
  width: 100%; padding: 10px; background: #121212; border: 1px solid #444; color: white;
  border-radius: 5px; box-sizing: border-box;
}
.inp:focus { border-color: var(--naranja); }

.btn {
  background: var(--naranja); color: white; border: none; padding: 12px; width: 100%;
  border-radius: 6px; font-weight: bold; cursor: pointer; margin-top: 10px;
}
.btn:hover { background: var(--dorado); }

/* Mensajes del dashboard */
.msg {
  background: rgba(255,255,255,0.06);
  border-left: 4px solid var(--naranja);
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 20px;
  color: white;
}