/* RN Costa Rica App Styles */
:root {
    /* Paleta "Moderna y Limpia" (Claridad)
       Primario: Rojo Vibrante #D32F2F
       Secundario: Azul Grisáceo #455A64
       Fondo: Blanco Nieve #FFFFFF
       Acento: Gris Claro #ECEFF1 */
    --bg-color: #FFFFFF;
    --primary-color: #D32F2F;
    --secondary-color: #455A64;
    --accent-surface: #ECEFF1;
    --accent-color: #D32F2F; /* compat: usado en estilos inline */
    --text-color: #1f2933;
    --muted-text: #60717b;
    --card-bg: #FFFFFF;
    --input-bg: #FFFFFF;
    --border-radius: 12px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

html, body {
    margin: 0;
    padding: 0;
    background-color: var(--bg-color);
    color: var(--text-color);
    min-height: 100%;
}

a {
    color: var(--secondary-color);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Ensure header navigation links remain white on the red background */
header nav a {
    color: #ffffff;
    font-weight: 500;
}
header nav a:hover {
    text-decoration: underline;
}

header {
    background-color: var(--primary-color);
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #ffffff;
}

/* Ensure navigation links in the header remain readable on the red
   background.  Override the global link colour so that all nav links
   appear white by default and underline on hover. */
header nav a {
    color: #ffffff;
}
header nav a:hover {
    text-decoration: underline;
}

header img.logo {
    height: 40px;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 15px;
    margin: 0;
    padding: 0;
}

nav li {
    display: inline;
}

.container {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

@media (max-width: 600px) {
    .container { padding: 14px; }
}

/* Card styling */
.card {
    background-color: var(--card-bg);
    border-radius: var(--border-radius);
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

form input,
form select,
form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: var(--border-radius);
    border: 1px solid #cccccc; /* subtle border colour */
    background-color: var(--input-bg);
    color: var(--text-color);
    box-sizing: border-box;
}

form button {
    background-color: var(--secondary-color);
    color: #ffffff;
    border: none;
    padding: 11px 18px;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-weight: 700;
    box-shadow: 0 2px 10px rgba(0,0,0,0.12);
}

form button:hover {
    background-color: #2f3f46;
}

/* Global button helpers (for links styled as buttons) */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.12);
}
.btn-primary { background: var(--primary-color); color: #fff; }
.btn-primary:hover { filter: brightness(0.95); }
.btn-secondary { background: var(--secondary-color); color: #fff; }
.btn-secondary:hover { filter: brightness(0.95); }
.btn-surface { background: var(--accent-surface); color: var(--secondary-color); }
.btn-surface:hover { filter: brightness(0.98); }

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.stats-grid .stat {
    background-color: var(--card-bg);
    padding: 15px;
    border-radius: var(--border-radius);
    text-align: center;
}

.icon-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* Remove the card background for a cleaner circular icon look */
    background-color: transparent;
    padding: 10px;
    border-radius: var(--border-radius);
    margin: 10px;
    width: 110px;
    cursor: pointer;
    transition: transform 0.2s ease;
    color: #ffffff;
}

.icon-button:hover {
    transform: translateY(-2px);
}

/* Icon within dashboard buttons */


/* Text below icons should be white to contrast the red circles */
.icon-button span {
    color: #ffffff !important;
    font-weight: 500;
}

/* Dashboard menu (dropdown) styling */
details.menu {
    border-radius: 14px;
    background: var(--accent-surface);
    padding: 10px 12px;
}
details.menu summary {
    cursor: pointer;
    font-weight: 800;
    color: #ffffff;
    background: var(--secondary-color);
    padding: 10px 12px;
    border-radius: 12px;
    user-select: none;
}
details.menu summary::-webkit-details-marker { display:none; }
details.menu .menu-grid {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:18px;
    margin-top:12px;
}

footer {
    background-color: var(--primary-color);
    padding: 10px;
    text-align: center;
    font-size: 0.9em;
    color: #ffffff;
}

.footer-brand {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin-top:8px;
    color:#ffffff;
}
.footer-brand .brand-circle {
    width:34px;
    height:34px;
    border-radius:50%;
    background:#ffffff;
    display:flex;
    align-items:center;
    justify-content:center;
}
.footer-brand .brand-circle img {
    width:24px;
    height:24px;
    object-fit:contain;
}

/* User profile avatar displayed in header */
/* Profile avatars appear in the header and forum.  Previously these
   avatars were quite large relative to the navigation bar.  Reduce
   their footprint so the header looks more balanced on both desktop
   and mobile. */
.profile-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--accent-surface);
}

/* Verse text inside icon buttons */
.icon-button .verse {
    font-size: 0.75em;
    margin-top: 4px;
    color: var(--text-color);
    text-align: center;
}

/* Responsive */
@media (max-width: 600px) {
    nav ul {
        flex-direction: column;
        align-items: flex-start;
    }
    .icon-button {
        width: 100%;
    }
}

/* Horizontal scrolling for wide CRM tables and content */
.table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.table-scroll table { min-width: 720px; }

.scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}



.circle-icon img {
    width: 45px;
    height: 45px;
    filter: none;
}


/* FINAL ICON FIX - White background + Red silhouette */
.circle-icon {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 4px solid #D32F2F;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    box-shadow: 0 6px 15px rgba(0,0,0,0.1);
}

.circle-icon img {
    width: 48px;
    height: 48px;
    /* Convert white PNG to red silhouette */
    filter: invert(16%) sepia(96%) saturate(6370%) hue-rotate(353deg) brightness(92%) contrast(101%);
}

.circle-icon {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 4px solid #D32F2F;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.circle-icon svg {
    width: 48px;
    height: 48px;
    stroke: #D32F2F;
}

/* Icon buttons: white circle with red outline and red SVG icon */
.icon-button img {
  width: 52px;
  height: 52px;
  margin-bottom: 10px;
  background: #FFFFFF;
  border: 4px solid var(--primary-color);
  border-radius: 50%;
  padding: 14px;
  object-fit: contain;
}