/* ================================================
   Catinfog Control Plane — minimal overrides Bootstrap 5
   Estilo simple, vertical, fiel a regusremero/register.php
   ================================================ */

body {
    background: #f8f9fa;
    min-height: 100vh;
}

/* Logo central arriba (sustituye a la imagen del legacy) */
.cp-logo {
    display: inline-block;
    text-decoration: none;
    font-weight: 800;
    font-size: 36px;
    letter-spacing: -0.02em;
}
.cp-logo:hover { text-decoration: none; }
.cp-logo__cat { color: #1c232a; }
.cp-logo__fog { color: #f4364c; }
.cp-logo__text { color: var(--cp-brand-color, #e33246); font-weight: 700; }
.cp-logo__img { max-height: 40px; width: auto; }
.cp-logo__sub {
    color: #6c757d;
    font-size: 13px;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Card con shadow más suave (entre Bootstrap shadow y shadow-lg) */
.card.shadow-lg {
    border: 0;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.08) !important;
}

/* Boton primario: usa color marca configurado por compañia */
.btn-primary {
    --bs-btn-bg:                  var(--cp-brand-color, #e33246);
    --bs-btn-border-color:        var(--cp-brand-color, #e33246);
    --bs-btn-hover-bg:            color-mix(in srgb, var(--cp-brand-color, #e33246) 85%, black);
    --bs-btn-hover-border-color:  color-mix(in srgb, var(--cp-brand-color, #e33246) 85%, black);
    --bs-btn-active-bg:           color-mix(in srgb, var(--cp-brand-color, #e33246) 70%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--cp-brand-color, #e33246) 70%, black);
    --bs-btn-focus-shadow-rgb:    244, 54, 76;
    --bs-btn-disabled-bg:           var(--cp-brand-color, #e33246);
    --bs-btn-disabled-border-color: var(--cp-brand-color, #e33246);
    font-weight: 600;
}

/* Links de la app: hover coral */
a { color: #1c232a; }
a:hover { color: var(--cp-brand-color, #e33246); }
.text-muted a { color: inherit; }
.text-muted a:hover { color: var(--cp-brand-color, #e33246); }

/* Selector de idioma compacto */
.cp-lang-select {
    width: auto;
    display: inline-block;
}

/* Iconos circulares para confirm / expired / etc. */
.cp-icon {
    width: 72px; height: 72px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 32px;
    font-weight: bold;
}
.cp-icon--success { background: #d1e7dd; color: #0a3622; }
.cp-icon--warn    { background: #fff3cd; color: #664d03; }
.cp-icon--info    { background: #cfe2ff; color: #052c65; }

/* Pantalla de progreso de provisioning (rediseño 2026-05-18):
   barra de % + bloques éxito/fallo. Sustituye la antigua lista
   .cp-steps (jerga técnica) que el template ya no renderiza. */
.cp-progress-track {
    background: #e9ecef;
    border-radius: 999px;
    height: 14px;
    overflow: hidden;
    margin-top: 24px;
}
.cp-progress-bar {
    background: linear-gradient(
        90deg,
        var(--cp-brand-color, #e33246),
        color-mix(in srgb, var(--cp-brand-color, #e33246) 80%, black)
    );
    height: 100%;
    width: 5%;
    border-radius: 999px;
    transition: width 600ms ease;
}
#cp-msg { font-weight: 600; }

.cp-progress-pct {
    color: #6c757d;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin-top: 6px;
}

/* Checklist de pasos (opción C): barra arriba + pasos que se completan.
   Reaprovecha los estados reales (dns/db/app/post) del backend; provisioning.js
   marca .is-active / .is-done según el status del tenant. */
.cp-steps { margin-top: 18px; }
.cp-step {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 9px 2px;
    opacity: .4;
    transition: opacity .35s ease;
}
.cp-step__ic {
    width: 24px; height: 24px; flex: 0 0 24px;
    border-radius: 50%;
    border: 2px solid #e9ecef;
    background: #fff;
    display: grid; place-items: center;
    transition: border-color .35s ease, background-color .35s ease;
}
.cp-step__tx {
    font-size: 14px; font-weight: 600;
    color: #6c757d;
    transition: color .3s ease;
}
.cp-step.is-active { opacity: 1; }
.cp-step.is-active .cp-step__ic { border-color: var(--cp-brand-color, #111); }
.cp-step.is-active .cp-step__tx { color: #111; }
.cp-step.is-active .cp-step__spin {
    width: 12px; height: 12px;
    border: 2px solid var(--cp-brand-color, #111);
    border-top-color: transparent;
    border-radius: 50%;
    animation: cp-spin .7s linear infinite;
}
.cp-step.is-done { opacity: 1; }
.cp-step.is-done .cp-step__ic { border-color: #198754; background: #198754; }
.cp-step.is-done .cp-step__tx { color: #111; }
.cp-step__tick {
    width: 13px; height: 13px; display: block;
}
.cp-step__tick path {
    stroke: #fff; stroke-width: 3.4; fill: none;
    stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 20; stroke-dashoffset: 20;
    animation: cp-tick-draw .35s ease forwards;
}
@keyframes cp-spin { to { transform: rotate(360deg); } }
@keyframes cp-tick-draw { to { stroke-dashoffset: 0; } }

.cp-success-hint { color: #4a4f57; font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
    .cp-step__spin { animation: none; }
    .cp-step__tick path { animation: none; stroke-dashoffset: 0; }
}

/* Niveles de timeout: provisioning.js setea data-level={warning,error}
   en #cp-progress cuando el server detecta lifecycle_state_changed_at viejo. */
#cp-progress[data-level="warning"] #cp-msg { color: #b48000; }
#cp-progress[data-level="error"]   #cp-msg { color: #b00020; }

/* Check de éxito: se "dibuja" con trazo SVG, UNA sola vez al aparecer
   (sin iteración infinita). El círculo primero, luego el tick. */
.cp-check { display: inline-block; }
.cp-check__circle {
    stroke: #198754;
    stroke-width: 3;
    stroke-dasharray: 151;   /* ~2*pi*24 (perímetro r=24) */
    stroke-dashoffset: 151;
    animation: cp-check-circle 500ms ease-out forwards;
}
.cp-check__tick {
    stroke: #198754;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    animation: cp-check-tick 350ms ease-out 450ms forwards;
}
@keyframes cp-check-circle { to { stroke-dashoffset: 0; } }
@keyframes cp-check-tick   { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
    .cp-check__circle, .cp-check__tick {
        animation: none;
        stroke-dashoffset: 0;
    }
}

/* Strength meter de password (lo inyectan register.js / reset.js bajo el campo) */
.cp-strength__bar {
    height: 4px;
    background: #e9ecef;
    border-radius: 2px;
    overflow: hidden;
}
.cp-strength__fill {
    height: 100%;
    width: 0;
    border-radius: 2px;
    transition: width 200ms ease, background 200ms ease;
    background: #dc3545;
}
.cp-strength__fill[data-strength="1"] { width: 25%; background: #dc3545; }
.cp-strength__fill[data-strength="2"] { width: 50%; background: #fd7e14; }
.cp-strength__fill[data-strength="3"] { width: 75%; background: #ffc107; }
.cp-strength__fill[data-strength="4"] { width: 100%; background: #198754; }
.cp-strength__label { display: block; margin-top: 2px; font-size: 12px; }

/* Spinner del botón submit cuando aria-busy */
.btn[aria-busy="true"] { cursor: progress; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.001ms !important;
        animation-duration: 0.001ms !important;
    }
}

/* --- Multiempresa F: branding por compañia --- */
a:not(.btn) { color: var(--cp-brand-color, #e33246); }
:focus-visible { outline-color: var(--cp-brand-color, #e33246); }
.spinner-border { color: var(--cp-brand-color, #e33246); }