/* ===================================================
   FRANGO - LIGHT THEME (EXACT PALETTE & HOME FIXED)
   =================================================== */

:root {
    --frango-bg: #ffffff;
    --frango-bg-alt: #f8fafc;
    --frango-orange: #FF8400;
    --frango-orange-hover: #e07400;
    --frango-teal: #007E83;
    --frango-teal-hover: #006367;
    --frango-dark-teal: #00313E;
    --frango-navy: #1E293B;
    --frango-slate: #334155;
    --frango-border: #e2e8f0;
}

/* Reemplazar logo por CSS */
.navbar-brand img, 
.logo img {
    content: url('/whmcs/assets/img/Logo%20Frango%202026.png') !important;
    max-height: 50px;
    width: auto;
}

/* Fondo principal y textos */
body {
    background-color: var(--frango-bg-alt) !important;
    color: var(--frango-slate) !important;
    font-family: 'Open Sans', system-ui, -apple-system, sans-serif;
}

/* Navbar / Cabecera */
.app-nav, 
.header-lined, 
header, 
nav.navbar {
    background-color: var(--frango-bg) !important;
    border-bottom: 2px solid var(--frango-border) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.navbar-light .navbar-nav .nav-link {
    color: var(--frango-navy) !important;
    font-weight: 600;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .active > .nav-link {
    color: var(--frango-teal) !important;
}

/* Tarjetas Generales y Contenedores */
.card, .panel {
    background-color: var(--frango-bg) !important;
    border: 1px solid var(--frango-border) !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02) !important;
}

.card-header, .panel-heading {
    background-color: var(--frango-bg) !important;
    border-bottom: 1px solid var(--frango-border) !important;
    color: var(--frango-dark-teal) !important;
    font-weight: 700;
}

/* Botones Principales (Naranja de Acción) */
.btn-primary, .btn-checkout, .btn-order-now {
    background-color: var(--frango-orange) !important;
    border-color: var(--frango-orange) !important;
    color: #ffffff !important;
    font-weight: 700;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.btn-primary:hover, .btn-checkout:hover, .btn-order-now:hover {
    background-color: var(--frango-orange-hover) !important;
    border-color: var(--frango-orange-hover) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(255, 132, 0, 0.3);
}

/* Botones Secundarios / Detalles (Teal) */
.btn-info, .btn-secondary {
    background-color: var(--frango-teal) !important;
    border-color: var(--frango-teal) !important;
    color: #ffffff !important;
    font-weight: 600;
    border-radius: 6px;
}

.btn-info:hover, .btn-secondary:hover {
    background-color: var(--frango-teal-hover) !important;
    border-color: var(--frango-teal-hover) !important;
    color: #ffffff !important;
}

/* Formulario e Inputs */
.form-control {
    background-color: #ffffff !important;
    border: 1px solid var(--frango-border) !important;
    color: var(--frango-navy) !important;
    border-radius: 6px;
}

.form-control:focus {
    border-color: var(--frango-teal) !important;
    box-shadow: 0 0 0 3px rgba(0, 126, 131, 0.15) !important;
}

/* Títulos y Enlaces Generales */
h1, h2, h3, h4, h5, h6 {
    color: var(--frango-dark-teal) !important;
    font-weight: 700;
}

a {
    color: var(--frango-teal);
}

a:hover {
    color: var(--frango-teal-hover);
}

/* Footer en tono azul marino oscuro */
footer, 
#footer, 
.footer,
footer.footer-app {
    background-color: #00313E !important;
    color: #e2e8f0 !important;
    border-top: 3px solid #007E83 !important;
}

footer a, 
#footer a, 
.footer a {
    color: #ffffff !important;
}

footer a:hover, 
#footer a:hover, 
.footer a:hover {
    color: #FF8400 !important;
}

footer .social-icons a,
.footer .btn-social,
footer .fab, 
footer .fas {
    color: #ffffff !important;
    background-color: #1E293B !important;
    border-color: #334155 !important;
}

footer .social-icons a:hover,
footer .fab:hover, 
footer .fas:hover {
    background-color: #FF8400 !important;
    color: #ffffff !important;
}

/* ===================================================
   CORRECCIONES ESPECÍFICAS PARA PORTADA TWENTY-ONE
   =================================================== */

/* Títulos principales del Home */
.home-shortcuts h2, 
.home-shortcuts h3, 
section h2, 
h2.text-center,
.main-content h2 {
    color: #00313E !important;
    font-weight: 800 !important;
}

/* 1. Tarjetas de Productos Superiores (Hosting, Soporte, Diseño Web) */
.card-body,
.home-shortcuts .card,
div[class*="col-"] > .card {
    border: 1px solid #e2e8f0 !important;
    border-top: 4px solid #007E83 !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    transition: all 0.3s ease !important;
}

.card-body:hover,
.home-shortcuts .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0, 126, 131, 0.12) !important;
}

/* Botón "Ver productos" en las tarjetas superiores */
.card-body .btn,
.card-body a.btn,
.home-shortcuts .btn-outline-primary,
.card-body .btn-action,
a.btn-action {
    background-color: #FF8400 !important;
    border-color: #FF8400 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    padding: 8px 18px !important;
    transition: all 0.2s ease !important;
}

.card-body .btn:hover,
.card-body a.btn:hover,
.home-shortcuts .btn-outline-primary:hover,
a.btn-action:hover {
    background-color: #e07400 !important;
    border-color: #e07400 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(255, 132, 0, 0.3) !important;
}

/* 2. Bloques de Accesos Rápidos ("¿Cómo podemos ayudarle hoy?" y "Su cuenta") */
a.card,
.card-accent-teal,
.card-accent-orange,
.card-accent-red,
.card-accent-green,
.card-accent-blue,
.card-accent-gold {
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
    border-top: 3px solid #007E83 !important; /* Reemplaza las líneas roja, verde, etc. */
    background-color: #ffffff !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.25s ease !important;
}

a.card:hover {
    border-top-color: #FF8400 !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.08) !important;
}

/* Iconos dentro de los bloques de acceso rápido */
a.card i,
a.card svg,
.card i,
.card svg,
.icon-shape {
    color: #007E83 !important;
    fill: #007E83 !important;
    font-size: 2.2rem !important;
    transition: all 0.2s ease !important;
}

a.card:hover i,
a.card:hover svg {
    color: #FF8400 !important;
    fill: #FF8400 !important;
}

/* Textos dentro de los accesos rápidos */
a.card .title,
a.card span,
a.card p,
a.card div {
    color: #1E293B !important;
    font-weight: 600 !important;
}