/* Plataforma CREA Samu'u — estilos comunes del portal
   Colores de la bandera CREA: verde, negro y amarillo, sobre fondo crema tipo papel.
   Cabecera con paisaje chaqueño en tonos suaves.
   Tipografías: Fraunces (títulos, serif cálida), Saira Condensed (marca y rótulos,
   condensada como el logo CREA) y Figtree (texto). */
:root {
  --verde:#1fa64a;        /* verde bandera (fondos) */
  --verde-texto:#13773a;  /* verde legible sobre blanco */
  --verde-oscuro:#0f5c2c;
  --verde-fondo:#e4f3e8; --verde-suave:#a8d9b6;
  --negro:#151513; --negro-suave:#2a2925;
  --amarillo:#ffe100; --amarillo-fondo:#fff7c2; --amarillo-texto:#6e5c00;
  --crema:#f6f1e5; --crema-oscuro:#e6dfcd; --papel:#f1ebdc;
  --texto:#1f1d18; --texto-suave:#5f594c; --gris-suave:#d4ccb9;
  --rojo:#b3261e; --rojo-fondo:#fbeceb;
  --f-titulo:'Fraunces',Georgia,serif;
  --f-marca:'Saira Condensed','Arial Narrow',sans-serif;
  --f-texto:'Figtree',system-ui,sans-serif;
  /* nombres viejos, por si algún archivo los usa */
  --verde-medio:var(--verde-texto); --verde-claro:var(--verde); --tierra:var(--amarillo-texto);
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; min-height:100vh; display:flex; flex-direction:column;
  font-family:var(--f-texto); color:var(--texto); line-height:1.55;
  background-color:var(--papel);
  /* grano de papel muy suave */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 0% 0%,rgba(31,166,74,.07) 0%,transparent 50%),
    radial-gradient(ellipse at 100% 100%,rgba(255,225,0,.08) 0%,transparent 50%);
}
a { color:var(--verde-texto); }

/* Cabecera: atardecer en el Chaco Central, en tonos suaves. Lomadas, montes
   (quebracho blanco y colorado, palo santo, coronillo) y vacas pastando.
   El primer plano se funde con la barra negra. */
