/* ==========================================================================
   Centro de Control de MadCorp: la cara de la casa (la de MadFarm) para la
   consola del fundador. Menú superior azul noche, títulos y tablas en azul y
   el naranja para el ALCANCE de cada cambio, que es lo que no puede pasar
   desapercibido.
   ========================================================================== */

:root {
    --mc-noche: #0F2C42;
    --mc-noche-2: #16405F;
    --mc-azul: #1E4E74;
    --mc-azul-claro: #29699B;
    --mc-naranja: #C26E24;
    --mc-naranja-palido: #FDF6EE;
    --mc-pildora: #A85B18;
    --mc-verde: #23875A;
    --mc-rojo: #B23A2E;
    --mc-fondo: #F5F8FA;
    --mc-tinta: #0F2C42;
    --mc-suave: #5A7183;
    --mc-borde: #DADEE3;
    --mc-cabecera: #F7F8F9;
    --mc-rayado: #F2F2F2;
    --bs-primary: var(--mc-azul);
    --bs-primary-rgb: 30, 78, 116;
    --bs-success-rgb: 35, 135, 90;
    --bs-warning-rgb: 194, 110, 36;
    --bs-danger-rgb: 178, 58, 46;
    --bs-body-bg: var(--mc-fondo);
    --bs-link-color: var(--mc-azul-claro);
    --bs-link-color-rgb: 41, 105, 155;
    --bs-font-sans-serif: 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
}

