/* ============================================================
   BLOG CSS - CONEXIÓN AMÉRICA
   Estilos específicos del blog usando el sistema de diseño
   corporativo definido en variables.css
   ============================================================ */

/* ── Barra de acciones del editor (solo visible para admin/editor) ── */
.blog-editor-bar {
  background: var(--color-primario);
  padding: var(--espacio-sm) 0;
  position: sticky;
  top: 70px;
  z-index: var(--z-sticky);
  box-shadow: var(--sombra-md);
}

.blog-editor-bar__contenedor {
  max-width: var(--contenedor-max);
  margin: 0 auto;
  padding: 0 var(--espacio-lg);
  display: flex;
  align-items: center;
  gap: var(--espacio-md);
  flex-wrap: wrap;
}

.blog-editor-bar__info {
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-sm);
  color: rgba(255,255,255,0.75);
  flex: 1;
}

.blog-editor-bar__info strong {
  color: var(--color-acento);
  font-weight: var(--peso-semibold);
}

/* ── Hero del blog ──────────────────────────────────────────── */
.blog-hero {
  background: linear-gradient(135deg, var(--color-primario) 0%, var(--color-primario-oscuro) 100%);
  padding: var(--espacio-4xl) 0 var(--espacio-3xl);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.blog-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2300A651' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

.blog-hero__contenedor {
  max-width: var(--contenedor-max);
  margin: 0 auto;
  padding: 0 var(--espacio-lg);
  position: relative;
}

.blog-hero__badge {
  display: inline-block;
  background: var(--color-secundario);
  color: var(--color-blanco);
  font-family: var(--fuente-titulos);
  font-size: var(--texto-xs);
  font-weight: var(--peso-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: var(--espacio-xxs) var(--espacio-md);
  border-radius: var(--radio-full);
  margin-bottom: var(--espacio-lg);
}

.blog-hero__titulo {
  font-family: var(--fuente-titulos);
  font-size: var(--texto-3xl);
  font-weight: var(--peso-extrabold);
  color: var(--color-blanco);
  margin-bottom: var(--espacio-md);
  line-height: var(--linea-compacta);
}

.blog-hero__titulo span {
  color: var(--color-acento);
}

.blog-hero__subtitulo {
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-lg);
  color: rgba(255,255,255,0.8);
  max-width: 600px;
  margin: 0 auto;
  line-height: var(--linea-relajada);
}

/* ── Sección principal del listado ─────────────────────────── */
.blog-listado {
  padding: var(--espacio-3xl) 0;
  background: var(--color-gris-fondo);
}

.blog-listado__contenedor {
  max-width: var(--contenedor-max);
  margin: 0 auto;
  padding: 0 var(--espacio-lg);
}

/* ── Grid de tarjetas ──────────────────────────────────────── */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--espacio-xl);
  margin-top: var(--espacio-xl);
}

/* ── Tarjeta de artículo ───────────────────────────────────── */
.blog-tarjeta {
  background: var(--color-blanco);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--transicion-normal), box-shadow var(--transicion-normal);
  position: relative;
}

.blog-tarjeta:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-lg);
}

.blog-tarjeta__imagen-wrap {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-primario-oscuro);
}

.blog-tarjeta__imagen {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transicion-lenta);
}

.blog-tarjeta:hover .blog-tarjeta__imagen {
  transform: scale(1.05);
}

.blog-tarjeta__imagen-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-primario) 0%, var(--color-primario-claro) 100%);
  color: rgba(255,255,255,0.3);
}

.blog-tarjeta__cuerpo {
  padding: var(--espacio-lg);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--espacio-sm);
}

.blog-tarjeta__meta {
  display: flex;
  align-items: center;
  gap: var(--espacio-sm);
  flex-wrap: wrap;
}

.blog-tarjeta__categoria {
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-xs);
  font-weight: var(--peso-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-secundario);
  background: rgba(0, 166, 81, 0.08);
  padding: 2px var(--espacio-xs);
  border-radius: var(--radio-sm);
}

.blog-tarjeta__fecha {
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-xs);
  color: var(--color-gris-medio);
}

.blog-tarjeta__titulo {
  font-family: var(--fuente-titulos);
  font-size: var(--texto-lg);
  font-weight: var(--peso-bold);
  color: var(--color-primario);
  line-height: var(--linea-compacta);
  margin: 0;
}

.blog-tarjeta__titulo a {
  color: inherit;
  text-decoration: none;
}

.blog-tarjeta__titulo a:hover {
  color: var(--color-secundario);
}

