/* Identidad de hammer.ar: naranja #FC4B08 sobre negro, display condensada, texto en Inter.
   Big Noodle Titling (la del sitio) no está en Google Fonts; Barlow Condensed da la misma
   silueta angosta y alta con más aire para leer. Ver HammerX/_comun/brand.md. */

:root {
    --naranja:      #FC4B08;
    --naranja-flojo:#FB923C;
    --fondo:        #09090B;
    --panel:        #17171A;
    --panel-alto:   #1F1F22;
    --borde:        #2A2A2E;
    --texto:        #F4F4F5;
    --tenue:        #A1A1AA;
    --ok:           #4ADE80;
    --alerta:       #FACC15;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
}

body {
    background: var(--fondo);
    color: var(--texto);
    font: 16px/1.55 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    -webkit-text-size-adjust: 100%;
}

h1, h2, h3, .display {
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    text-transform: uppercase;
    letter-spacing: .02em;
    font-weight: 700;
    margin: 0;
}

a { color: var(--naranja-flojo); }

/* ── Estructura ──────────────────────────────────────────────────────────────────── */

.app {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    max-width: 780px;
    margin: 0 auto;
}

.barra {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--borde);
    position: sticky;
    top: 0;
    background: var(--fondo);
    z-index: 5;
}

.barra h1 { font-size: 1.35rem; line-height: 1; }
.barra .marca { color: var(--naranja); }
.barra .quien { margin-left: auto; color: var(--tenue); font-size: .82rem; text-align: right; }
.barra .quien a { color: var(--tenue); }

.hoja { padding: 1rem; }