.espacio-progreso { display: block; width: 100%; height: 12px; margin: 8px 0; accent-color: var(--mc-azul); }
html, body { background: var(--mc-fondo); color: #212529; }

/* --- Siempre a la vista; en móvil las opciones se desplazan horizontalmente --- */
.marco { display: flex; flex-direction: column; min-height: 100vh; }
.superior { position: sticky; top: 0; z-index: 1030; display: flex; align-items: center; gap: 12px; padding: 8px 18px; background: var(--mc-noche); color: #E8F0F7; border-bottom: 3px solid var(--mc-naranja); }
.superior .marca { display: flex; align-items: center; flex-shrink: 0; gap: 10px; color: #fff; text-decoration: none; }
.superior .marca img { width: 32px; height: 32px; background: #fff; border-radius: 6px; padding: 2px; }
.superior .marca b { font-size: 18px; line-height: 1.1; }
.superior .marca small { display: block; color: #A9B9C6; font-size: 10px; text-transform: uppercase; }
.superior nav { display: flex; gap: 2px; overflow-x: auto; min-width: 0; flex: 1; }
.superior nav a { display: flex; align-items: center; gap: 6px; padding: 10px; border-radius: 6px; color: #D2E2EE; text-decoration: none; font-size: 14px; white-space: nowrap; }
.superior nav a:hover { background: rgba(255,255,255,.10); color: #fff; }
.superior nav a.activo { background: rgba(255,255,255,.12); color: #F2A65E; font-weight: 600; }
.sesion-panel { display: flex; align-items: center; gap: 12px; font-size: 12.5px; flex-shrink: 0; }
.sesion-panel form button { background: none; border: 0; padding: 8px; color: #F2A65E; }
.sesion-panel form button:hover { text-decoration: underline; }

.contenido { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.cuerpo { flex: 1 1 auto; padding: 22px 26px 30px; max-width: 1440px; width: 100%; margin: 0 auto; }
.pie { padding: 8px 26px; background: var(--mc-azul); color: #DCE8F0; font-size: 12.5px; }

/* --- Títulos, tarjetas y tablas --- */
.titulo { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.titulo h1 { font-size: 26px; font-weight: 600; color: var(--mc-tinta); margin: 0; }
.titulo small { color: var(--mc-suave); }
.card { border: 1px solid var(--mc-borde); border-radius: 6px; box-shadow: none; }
.card-header { background: var(--mc-cabecera); border-bottom: 1px solid var(--mc-borde); font-weight: 600; color: var(--mc-tinta); }
.table { margin-bottom: 0; font-size: 14px; }
.table > thead > tr > th { background: var(--mc-azul) !important; color: #fff !important; border-color: #2A608A !important; font-weight: 600; white-space: nowrap; }
.table > tbody > tr:nth-of-type(even) > * { --bs-table-bg-type: var(--mc-rayado); }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: #ECECEC; }
.btn-primary { --bs-btn-bg: var(--mc-azul); --bs-btn-border-color: var(--mc-azul); --bs-btn-hover-bg: #235A86; --bs-btn-hover-border-color: #235A86; }
.btn-success { --bs-btn-bg: var(--mc-verde); --bs-btn-border-color: var(--mc-verde); --bs-btn-hover-bg: #1C704A; --bs-btn-hover-border-color: #1C704A; }
.btn-warning { --bs-btn-color: #fff; --bs-btn-bg: var(--mc-naranja); --bs-btn-border-color: var(--mc-naranja); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #A95E1E; --bs-btn-hover-border-color: #A95E1E; }
.form-control:focus, .form-select:focus { border-color: var(--mc-azul-claro); box-shadow: 0 0 0 .2rem rgba(41,105,155,.2); }
.badge { font-weight: 600; border-radius: 4px; }

/* --- Tarjetas de cifras en Inicio --- */
.cifra { background: #fff; border: 1px solid var(--mc-borde); border-radius: 6px; padding: 14px 16px; height: 100%; }
.cifra .rotulo { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6C757D; }
.cifra .valor { font-size: 28px; font-weight: 700; line-height: 1.15; }
.cifra .nota { font-size: 12.5px; color: #6C757D; }

/* --- La ficha de una empresa: cabecera fija y pestañas --- */
.ficha-cabecera { background: #fff; border: 1px solid var(--mc-borde); border-left: 5px solid var(--mc-azul); border-radius: 6px; padding: 14px 18px; margin-bottom: 14px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.ficha-cabecera .codigo { font-family: Consolas, monospace; font-weight: 700; background: var(--mc-noche); color: #fff; border-radius: 4px; padding: 3px 9px; }
.ficha-cabecera h2 { font-size: 22px; margin: 0; color: var(--mc-tinta); }
.pestanas { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 2px solid var(--mc-naranja); margin-bottom: 16px; padding: 0 2px; }
.pestanas a { padding: 8px 16px; border-radius: 15px 15px 0 0; color: var(--mc-suave); text-decoration: none; font-size: 14px; }
.pestanas a:hover { background: #E8EEF4; color: var(--mc-tinta); }
.pestanas a.activa { background: var(--mc-pildora); color: #fff; font-weight: 600; }

/* --- El alcance y la confirmación: lo que va a cambiar, antes de cambiarlo --- */
.alcance { display: inline-flex; align-items: center; gap: 6px; background: var(--mc-naranja-palido); color: var(--mc-pildora); border: 1px solid #F1D3B4; border-radius: 4px; padding: 2px 8px; font-size: 12.5px; font-weight: 600; }
.confirmar { background: var(--mc-naranja-palido); border: 1px solid #F1D3B4; border-left: 5px solid var(--mc-naranja); border-radius: 6px; padding: 16px 18px; margin-bottom: 16px; }
.confirmar h3 { font-size: 17px; color: var(--mc-pildora); margin-bottom: 8px; }
.confirmar ul { margin-bottom: 12px; }

/* --- La entrada --- */
.entrada { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--mc-noche); }
.entrada .tarjeta { width: 100%; max-width: 400px; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.entrada .cabeza { background: var(--mc-azul); color: #fff; padding: 18px 22px; border-bottom: 3px solid var(--mc-naranja); display: flex; gap: 12px; align-items: center; }
.entrada .cabeza img { width: 40px; height: 40px; background: #fff; border-radius: 8px; padding: 3px; }
.entrada .cabeza small { color: #C9DCEA; }
.entrada .cuerpo-entrada { padding: 20px 22px 22px; }
.qr { display: block; width: 220px; height: 220px; margin: 8px auto; image-rendering: pixelated; }
.clave-manual { font-family: Consolas, monospace; font-size: 13px; word-break: break-all; background: var(--mc-fondo); border: 1px dashed var(--mc-borde); padding: 6px 8px; border-radius: 4px; }

@media (max-width: 860px) {
    .superior { flex-wrap: wrap; gap: 4px 12px; padding: 8px 12px; }
    .superior nav { order: 3; flex-basis: 100%; }
    .sesion-panel { margin-left: auto; }
    .cuerpo { padding: 16px; }
}

/* --- Anchos fijos (sin estilos en línea: la política de seguridad no los deja) --- */
.ancho-640 { max-width: 640px; }
.ancho-760 { max-width: 760px; }
.minimo-320 { min-width: 320px; }
.entrada .tarjeta.ancha { max-width: 440px; }

/* --- Diseño y personalización --- */
.vista-previa { display: block; width: 100%; max-width: 640px; height: auto; border-radius: 8px; box-shadow: 0 6px 20px rgba(15, 44, 66, .12); }
.logo-actual { width: 72px; height: 72px; object-fit: contain; background: #fff; border: 1px solid var(--mc-borde); border-radius: 8px; padding: 4px; }
.muestra-color { width: 18px; height: 18px; vertical-align: middle; }
.origen { font-size: 11.5px; }
.codigo-vinculacion { display: block; overflow-wrap: anywhere; font-size: 18px; padding: 10px 0; }
.texto-conservado { white-space: pre-wrap; overflow-wrap: anywhere; }
.contrato-documento { background: white; max-width: 900px; margin: auto; padding: 32px; border: 1px solid var(--mc-borde); }
.contrato-documento h2 { font-size: 21px; margin-top: 24px; }
.contrato-documento h3 { font-size: 17px; }
.secreto-revelado { font: 18px Consolas, monospace; user-select: all; overflow-wrap: anywhere; }
.escenario-previa { padding: 12px; background: #DAE3EA; overflow-x: auto; }
.pantalla-previa { display: block; width: 100%; height: 720px; border: 0; background: white; }
.pantalla-previa.pantalla-movil { width: 390px; max-width: 100%; margin: auto; border-radius: 12px; }
@media print {
    .superior, .pie, .no-imprimir { display: none !important; }
    .cuerpo { padding: 0; max-width: none; }
    .contrato-documento { border: 0; padding: 0; }
}