.blog-tarjeta__resumen {
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-base);
  color: var(--color-gris-oscuro);
  line-height: var(--linea-relajada);
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-tarjeta__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-sm);
  padding-top: var(--espacio-sm);
  border-top: 1px solid var(--color-gris-claro);
  flex-wrap: wrap;
}

.blog-tarjeta__autor {
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-sm);
  color: var(--color-gris-medio);
}

.blog-tarjeta__acciones-editor {
  display: flex;
  gap: var(--espacio-xs);
}

/* Badge de estado (borrador/archivado) */
.blog-tarjeta__estado {
  position: absolute;
  top: var(--espacio-sm);
  left: var(--espacio-sm);
  font-size: var(--texto-xs);
  font-weight: var(--peso-bold);
  text-transform: uppercase;
  padding: 3px var(--espacio-xs);
  border-radius: var(--radio-sm);
}

.blog-tarjeta__estado--borrador {
  background: var(--color-acento);
  color: var(--color-primario-oscuro);
}

.blog-tarjeta__estado--archivado {
  background: var(--color-gris-claro);
  color: var(--color-gris-oscuro);
}

/* ── Estado vacío ──────────────────────────────────────────── */
.blog-vacio {
  text-align: center;
  padding: var(--espacio-4xl) var(--espacio-lg);
  color: var(--color-gris-medio);
}

.blog-vacio__icono {
  font-size: 4rem;
  margin-bottom: var(--espacio-lg);
  opacity: 0.4;
}

.blog-vacio__titulo {
  font-family: var(--fuente-titulos);
  font-size: var(--texto-xl);
  color: var(--color-primario);
  margin-bottom: var(--espacio-sm);
}

.blog-vacio__texto {
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-base);
  color: var(--color-gris-medio);
  max-width: 400px;
  margin: 0 auto var(--espacio-xl);
}

/* ── Artículo individual ───────────────────────────────────── */
.articulo {
  padding: var(--espacio-3xl) 0 var(--espacio-4xl);
  background: var(--color-blanco);
}

.articulo__contenedor {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 var(--espacio-lg);
}

.articulo__breadcrumb {
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-sm);
  color: var(--color-gris-medio);
  margin-bottom: var(--espacio-xl);
  display: flex;
  align-items: center;
  gap: var(--espacio-xs);
}

.articulo__breadcrumb a {
  color: var(--color-primario);
  text-decoration: none;
}

.articulo__breadcrumb a:hover { text-decoration: underline; }

.articulo__meta {
  display: flex;
  align-items: center;
  gap: var(--espacio-sm);
  flex-wrap: wrap;
  margin-bottom: var(--espacio-lg);
}

.articulo__categoria {
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-sm);
  font-weight: var(--peso-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-secundario);
}

.articulo__fecha {
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-sm);
  color: var(--color-gris-medio);
}

.articulo__titulo {
  font-family: var(--fuente-titulos);
  font-size: var(--texto-3xl);
  font-weight: var(--peso-extrabold);
  color: var(--color-primario);
  line-height: var(--linea-compacta);
  margin-bottom: var(--espacio-md);
}

.articulo__autor {
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-sm);
  color: var(--color-gris-oscuro);
  margin-bottom: var(--espacio-xl);
}

.articulo__autor strong { color: var(--color-primario); }

.articulo__imagen {
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  border-radius: var(--radio-lg);
  margin-bottom: var(--espacio-2xl);
  box-shadow: var(--sombra-lg);
}

.articulo__acciones-editor {
  display: flex;
  gap: var(--espacio-sm);
  margin-bottom: var(--espacio-xl);
  padding: var(--espacio-md);
  background: rgba(0, 51, 102, 0.04);
  border-left: 3px solid var(--color-primario);
  border-radius: 0 var(--radio-md) var(--radio-md) 0;
  flex-wrap: wrap;
}

/* ── Contenido del artículo (rich text) ────────────────────── */
.articulo__cuerpo {
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-lg);
  line-height: var(--linea-relajada);
  color: var(--color-negro-suave);
}

.articulo__cuerpo h2 {
  font-family: var(--fuente-titulos);
  font-size: var(--texto-2xl);
  font-weight: var(--peso-bold);
  color: var(--color-primario);
  margin: var(--espacio-2xl) 0 var(--espacio-md);
}

.articulo__cuerpo h3 {
  font-family: var(--fuente-titulos);
  font-size: var(--texto-xl);
  font-weight: var(--peso-bold);
  color: var(--color-primario-claro);
  margin: var(--espacio-xl) 0 var(--espacio-sm);
}

