/* ==========================================================================
   Panel — entrar, escritorio, blog, editor y usuarios (`cid.panel`)
   --------------------------------------------------------------------------
   Con las piezas del sitio: campos en píldora y el botón rojo del formulario
   de contacto, títulos en Helvetica azul. La barra del panel va azul, como
   la banda de derechos del pie.
   ========================================================================== */
.cid-app.es-pantalla { min-height: 100vh; background: #F5F7FA; }

.cid-barra-panel { background: var(--azul); }

.cid-barra-panel-cuerpo {
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 14px 10px 0;
}

.cid-barra-panel a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  border-radius: 8px 8px 0 0;
  color: rgba(255, 255, 255, .78);
  font-size: 14px;
  font-weight: 600;
}

.cid-barra-panel a:hover { color: var(--blanco); }

.cid-barra-panel a.es-actual { background: #F5F7FA; color: var(--azul); }

.cid-barra-panel svg { width: 15px; height: 15px; fill: none; }

.cid-barra-panel-yo {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  color: rgba(255, 255, 255, .6);
  font-size: 14px;
}

.cid-panel { max-width: var(--ancho); margin: 0 auto; padding: 40px 20px 80px; }

.cid-panel-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }

.cid-panel-titulo { color: var(--azul); font-size: 30px; font-weight: 700; line-height: 1.2; }

.cid-muted { color: var(--gris); font-weight: 300; }

/* Botones del panel: el rojo es `.cid-enviar` (005-formulario). */
a.cid-enviar { display: inline-flex; align-items: center; gap: 6px; }

.cid-enviar svg { width: 16px; height: 16px; fill: none; }

.cid-boton-sec,
.cid-boton-peligro {
  height: 42px;
  padding: 8px 16px;
  border: 1px solid var(--borde);
  border-radius: 3px;
  background: var(--blanco);
  color: var(--azul);
  font-family: var(--texto);
  font-size: 15px;
  line-height: 24px;
  cursor: pointer;
}

a.cid-boton-sec { display: inline-flex; align-items: center; }

.cid-boton-sec:hover { border-color: var(--azul); }

.cid-boton-peligro { margin-left: auto; color: var(--rojo); }

.cid-boton-peligro:hover { border-color: var(--rojo); }

/* Entrar */
.cid-entrar { display: grid; place-items: center; min-height: calc(100vh - 92px); }

.cid-entrar-caja {
  display: grid;
  gap: 14px;
  width: min(420px, 100%);
  padding: 44px 40px;
  border-radius: 10px;
  background: var(--blanco);
  box-shadow: 2px 8px 23px 3px rgba(0, 0, 0, .12);
  text-align: center;
}

.cid-entrar-caja img { margin: 0 auto 10px; }

.cid-entrar-caja h2 { color: #183C51; font-size: 26px; letter-spacing: 1px; }

/* «Entrar con Google» (por Greb) y la raya que lo separa de la clave. */
.cid-entrar-caja .cid-boton-google { justify-content: center; text-decoration: none; }

.cid-entrar-o {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--gris);
  font-size: 13px;
}

.cid-entrar-o::before,
.cid-entrar-o::after { content: ""; flex: 1; border-top: 1px solid var(--borde); }

/* Escritorio */
.cid-escritorio {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 30px;
}

.cid-escritorio-tarjeta {
  display: grid;
  gap: 8px;
  padding: 26px;
  border-radius: 12px;
  background: var(--blanco);
  box-shadow: 0 6px 20px rgba(30, 50, 92, .08);
  color: var(--gris);
  font-family: var(--texto);
  font-weight: 300;
  transition: transform .3s, box-shadow .3s;
}

.cid-escritorio-tarjeta:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(30, 50, 92, .14); }

.cid-escritorio-tarjeta strong { color: var(--azul); font-family: var(--titular); font-size: 20px; font-weight: 700; }

.cid-escritorio-icono {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 6px;
  border-radius: 12px;
  background: var(--rojo);
  color: var(--blanco);
}

.cid-escritorio-icono svg { width: 24px; height: 24px; fill: none; }

/* Tablas */
.cid-tabla { width: 100%; border-collapse: collapse; background: var(--blanco); border-radius: 10px; overflow: hidden; }

.cid-tabla th { padding: 12px 16px; background: #EEF1F6; color: var(--azul); font-size: 13px; text-align: left; text-transform: uppercase; letter-spacing: .06em; }

.cid-tabla td { padding: 14px 16px; border-top: 1px solid #EEF1F6; vertical-align: middle; }

.cid-tabla td a { font-weight: 600; }

.cid-tabla-acciones { text-align: right; white-space: nowrap; }

.cid-tabla-acciones > * + * { margin-left: 8px; }

.cid-tabla tr.es-inactivo td { opacity: .5; }

.cid-tabla select.cid-campo { width: auto; }

.cid-estado {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: #eee;
  color: #555;
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
}

.cid-estado.es-publicado { background: #d9f2e4; color: #0b6b3a; }

.cid-estado.es-borrador { background: #fff1d6; color: #8a5a00; }

/* «Mi clave» en el escritorio y «Poner clave» en Usuarios. */
.cid-mi-clave { display: grid; gap: 10px; max-width: 420px; margin-top: 40px; padding: 24px; border: 1px solid var(--borde); border-radius: 12px; background: var(--blanco); }

.cid-mi-clave h2 { margin-bottom: 4px; color: var(--azul); font-size: 20px; }

.cid-poner-clave { display: inline-flex; gap: 6px; align-items: center; }

.cid-poner-clave .cid-campo { width: 170px; height: 34px; }

/* En /usuarios, el correo se cambia en la misma fila: es el que enlaza la
   cuenta con su Google. Botón chico, que no le quite sitio al nombre. */
.cid-tabla .cid-boton-correo { height: 28px; margin-top: 6px; padding: 2px 10px; font-size: 12px; }