/* VARIABLES DE COLOR — mismas que assets/styles.css del marketplace */
:root {
  --ca-verde: #23ce7c;
  --ca-azul: #133d7a;
  --ca-blanco: #ffffff;
  --ca-borde: #e2e8f0;
}

.ca-form {
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ca-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ca-azul);
}

.ca-form input[type="text"],
.ca-form input[type="email"],
.ca-form input[type="password"],
.ca-form select,
.ca-form textarea {
  padding: 10px 14px;
  border-radius: 6px;
  border: 1px solid var(--ca-borde);
  font-size: 14px;
  font-weight: normal;
  color: #333;
}

.ca-form input[type="file"] {
  font-size: 13px;
  font-weight: normal;
}

/* NOTICES */
.ca-notice {
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 20px;
  font-size: 14px;
}

.ca-notice-ok {
  background: #e6f9ef;
  border: 1px solid var(--ca-verde);
  color: #0d7a45;
}

.ca-notice-error {
  background: #fdecec;
  border: 1px solid #e0554f;
  color: #a5322c;
}

/* TABS LOGIN / REGISTRO — toggle en CSS puro con :checked, sin JS */
.ca-tabs {
  border: 1px solid var(--ca-borde);
  border-radius: 8px;
  padding: 16px;
}

.ca-tabs input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ca-tabs label[for^="ca-modo-"] {
  display: inline-block;
  padding: 8px 16px;
  margin-right: 8px;
  border-radius: 6px;
  background: #f2f4f7;
  color: #555;
  cursor: pointer;
  font-size: 14px;
}

.ca-tabs input#ca-modo-login:checked ~ label[for="ca-modo-login"],
.ca-tabs input#ca-modo-registro:checked ~ label[for="ca-modo-registro"] {
  background: var(--ca-verde);
  color: var(--ca-blanco);
}

.ca-panel {
  display: none;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.ca-tabs input#ca-modo-login:checked ~ .ca-panel-login,
.ca-tabs input#ca-modo-registro:checked ~ .ca-panel-registro {
  display: flex;
}

.ca-logged-as {
  background: #f2f4f7;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 14px;
  color: var(--ca-azul);
}

/* BOTÓN ENVIAR */
.ca-submit {
  align-self: flex-start;
  padding: 12px 25px;
  background: var(--ca-verde);
  color: var(--ca-blanco);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  transition: 0.3s;
}

.ca-submit:hover {
  background: var(--ca-azul);
}