.cabecera {
  position:relative; height:176px; overflow:hidden;
  background:linear-gradient(180deg,#33403b 0%,#55604a 32%,#8a7f5e 58%,#bb9572 78%,#d9b48a 100%);
}
.cielo-sol { position:absolute; right:22%; bottom:18px; width:300px; height:150px; pointer-events:none;
  background:radial-gradient(ellipse at 50% 100%,rgba(246,214,160,.55) 0%,rgba(240,196,140,.22) 35%,transparent 70%); }
.paisaje { position:absolute; left:0; bottom:0; width:100%; height:auto; min-height:110px; max-height:150px; display:block; }
.paisaje .lejos { fill:#7b7d60; }
.paisaje .vaca { fill:#55573f; color:#55573f; }
.paisaje .medio { fill:#475035; }
.paisaje .arbol-medio { fill:#323a28; color:#323a28; }
.paisaje .cerca, .paisaje .arbol { fill:var(--negro); color:var(--negro); }
.paisaje .tr { fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; }
.paisaje .pa { fill:none; stroke:currentColor; stroke-width:1.3; stroke-linecap:round; }
.cabecera.compacta { height:100px; }
.compacta .paisaje { min-height:0; height:60px; }
.compacta .cielo-sol { display:none; }
.cabecera-capa { position:relative; z-index:1; max-width:1040px; height:100%; margin:0 auto; padding:0 16px 38px; display:flex; align-items:center; }
.compacta .cabecera-capa { padding-bottom:22px; }
.marca { text-decoration:none; display:flex; flex-direction:column; align-items:flex-start; }
.marca-sup { font-family:var(--f-marca); font-weight:600; font-size:.82rem; letter-spacing:5px; text-transform:uppercase; color:#c6caa9; }
.marca-nombre { font-family:var(--f-titulo); font-optical-sizing:auto; font-weight:600; font-size:2.7rem; letter-spacing:-.5px; line-height:1.05; color:#f4eddc; margin:2px 0 4px; text-shadow:0 2px 12px rgba(20,22,15,.35); }
.compacta .marca-nombre { font-size:1.7rem; margin:0; }
.marca-sub { font-family:var(--f-titulo); font-style:italic; font-size:1.02rem; color:#e0d5b8; }

/* Barra del usuario: negra, como el centro de la bandera */
.barra { background:var(--negro); border-bottom:3px solid var(--amarillo); color:#f3efe4; }
.barra-in { max-width:1040px; margin:0 auto; padding:10px 16px; display:flex; flex-wrap:wrap; gap:6px 18px; align-items:center; justify-content:space-between; }
.quien { display:flex; flex-direction:column; font-size:.95rem; line-height:1.3; }
.quien strong { font-weight:600; }
.rol { font-family:var(--f-marca); font-size:.82rem; color:var(--amarillo); font-weight:600; letter-spacing:1.5px; text-transform:uppercase; }
.barra-links { display:flex; flex-wrap:wrap; gap:4px 22px; font-family:var(--f-marca); font-size:1rem; letter-spacing:1px; text-transform:uppercase; }
.barra-links a { text-decoration:none; font-weight:600; color:#f3efe4; border-bottom:2px solid transparent; padding:2px 0; }
.barra-links a:hover { color:var(--amarillo); border-bottom-color:var(--amarillo); }

.contenido { flex:1; width:100%; max-width:1040px; margin:0 auto; padding:34px 16px 52px; }
.pie { text-align:center; font-family:var(--f-marca); font-size:.82rem; letter-spacing:2px; text-transform:uppercase; color:var(--texto-suave); padding:20px; }

h1, h2, h3 { font-family:var(--f-titulo); font-optical-sizing:auto; color:var(--negro); margin:0 0 .6em; line-height:1.15; font-weight:600; }
h1 { font-size:2.1rem; letter-spacing:-.5px; }
h1::after { content:''; display:block; width:56px; height:5px; border-radius:3px; margin-top:12px; background:linear-gradient(90deg,var(--amarillo) 0 60%,var(--verde) 60% 100%); }
h2 { font-size:1.4rem; } h3 { font-size:1.15rem; }
.intro { color:var(--texto-suave); font-size:1.05rem; margin:0 0 26px; }

/* Tarjetas */
.tarjeta { background:#fffdf8; border:1px solid var(--crema-oscuro); border-radius:14px; box-shadow:0 4px 20px rgba(40,35,20,.07); padding:26px; }
.tarjeta + .tarjeta { margin-top:20px; }
.angosta { max-width:440px; margin:0 auto; }

/* Grilla de herramientas */
.herramientas { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:18px; }
.herr {
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:10px; text-decoration:none; color:var(--texto);
  background:#fffdf8; border:1px solid var(--crema-oscuro); border-radius:14px; padding:22px 22px 20px;
  box-shadow:0 2px 10px rgba(40,35,20,.06); transition:transform .18s, box-shadow .18s, border-color .18s;
}
.herr::before { content:''; position:absolute; left:0; right:0; top:0; height:4px; background:var(--verde); transform:scaleX(0); transform-origin:left; transition:transform .25s; }
.herr:hover { transform:translateY(-3px); box-shadow:0 10px 26px rgba(40,35,20,.14); border-color:var(--verde-suave); }
.herr:hover::before { transform:scaleX(1); }
.herr-icono { width:50px; height:50px; border-radius:12px; display:grid; place-items:center; background:var(--negro); color:var(--amarillo); margin-bottom:4px; transition:background .18s, color .18s; }
.herr:hover .herr-icono { background:var(--verde); color:var(--negro); }
.herr h3 { margin:0; }
.herr p { margin:0; font-size:.93rem; color:var(--texto-suave); flex:1; }
.herr .abrir { font-family:var(--f-marca); font-size:.95rem; font-weight:700; color:var(--verde-texto); letter-spacing:2px; text-transform:uppercase; margin-top:6px; }
.herr:hover .abrir { color:var(--negro); }
.vacio { color:var(--texto-suave); }

/* Formularios */
label { display:block; font-family:var(--f-marca); font-size:.88rem; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--negro-suave); margin:14px 0 4px; }
input[type=text], input[type=password], input[type=email], select, input[type=file] {
  width:100%; padding:10px 12px; border:1.5px solid var(--gris-suave); border-radius:9px;
  background:var(--crema); color:var(--texto); font:inherit; font-size:.95rem;
}
input:focus, select:focus { outline:none; border-color:var(--verde); box-shadow:0 0 0 3px rgba(31,166,74,.18); background:#fff; }
.checks { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:4px; }
.checks label { display:flex; gap:6px; align-items:center; text-transform:none; letter-spacing:0; font-family:var(--f-texto); font-size:.93rem; color:var(--texto); font-weight:400; margin:0; }
input[type=checkbox] { accent-color:var(--verde-texto); }
.ayuda { font-size:.83rem; color:var(--texto-suave); margin-top:4px; }

.boton, button {
  display:inline-block; border:none; border-radius:9px; padding:10px 20px; cursor:pointer;
  background:var(--negro); color:var(--amarillo);
  font-family:var(--f-marca); font-weight:700; font-size:1rem; letter-spacing:1.5px; text-transform:uppercase; text-decoration:none;
  transition:background .15s, color .15s;
}
.boton:hover, button:hover { background:var(--verde); color:var(--negro); }
.boton.ancho, button.ancho { width:100%; margin-top:22px; padding:12px; font-size:1.05rem; }
.boton.sec, button.sec { background:#fffdf8; color:var(--negro); border:1.5px solid var(--negro-suave); }
.boton.sec:hover, button.sec:hover { background:var(--amarillo); }
.boton.peligro, button.peligro { background:var(--rojo-fondo); color:var(--rojo); border:1.5px solid #efc3bf; }
.boton.peligro:hover, button.peligro:hover { background:var(--rojo); color:#fff; }
.boton.chico, button.chico { padding:5px 11px; font-size:.85rem; letter-spacing:1px; }

.msg { padding:10px 14px; border-radius:8px; font-size:.92rem; margin:0 0 16px; }
.msg-ok { background:var(--verde-fondo); color:var(--verde-oscuro); border:1px solid var(--verde-suave); }
.msg-err { background:var(--rojo-fondo); color:var(--rojo); border:1px solid #efc3bf; }
.msg-info { background:var(--amarillo-fondo); color:var(--amarillo-texto); border:1px solid #f0dc6a; }
.clave-mostrar { font-family:ui-monospace,Consolas,monospace; font-size:1.15rem; background:#fff; padding:2px 8px; border-radius:6px; border:1px dashed var(--verde); user-select:all; }

/* Tablas */
.tabla-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table { border-collapse:collapse; width:100%; font-size:.9rem; }
th { text-align:left; font-family:var(--f-marca); font-size:.85rem; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--negro-suave); padding:8px 10px; border-bottom:2px solid var(--verde); white-space:nowrap; }
td { padding:9px 10px; border-bottom:1px solid var(--crema-oscuro); vertical-align:top; }
tr.inactivo td { color:#9a8f80; }
.etiqueta { display:inline-block; font-size:.72rem; font-weight:600; padding:2px 8px; border-radius:20px; background:var(--verde-fondo); color:var(--verde-oscuro); margin:1px 2px 1px 0; white-space:nowrap; }
.etiqueta.gris { background:var(--crema-oscuro); color:var(--texto-suave); }
.etiqueta.tierra { background:var(--amarillo-fondo); color:var(--amarillo-texto); }
.acciones { display:flex; flex-wrap:wrap; gap:6px; }
.acciones form { margin:0; }
.fila2 { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
@media (max-width:600px) {
  .fila2 { grid-template-columns:1fr; }
  .cabecera { height:150px; }
  .paisaje { min-height:80px; }
  .cielo-sol { right:6%; width:200px; }
  .cabecera-capa { padding-bottom:34px; }
  .marca-nombre { font-size:2rem; }
  .marca-sub { font-size:.92rem; }
  h1 { font-size:1.7rem; }
  .tarjeta { padding:18px; }
}