/* ============================================
   ATLAS DE PLANTAS - Sistema de diseño compartido
   Tokens, tipografía y componentes reutilizables
   entre las superficies del proyecto (por ahora: sitio público)
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,400;0,500;1,400;1,500&family=Inter:wght@400;500;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    --papel:        #EFE7D3;
    --papel-claro:  #FDFAF3;
    --papel-oscuro: #E3D9BE;
    --tinta:        #2A2621;
    --tinta-suave:  #443F36;
    --musgo:        #445D3C;
    --musgo-suave:  #DDE3D0;
    --terracota:    #9C4A2E;
    --oro:          #B8934A;
}

/* ---- Botones ---- */
.btn {
    display: inline-block;
    padding: 0.8rem 2rem;
    border-radius: 3px;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    transition: transform 0.15s, box-shadow 0.15s;
    cursor: pointer;
    border: none;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.btn-primario {
    background-color: var(--musgo);
    color: var(--papel-claro);
}

.btn-secundario {
    background-color: transparent;
    color: var(--papel-claro);
    border: 2px solid var(--papel-claro);
    margin-left: 1rem;
}

.btn-secundario-claro {
    background-color: transparent;
    color: var(--tinta);
    border: 2px solid var(--tinta);
}

.btn-acento {
    background-color: var(--terracota);
    color: var(--papel-claro);
}

.btn-peligro {
    background-color: transparent;
    color: var(--terracota);
    border: 2px solid var(--terracota);
}

/* ---- Badges de estado de planta ---- */
.badge-estado {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.68rem;
    padding: 3px 9px;
    border-radius: 2px;
    letter-spacing: 0.03em;
    display: inline-block;
}

.badge-en_carga   { background: var(--papel-oscuro); color: var(--tinta-suave); }
.badge-verificado { background: var(--oro); color: var(--tinta); }
.badge-publicado  { background: var(--musgo); color: var(--papel-claro); }

/* ---- Cards de listado de plantas ---- */
.grid-plantas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.5rem;
}

.tarjeta-planta {
    background: var(--papel-claro);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(42,38,33,0.08);
    transition: transform 0.2s, box-shadow 0.2s;
    text-decoration: none;
    color: var(--tinta);
    display: block;
}

.tarjeta-planta:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(42,38,33,0.14);
}

.tarjeta-imagen {
    width: 100%;
    height: 180px;
    object-fit: cover;
    background-color: var(--musgo-suave);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    overflow: hidden;
}

.tarjeta-imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tarjeta-cuerpo {
    padding: 1.2rem;
}

.tarjeta-nombre-comun {
    font-family: 'Newsreader', serif;
    font-style: italic;
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--tinta);
    margin-bottom: 0.2rem;
}

.tarjeta-nombre-cientifico {
    font-style: italic;
    color: var(--tinta-suave);
    font-size: 0.85rem;
    margin-bottom: 0.8rem;
}

.tarjeta-familia {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    background: var(--musgo-suave);
    color: var(--musgo);
    padding: 0.2rem 0.7rem;
    border-radius: 2px;
    display: inline-block;
    letter-spacing: 0.02em;
}