.articulo__cuerpo p { margin-bottom: var(--espacio-lg); }

.articulo__cuerpo ul,
.articulo__cuerpo ol {
  margin: 0 0 var(--espacio-lg) var(--espacio-xl);
}

.articulo__cuerpo li { margin-bottom: var(--espacio-xs); }

.articulo__cuerpo a {
  color: var(--color-secundario);
  text-decoration: underline;
}

.articulo__cuerpo blockquote {
  border-left: 4px solid var(--color-acento);
  background: rgba(255, 215, 0, 0.06);
  padding: var(--espacio-md) var(--espacio-lg);
  margin: var(--espacio-xl) 0;
  border-radius: 0 var(--radio-md) var(--radio-md) 0;
  font-style: italic;
  color: var(--color-gris-oscuro);
}

.articulo__cuerpo img {
  max-width: 100%;
  border-radius: var(--radio-md);
  margin: var(--espacio-lg) 0;
}

.articulo__cuerpo code {
  background: var(--color-gris-fondo);
  padding: 2px 6px;
  border-radius: var(--radio-sm);
  font-size: 0.9em;
}

/* ── Panel editor / formulario ─────────────────────────────── */
.editor-panel {
  padding: calc(80px + var(--espacio-2x1)) 0 var(--espacio-3xl);
  background: var(--color-gris-fondo);
  min-height: 100vh;
}

.editor-panel__contenedor {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--espacio-lg);
}

.editor-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--espacio-2xl);
  flex-wrap: wrap;
  gap: var(--espacio-md);
}

.editor-panel__titulo {
  font-family: var(--fuente-titulos);
  font-size: var(--texto-2xl);
  font-weight: var(--peso-extrabold);
  color: var(--color-primario);
}

.editor-form {
  background: var(--color-blanco);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-md);
  padding: var(--espacio-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--espacio-xl);
}

.editor-form__grupo {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-xs);
}

.editor-form__fila {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--espacio-lg);
}

.editor-form__label {
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-sm);
  font-weight: var(--peso-semibold);
  color: var(--color-primario);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.editor-form__label span {
  color: var(--color-alerta);
}

.editor-form__input,
.editor-form__select,
.editor-form__textarea {
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-base);
  color: var(--color-negro);
  background: var(--color-blanco);
  border: 1.5px solid var(--color-gris-claro);
  border-radius: var(--radio-md);
  padding: var(--espacio-sm) var(--espacio-md);
  transition: border-color var(--transicion-rapida), box-shadow var(--transicion-rapida);
  width: 100%;
}

.editor-form__input:focus,
.editor-form__select:focus,
.editor-form__textarea:focus {
  outline: none;
  border-color: var(--color-primario);
  box-shadow: 0 0 0 3px rgba(0, 51, 102, 0.1);
}

.editor-form__textarea {
  resize: vertical;
  min-height: 120px;
}

.editor-form__textarea--grande {
  min-height: 400px;
  font-family: 'Courier New', monospace;
  font-size: var(--texto-sm);
}

.editor-form__hint {
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-xs);
  color: var(--color-gris-medio);
}

/* Upload de imagen */
.editor-imagen-tabs {
  display: flex;
  gap: var(--espacio-xs);
  margin-bottom: var(--espacio-md);
}

.editor-imagen-tab {
  padding: var(--espacio-xs) var(--espacio-md);
  border: 1.5px solid var(--color-gris-claro);
  border-radius: var(--radio-md);
  background: transparent;
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  color: var(--color-gris-oscuro);
  cursor: pointer;
  transition: all var(--transicion-rapida);
}

.editor-imagen-tab--activo {
  background: var(--color-primario);
  border-color: var(--color-primario);
  color: var(--color-blanco);
}

.editor-imagen-panel { display: none; }
.editor-imagen-panel--activo { display: block; }

.editor-upload-zona {
  border: 2px dashed var(--color-gris-claro);
  border-radius: var(--radio-lg);
  padding: var(--espacio-2xl);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transicion-rapida), background var(--transicion-rapida);
  position: relative;
}

.editor-upload-zona:hover,
.editor-upload-zona--dragging {
  border-color: var(--color-primario);
  background: rgba(0, 51, 102, 0.03);
}

.editor-upload-zona__icono { font-size: 2.5rem; margin-bottom: var(--espacio-sm); }
.editor-upload-zona__texto { font-family: var(--fuente-cuerpo); color: var(--color-gris-oscuro); }
.editor-upload-zona__texto strong { color: var(--color-primario); }
.editor-upload-zona input[type="file"] { display: none; }

