/* Estilos generales */
body {
    font-family: Arial, sans-serif;
    background-color: #f8f8f8;
    margin: 0;
}

/* Login / Registro */
.form-container {
    max-width: 400px;
    margin: auto;
    padding: 20px;
    background: white;
    margin-top: 100px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

input, button {
    /*display: block;*/
    width: 100%;
    padding: 10px;
    margin-top: 10px;
}

button {
    background-color: #007bff;
    border: none;
    color: white;
    font-weight: bold;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

.logo {
    width: 150px;
    display: block;
    margin: 0 auto 20px;
}

/* Sidebar */
.sidebar {
    width: 200px;
    background-color: #343a40;
    color: white;
    height: 100vh;
    padding: 20px;
    position: fixed;
}

.sidebar a {
    display: block;
    color: #004aad;
    text-decoration: none;
    margin: 10px 0;
}

.sidebar a:hover {
    text-decoration: underline;
}

/* Topbar */
.topbar {
    margin-left: 200px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background-color: #f8f8f8;
    padding: 10px 20px;
    border-bottom: 1px solid #ddd;
}

/* User Menu */
.user-menu {
    position: relative;
    display: inline-block;
}

.user-button {
    background: #007bff;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
}

.user-button:hover {
    background-color: #0056b3;
}

.dropdown {
    display: none;
    position: absolute;
    right: 0;
    background-color: white;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
    padding: 10px;
    z-index: 1;
    min-width: 150px;
}

.user-menu:hover .dropdown {
    display: block;
}

.dropdown a {
    color: black;
    text-decoration: none;
    display: block;
    padding: 5px 10px;
}

.dropdown a:hover {
    background-color: #f0f0f0;
}

/* Contenido principal */
.content {
    margin-left: 200px;
    padding: 20px;
}

/* Bloques de estado */
.status-box {
    background-color: #e9ecef;
    padding: 20px;
    margin-top: 20px;
    border-radius: 8px;
}
.layout {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 220px;
    background-color: #fff;
    color: white;
    padding: 20px;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
}

.content {
    margin-left: 300px; /* Para que no se monte sobre el sidebar */
    padding: 20px;
    background-color: #f8f8f8;
    flex: 1;
}
.status-box {
    background-color: #f2f5f8;
    padding: 20px;
    border-radius: 8px;
    margin-top: 20px;
    font-size: 16px;
}
.status-box p {
    margin: 6px 0;
}
.btn-exportar {
	background-color: #28a745 !important;
	color: white !important;
	border: none;
	padding: 6px 12px;
	border-radius: 4px;
	margin-bottom: 15px;
	cursor: pointer;
}

/* ===== Upgrade Ribbon (banner de plan) ===== */
.upgrade-ribbon{
  position: sticky; 
  top: 0; 
  z-index: 9999;
  padding: 10px 16px; 
  text-align: center; 
  font-weight: 600;
  background: linear-gradient(90deg, #fff 0%, #e0ffe8 50%, #fff 100%);
  animation: pulseBg 2.5s infinite;
  border-bottom: 1px dashed #16a34a;
}
.upgrade-ribbon .upgrade-link{ 
  text-decoration: underline; 
}

@keyframes pulseBg{
  0%   { filter: brightness(1); }
  50%  { filter: brightness(1.18); }
  100% { filter: brightness(1); }
}


/* ======== CapaSiete Design System: tokens + componentes unificados ======== */
:root{
  --bg:#0b1220; --bg-2:#0e1626;
  --card:#101829; --card-2:#0e1626;
  --text:#e8eefc; --muted:#a9b4ce;
  --brand:#38bdf8; --brand-2:#22d3ee;
  --ok:#34d399; --warn:#fbbf24; --danger:#f87171;
  --radius:16px; --shadow:0 10px 30px rgba(16,24,41,.15);
  --border:rgba(255,255,255,.10);
}

/* Modo claro por defecto del sistema actual */
body{ color:#0b1220; }

/* Helpers de layout tipificados */
.container{ width:min(1200px,92%); margin:auto; }
.section{ padding:50px 0; }
.center{text-align:center} .right{text-align:right}
.muted{color:var(--muted)}
.mt-8{margin-top:8px} .mt-12{margin-top:12px} .mt-16{margin-top:16px} .mt-24{margin-top:24px}
.mb-12{margin-bottom:12px} .mb-24{margin-bottom:24px}
.p-16{padding:16px} .p-20{padding:20px} .p-24{padding:24px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

/* Cards unificadas */
.card{
  background:#fff; /* claro por defecto (coincide con tus páginas) */
  border:1px solid #e6e8f0;
  border-radius:var(--radius);
  box-shadow:0 6px 20px rgba(16,24,41,.06);
}

/* Botones (conserva tu primario azul actual y añade variantes) */
.btn{display:inline-flex;align-items:center;justify-content:center;font-weight:700;border-radius:12px;padding:12px 18px;border:1px solid transparent;cursor:pointer;transition:.2s}
.btn-primary{background:#007bff;color:#fff;border-color:#007bff}        /* tu primario */
.btn-primary:hover{background:#0056b3;border-color:#0056b3}
.btn-ghost{background:transparent;color:#0b1220;border-color:#dfe3eb}
.btn-ghost:hover{background:#f5f7fb}
.btn-danger{background:linear-gradient(90deg,#f87171,#ef4444);color:#fff}

/* Inputs unificados (sobre tu input/base actual) */
.input, .select, .textarea, input[type="text"], input[type="tel"], input[type="email"], select, textarea{
  width:100%;padding:12px;border-radius:10px;border:1px solid #dfe3eb;background:#fff;color:#0b1220
}
label{display:block;margin-bottom:6px;font-weight:600}
.help{font-size:12px;color:#6b7280}

/* Hero / Kicker / Pills / Stats (para landing) */
.hero{display:grid;grid-template-columns:1.2fr .9fr;gap:36px;align-items:center;padding:48px 0 30px}
.kicker{display:inline-flex;gap:8px;align-items:center;background:#e8f7ff;color:#007bff;border:1px solid #cfefff;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.3px;text-transform:uppercase}
.pill{font-size:12px;color:#475569;border:1px dashed #e2e8f0;padding:6px 10px;border-radius:999px}
.statbar{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
.stat{background:#f7fafc;border:1px solid #e6e8f0;border-radius:14px;padding:14px}
.stat .big{font-size:22px;font-weight:800}
.stat .cap{color:#6b7280;font-size:12px}

/* Pricing unificado (para landing y planes) */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.price{
  background:linear-gradient(180deg,#ffffff,#f7fafc);
  border:1px solid #e6e8f0; border-radius:16px; padding:20px
}
.price .tag{display:inline-block;background:#e8f7ff;border:1px solid #cfefff;color:#007bff;font-weight:800;padding:4px 10px;border-radius:999px;font-size:12px;margin-bottom:10px}
.price .amt{font-size:32px;font-weight:900;margin:6px 0}
.price ul{padding-left:18px;margin:10px 0 0;color:#475569} .price li{margin:6px 0}

/* Tablas del sistema */
.table{width:100%;border-collapse:collapse;border:1px solid #e6e8f0;border-radius:12px;overflow:hidden}
.table th,.table td{padding:12px;border-bottom:1px solid #e6e8f0}
.table th{background:#f7fafc;text-align:left;color:#475569}
.table tr:hover td{background:#fbfdff}

/* Banner / ribbon de plan (usa tu clase existente) */
.upgrade-ribbon{ position:sticky; top:0; z-index:9999; padding:10px 16px; text-align:center; font-weight:600; background:linear-gradient(90deg,#fff 0%, #e0ffe8 50%, #fff 100%); border-bottom:1px dashed #16a34a; }
.upgrade-ribbon .upgrade-link{ text-decoration:underline; }

/* Responsive */
@media (max-width:980px){
  .grid-2,.grid-3,.grid-4,.pricing{grid-template-columns:1fr}
  .hero{grid-template-columns:1fr;gap:22px}
  .statbar{grid-template-columns:1fr 1fr}
}