.charla {
    flex: 1;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── Novedades ───────────────────────────────────────────────────────────────────── */

.novedades { border-bottom: 1px solid var(--borde); padding: .6rem 1rem 1rem; }

.novedades > summary {
    cursor: pointer;
    font-family: "Barlow Condensed", sans-serif;
    text-transform: uppercase;
    font-size: 1.05rem;
    color: var(--naranja);
    letter-spacing: .03em;
}

.novedad {
    background: var(--panel);
    border-left: 3px solid var(--naranja);
    border-radius: 0 8px 8px 0;
    padding: .7rem .9rem;
    margin-top: .7rem;
}

.novedad h3 { font-size: 1.05rem; }
.novedad p  { margin: .35rem 0 0; font-size: .92rem; color: #D4D4D8; white-space: pre-line; }
.novedad .meta { color: var(--tenue); font-size: .75rem; margin-top: .4rem; }

/* ── Mensajes ────────────────────────────────────────────────────────────────────── */

.msj { max-width: 92%; }
.msj--yo {
    align-self: flex-end;
    background: var(--naranja);
    color: #fff;
    padding: .6rem .85rem;
    border-radius: 14px 14px 3px 14px;
}
.msj--ia {
    align-self: flex-start;
    background: var(--panel);
    border: 1px solid var(--borde);
    padding: .8rem .95rem;
    border-radius: 14px 14px 14px 3px;
}
.msj--ia p { margin: 0 0 .6rem; }
.msj--ia p:last-child { margin-bottom: 0; }
.msj--ia ol, .msj--ia ul { margin: .4rem 0; padding-left: 1.2rem; }
.msj--ia li { margin-bottom: .3rem; }
.msj--ia strong { color: #fff; }
.msj--sin { border-left: 3px solid var(--alerta); }

.fuentes {
    margin-top: .8rem;
    padding-top: .6rem;
    border-top: 1px solid var(--borde);
    font-size: .82rem;
}
.fuentes .rotulo { color: var(--tenue); text-transform: uppercase; font-size: .7rem; letter-spacing: .08em; }
.fuentes a, .fuentes span.doc { display: block; margin-top: .3rem; }
.fuentes .fecha { color: var(--tenue); font-size: .75rem; }

.votos { margin-top: .7rem; display: flex; gap: .4rem; align-items: center; }
.votos button {
    background: transparent;
    border: 1px solid var(--borde);
    color: var(--tenue);
    border-radius: 8px;
    padding: .2rem .55rem;
    font-size: .95rem;
    cursor: pointer;
}
.votos button:hover { border-color: var(--naranja); color: var(--texto); }
.votos .gracias { color: var(--ok); font-size: .8rem; }

.pensando { align-self: flex-start; color: var(--tenue); font-size: .9rem; display: flex; gap: .5rem; align-items: center; }
.pensando .punto {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--naranja);
    animation: latir 1s infinite ease-in-out;
}
@keyframes latir { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

.sugerencias { display: flex; flex-wrap: wrap; gap: .5rem; }
.sugerencias button {
    background: var(--panel);
    border: 1px solid var(--borde);
    color: var(--texto);
    border-radius: 999px;
    padding: .45rem .8rem;
    font-size: .85rem;
    cursor: pointer;
}
.sugerencias button:hover { border-color: var(--naranja); }

.bienvenida { color: var(--tenue); font-size: .95rem; }
.bienvenida strong { color: var(--texto); }

/* ── Preguntar ───────────────────────────────────────────────────────────────────── */

.preguntar {
    position: sticky;
    bottom: 0;
    background: var(--fondo);
    border-top: 1px solid var(--borde);
    padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
    display: flex;
    gap: .6rem;
}

.preguntar textarea {
    flex: 1;
    resize: none;
    background: var(--panel);
    border: 1px solid var(--borde);
    color: var(--texto);
    border-radius: 12px;
    padding: .7rem .8rem;
    font: inherit;
    font-size: 16px; /* menos de 16 hace que iOS haga zoom al enfocar */
    max-height: 40vh;
}
.preguntar textarea:focus { outline: none; border-color: var(--naranja); }

.boton, .preguntar button {
    background: var(--naranja);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: .7rem 1.1rem;
    font-family: "Barlow Condensed", sans-serif;
    text-transform: uppercase;
    font-size: 1.05rem;
    letter-spacing: .04em;
    cursor: pointer;
}
.boton:disabled, .preguntar button:disabled { opacity: .45; cursor: default; }
.boton--flojo { background: var(--panel-alto); color: var(--texto); border: 1px solid var(--borde); }

/* ── Formularios y panel ─────────────────────────────────────────────────────────── */

label { display: block; margin-bottom: .9rem; font-size: .88rem; color: var(--tenue); }
input[type=text], input[type=password], input[type=date], select, textarea.campo {
    width: 100%;
    margin-top: .25rem;
    background: var(--panel);
    border: 1px solid var(--borde);
    color: var(--texto);
    border-radius: 10px;
    padding: .6rem .7rem;
    font: inherit;
    font-size: 16px;
}

.tarjeta {
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1rem;
}
.tarjeta h2 { font-size: 1.15rem; color: var(--naranja); margin-bottom: .6rem; }

.datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .8rem; }
.dato .n { font-family: "Barlow Condensed", sans-serif; font-size: 1.8rem; line-height: 1; }
.dato .r { color: var(--tenue); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }

table { width: 100%; border-collapse: collapse; font-size: .88rem; }
th, td { text-align: left; padding: .5rem .4rem; border-bottom: 1px solid var(--borde); vertical-align: top; }
th { color: var(--tenue); font-weight: 500; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; }
.tabla-scroll { overflow-x: auto; }

.aviso { margin: 0; padding: .7rem 1rem; font-size: .9rem; }
.aviso--ok    { background: #14532D; color: #DCFCE7; }
.aviso--error { background: #7F1D1D; color: #FEE2E2; }

.nav { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.nav a {
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: 999px;
    padding: .35rem .8rem;
    font-size: .85rem;
    text-decoration: none;
    color: var(--texto);
}
.nav a.activo { border-color: var(--naranja); color: var(--naranja); }

.tenue { color: var(--tenue); }
.chico { font-size: .82rem; }
.alerta { color: var(--alerta); }
.ok { color: var(--ok); }