.editor-imagen-preview {
  margin-top: var(--espacio-md);
  position: relative;
  display: inline-block;
}

.editor-imagen-preview img {
  max-width: 100%;
  max-height: 200px;
  border-radius: var(--radio-md);
  box-shadow: var(--sombra-md);
}

.editor-imagen-preview__quitar {
  position: absolute;
  top: -8px;
  right: -8px;
  background: var(--color-alerta);
  color: white;
  border: none;
  border-radius: var(--radio-full);
  width: 24px;
  height: 24px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Acciones del formulario */
.editor-form__acciones {
  display: flex;
  gap: var(--espacio-md);
  justify-content: flex-end;
  flex-wrap: wrap;
  padding-top: var(--espacio-lg);
  border-top: 1px solid var(--color-gris-claro);
}

/* ── Login page ─────────────────────────────────────────────── */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-primario-oscuro) 0%, var(--color-primario) 100%);
  padding: var(--espacio-lg);
}

.login-card {
  background: var(--color-blanco);
  border-radius: var(--radio-xl);
  box-shadow: var(--sombra-elevacion);
  padding: var(--espacio-3xl);
  width: 100%;
  max-width: 420px;
}

.login-card__logo {
  display: flex;
  justify-content: center;
  margin-bottom: var(--espacio-2xl);
}

.login-card__logo img { max-height: 52px; }

.login-card__titulo {
  font-family: var(--fuente-titulos);
  font-size: var(--texto-xl);
  font-weight: var(--peso-bold);
  color: var(--color-primario);
  text-align: center;
  margin-bottom: var(--espacio-xs);
}

.login-card__subtitulo {
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-sm);
  color: var(--color-gris-oscuro);
  text-align: center;
  margin-bottom: var(--espacio-2xl);
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-lg);
}

.login-form__grupo {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-xs);
}

.login-form__label {
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-sm);
  font-weight: var(--peso-semibold);
  color: var(--color-primario);
}

.login-form__input {
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-base);
  color: var(--color-negro);
  background: var(--color-gris-fondo);
  border: 1.5px solid var(--color-gris-claro);
  border-radius: var(--radio-md);
  padding: var(--espacio-sm) var(--espacio-md);
  transition: border-color var(--transicion-rapida), box-shadow var(--transicion-rapida);
  width: 100%;
}

.login-form__input:focus {
  outline: none;
  border-color: var(--color-primario);
  background: var(--color-blanco);
  box-shadow: 0 0 0 3px rgba(0, 51, 102, 0.1);
}

.login-form__error {
  background: rgba(230, 57, 70, 0.08);
  border: 1px solid var(--color-alerta);
  color: var(--color-alerta-oscuro);
  border-radius: var(--radio-md);
  padding: var(--espacio-sm) var(--espacio-md);
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-sm);
  display: none;
}

.login-form__error--visible { display: block; }

.login-card__pie {
  text-align: center;
  margin-top: var(--espacio-lg);
}

.login-card__pie a {
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-sm);
  color: var(--color-primario);
  text-decoration: none;
}

.login-card__pie a:hover { text-decoration: underline; }

/* ── Botones específicos del blog ───────────────────────────── */
.boton--editor {
  background: var(--color-acento);
  color: var(--color-primario-oscuro);
  font-weight: var(--peso-bold);
}

.boton--editor:hover {
  background: var(--color-acento-oscuro);
}

.boton--peligro {
  background: transparent;
  color: var(--color-alerta);
  border: 1.5px solid var(--color-alerta);
}

.boton--peligro:hover {
  background: var(--color-alerta);
  color: var(--color-blanco);
}

.boton--blanco {
  background: var(--color-blanco);
  color: var(--color-primario);
  font-weight: var(--peso-semibold);
}

.boton--blanco:hover {
  background: var(--color-gris-fondo);
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .blog-hero__titulo { font-size: var(--texto-2xl); }
  .blog-grid { grid-template-columns: 1fr; }
  .editor-form__fila { grid-template-columns: 1fr; }
  .articulo__titulo { font-size: var(--texto-2xl); }
  .editor-form { padding: var(--espacio-lg); }
  .login-card { padding: var(--espacio-xl); }
}

@media (max-width: 480px) {
  .blog-editor-bar__contenedor { flex-direction: column; align-items: flex-start; }
  .editor-form__acciones { flex-direction: column; }
  .editor-form__acciones .boton { width: 100%; justify-content: center; }
}