/* The company portal (portal/templates/portal). The stripe at the top takes the company's
   main color on its pages; buttons keep our own dark color, which reads with white letters
   whatever the brand. */

:root {
  --marca: #2e445a;
  --accion: #2e445a;
  --texto: #1f2933;
  --tenue: #5b6875;
  --fondo: #f4f6f8;
  --caja: #ffffff;
  --borde: #d5dbe1;
  --error: #b42318;
  --error-fondo: #fef3f2;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--texto);
  background: var(--fondo);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  border-top: 4px solid var(--marca);
  line-height: 1.5;
}

a { color: var(--accion); }

.barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.75rem 1rem;
  background: var(--caja);
  border-bottom: 1px solid var(--borde);
}
.producto { font-weight: 600; }
.cuenta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.cuenta form { margin: 0; }
.correo { color: var(--tenue); font-size: 0.875rem; overflow-wrap: anywhere; }

.contenido { padding: 2rem 1rem; }
.caja {
  max-width: 28rem;
  margin: 0 auto;
  padding: 1.5rem;
  background: var(--caja);
  border: 1px solid var(--borde);
  border-radius: 0.75rem;
}
h1 { font-size: 1.375rem; line-height: 1.25; margin: 0 0 1rem; }

.campo { margin: 0 0 1rem; }
.campo label { display: block; font-weight: 600; margin-bottom: 0.375rem; }
.campo input:not([type="checkbox"], [type="file"]),
.campo textarea,
.campo select {
  width: 100%;
  padding: 0.625rem 0.75rem;
  font: inherit;
  color: inherit;
  background: var(--caja);
  border: 1px solid var(--borde);
  border-radius: 0.5rem;
}
.campo :is(input, textarea, select):focus { outline: 2px solid var(--accion); outline-offset: 1px; }
.campo input[type="file"] { max-width: 100%; font: inherit; }
.con-error :is(input, textarea, select):not([type="checkbox"], [type="file"]) { border-color: var(--error); }

.boton {
  display: inline-block;
  padding: 0.625rem 1.25rem;
  font: inherit;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  background: var(--accion);
  border: 0;
  border-radius: 0.5rem;
  cursor: pointer;
}
.boton.secundario {
  padding: 0.375rem 0.875rem;
  font-weight: 500;
  color: var(--texto);
  background: transparent;
  border: 1px solid var(--borde);
}

.nota { margin: 1.25rem 0 0; color: var(--tenue); font-size: 0.9375rem; }
.aviso { margin: 0 0 1rem; padding: 0.75rem 1rem; color: var(--error); background: var(--error-fondo); border-radius: 0.5rem; }
.aviso p { margin: 0; }
.errorlist { list-style: none; margin: 0.375rem 0 0; padding: 0; color: var(--error); font-size: 0.9375rem; }
.ayuda ul { margin: 0.375rem 0 0; padding-left: 1.25rem; color: var(--tenue); font-size: 0.875rem; }

.empresas { display: grid; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.empresas a {
  display: block;
  padding: 0.875rem 1rem;
  color: var(--texto);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--borde);
  border-radius: 0.5rem;
}
.empresas a:hover, .empresas a:focus { border-color: var(--accion); }

/* A company's pages: its cards (portal/templates/portal/empresa.html, tarjeta.html). */

.hoja { max-width: 44rem; margin: 0 auto; }
.encabezado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin: 0 0 1rem;
}
.encabezado h1 { display: flex; align-items: center; gap: 0.75rem; margin: 0; }
.migas { margin: 0 0 0.75rem; font-size: 0.9375rem; }
.tenue { color: var(--tenue); }

.tarjetas { display: grid; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.tarjeta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.75rem 1rem;
  background: var(--caja);
  border: 1px solid var(--borde);
  border-radius: 0.75rem;
}
.persona {
  display: flex;
  flex: 1 1 14rem;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  color: var(--texto);
  font-weight: 600;
  text-decoration: none;
}
.persona:hover .nombre, .persona:focus .nombre { text-decoration: underline; }
.nombre { overflow-wrap: anywhere; }
.retrato {
  flex: none;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  object-fit: cover;
}
.iniciales {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tenue);
  font-size: 1rem;
  font-weight: 700;
  background: var(--fondo);
  border: 1px solid var(--borde);
}
.estado {
  padding: 0.125rem 0.625rem;
  font-size: 0.875rem;
  color: #1e6b3a;
  background: #e7f6ec;
  border-radius: 999px;
}
.apagada .estado { color: var(--tenue); background: #eceff2; }
.apagada .retrato { filter: grayscale(1); opacity: 0.6; }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.acciones form { margin: 0; }
.caja-vacia { padding: 1.5rem; text-align: center; color: var(--tenue); background: var(--caja); border: 1px dashed var(--borde); border-radius: 0.75rem; }

.ficha {
  display: grid;
  gap: 0.375rem;
  margin: 0 0 1.5rem;
  padding: 1rem;
  background: var(--caja);
  border: 1px solid var(--borde);
  border-radius: 0.75rem;
}
.ficha p { margin: 0; overflow-wrap: anywhere; }
.interruptor { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin: 0.25rem 0 0; }
.guardado { margin: 0 0 1rem; padding: 0.75rem 1rem; color: #1e6b3a; background: #e7f6ec; border-radius: 0.5rem; }
.guardado a { color: inherit; font-weight: 600; }

.hoja form[data-un-envio] {
  padding: 1.25rem;
  background: var(--caja);
  border: 1px solid var(--borde);
  border-radius: 0.75rem;
}
fieldset { margin: 0 0 1.5rem; padding: 0; border: 0; }
legend { margin: 0 0 0.75rem; padding: 0; font-size: 1.0625rem; font-weight: 700; }
.nota-campos { margin: -0.25rem 0 1rem; color: var(--tenue); font-size: 0.9375rem; }
p.ayuda { margin: 0.375rem 0 0; color: var(--tenue); font-size: 0.875rem; }
.foto-ahora { display: block; width: 8rem; height: 8rem; margin: 0 0 0.5rem; object-fit: cover; border-radius: 0.5rem; }
.quitar { display: inline-flex; align-items: center; gap: 0.375rem; margin: 0 0 0.75rem; font-weight: 400; }
.campo .quitar { display: flex; font-weight: 400; }
[aria-disabled="true"] { opacity: 0.7; cursor: progress; }

/* A company's two sections, under the bar: its cards, and its brand page
   (portal/templates/portal/base.html, marca.html). */

.secciones {
  display: flex;
  gap: 0.25rem;
  padding: 0 1rem;
  overflow-x: auto;
  background: var(--caja);
  border-bottom: 1px solid var(--borde);
}
.secciones a {
  flex: none;
  padding: 0.625rem 0.75rem 0.5rem;
  color: var(--tenue);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 3px solid transparent;
}
.secciones a:hover, .secciones a:focus { color: var(--texto); }
.secciones a[aria-current="page"] { color: var(--texto); border-bottom-color: var(--marca); }
.imagen-ahora { margin: 0 0 0.5rem; }