/* ─────────────────────────────────────────────
   ChatCenter — Frontend CSS v2.0.0
   Colores: #1A7EC8 (azul) | #7DC242 (verde)
───────────────────────────────────────────── */

:root {
    --cc-azul:      #1A7EC8;
    --cc-azul-dark: #155fa0;
    --cc-verde:     #7DC242;
    --cc-gris:      #f4f6f9;
    --cc-borde:     #dde3ea;
    --cc-texto:     #2c3e50;
    --cc-blanco:    #ffffff;
    --cc-error:     #e74c3c;
}

/* ══════════════════════════════════
   LOGIN
══════════════════════════════════ */
.cc-login-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
    padding: 40px 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.cc-login-box {
    background: var(--cc-blanco);
    border: 1px solid var(--cc-borde);
    border-radius: 16px;
    padding: 40px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 8px 32px rgba(26,126,200,0.10);
    text-align: center;
}

.cc-login-logo {
    height: 64px;
    width: auto;
    margin-bottom: 20px;
    object-fit: contain;
}

.cc-login-box h2 {
    font-size: 22px;
    font-weight: 700;
    color: var(--cc-azul);
    margin: 0 0 4px;
}

.cc-login-sub {
    font-size: 14px;
    color: #888;
    margin: 0 0 24px;
}

.cc-login-error {
    background: #fdecea;
    border: 1px solid var(--cc-error);
    color: var(--cc-error);
    padding: 10px 14px;
    border-radius: 7px;
    font-size: 13px;
    margin-bottom: 16px;
}

.cc-login-box .cc-field {
    text-align: left;
    margin-bottom: 16px;
}

.cc-login-box .cc-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--cc-texto);
    margin-bottom: 5px;
}

.cc-login-box .cc-field input {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--cc-borde);
    border-radius: 7px;
    font-size: 15px;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.cc-login-box .cc-field input:focus {
    border-color: var(--cc-azul);
    outline: none;
    box-shadow: 0 0 0 3px rgba(26,126,200,0.12);
}

.cc-btn-login {
    width: 100%;
    background: var(--cc-azul);
    color: var(--cc-blanco);
    border: none;
    padding: 13px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
    margin-top: 8px;
}

.cc-btn-login:hover { background: var(--cc-azul-dark); }

/* ══════════════════════════════════
   PORTAL DE DEPLOY
══════════════════════════════════ */
.cc-portal-wrap {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    color: var(--cc-texto);
}

.cc-portal-header {
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--cc-azul);
    border-radius: 12px;
    padding: 20px 28px;
    margin-bottom: 28px;
    color: var(--cc-blanco);
}

.cc-portal-logo {
    height: 56px;
    width: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.cc-portal-header h1 {
    font-size: 22px;
    font-weight: 700;
    color: var(--cc-blanco);
    margin: 0 0 4px;
}

.cc-portal-header h1 span { color: var(--cc-verde); }

.cc-portal-header p {
    margin: 0;
    font-size: 13px;
    opacity: 0.85;
}

.cc-btn-logout {
    margin-left: auto;
    background: rgba(255,255,255,0.15);
    color: var(--cc-blanco);
    padding: 8px 16px;
    border-radius: 7px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.2s;
    white-space: nowrap;
}

.cc-btn-logout:hover { background: rgba(255,255,255,0.25); color: var(--cc-blanco); }

/* Resultado del deploy */
.cc-resultado-ok {
    background: #eafaf1;
    border: 1px solid var(--cc-verde);
    border-radius: 10px;
    padding: 24px;
    margin-bottom: 24px;
}

.cc-resultado-ok h3 { color: #1e6e37; margin: 0 0 16px; font-size: 18px; }

.cc-resultado-error {
    background: #fdecea;
    border: 1px solid var(--cc-error);
    border-radius: 10px;
    padding: 24px;
    margin-bottom: 24px;
}

.cc-resultado-error h3 { color: var(--cc-error); margin: 0 0 8px; }

.cc-resultado-tabla { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.cc-resultado-tabla td { padding: 8px 12px; font-size: 14px; border-bottom: 1px solid #c3e6cb; }
.cc-resultado-tabla td:first-child { color: #555; width: 140px; }
.cc-resultado-tabla code { background: #d4edda; padding: 2px 8px; border-radius: 4px; font-size: 13px; }

.cc-btn-preview {
    display: inline-block;
    background: var(--cc-azul);
    color: var(--cc-blanco);
    padding: 10px 20px;
    border-radius: 7px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: background 0.2s;
}

.cc-btn-preview:hover { background: var(--cc-azul-dark); color: var(--cc-blanco); }

.cc-nota { font-size: 13px; color: #555; margin: 12px 0 0; }

/* Formulario de deploy */
.cc-deploy-form-wrap {
    background: var(--cc-blanco);
    border: 1px solid var(--cc-borde);
    border-radius: 12px;
    padding: 28px;
}

.cc-deploy-form-wrap h2 {
    font-size: 18px;
    font-weight: 700;
    color: var(--cc-azul);
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--cc-gris);
}

.cc-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

@media (max-width: 600px) { .cc-form-grid { grid-template-columns: 1fr; } }

.cc-field { display: flex; flex-direction: column; }
.cc-field-toggle { grid-column: 1 / -1; }

.cc-field label {
    font-size: 13px;
    font-weight: 600;
    color: var(--cc-texto);
    margin-bottom: 5px;
}

.cc-field input,
.cc-field select {
    padding: 9px 12px;
    border: 1.5px solid var(--cc-borde);
    border-radius: 7px;
    font-size: 14px;
    color: var(--cc-texto);
    transition: border-color 0.2s;
}

.cc-field input:focus,
.cc-field select:focus {
    border-color: var(--cc-azul);
    outline: none;
    box-shadow: 0 0 0 3px rgba(26,126,200,0.10);
}

.cc-field-toggle label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    cursor: pointer;
}

.cc-field-toggle input[type="checkbox"] {
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
}

.cc-field-desc { font-size: 12px; color: #888; margin: 4px 0 0; }

.cc-alerta {
    background: #fef9e7;
    border: 1px solid #f39c12;
    color: #b7770d;
    padding: 14px 18px;
    border-radius: 8px;
    font-size: 14px;
}

.cc-form-actions { text-align: right; }

.cc-btn-deploy {
    background: var(--cc-verde);
    color: #1a3a00;
    border: none;
    padding: 13px 32px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
}

.cc-btn-deploy:hover { background: #6aaa35; }

/* ══════════════════════════════════
   PREVIEW DEL BOT
══════════════════════════════════ */
.cc-preview-wrap {
    max-width: 700px;
    margin: 40px auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.cc-preview-espera {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 56px 32px;
    background: var(--cc-blanco);
    border: 2px solid var(--cc-azul);
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(26,126,200,0.10);
    text-align: center;
}

.cc-preview-logo {
    height: 64px;
    width: auto;
    object-fit: contain;
}

.cc-preview-espera p {
    font-size: 17px;
    color: #444;
    margin: 0;
    line-height: 1.6;
}

.cc-preview-espera strong { color: var(--cc-azul); }

.cc-preview-error {
    background: #fdecea;
    border: 1px solid var(--cc-error);
    color: var(--cc-error);
    padding: 16px 20px;
    border-radius: 10px;
    font-size: 14px;
    text-align: center;
    max-width: 600px;
    margin: 40px auto;
}

.cc-bot-container {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(26,126,200,0.12);
    min-height: 520px;
    background: var(--cc-gris);
}

/* Spinner */
.cc-spinner {
    width: 52px;
    height: 52px;
    border: 5px solid var(--cc-gris);
    border-top-color: var(--cc-azul);
    border-radius: 50%;
    animation: cc-spin 0.9s linear infinite;
}

@keyframes cc-spin { to { transform: rotate(360deg); } }