/* /funcionalidades/envios-confidenciales/ — a confidential send being
   written. What pantallas-demo.css does not already draw: the page's narrow
   centered column, the form and its "Obligatorio" marks, the unfolded
   privacy options, the explanation beside the form and the history rows. */

.pn-frame[data-screen="confidential-sends"] .cf-page {
  display: flex;
  flex-direction: column;
  gap: 19px;
  width: 100%;
  max-width: 819px;
  margin: 0 auto;
}

.pn-frame[data-screen="confidential-sends"] .cf-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(192px, 0.55fr);
  align-items: start;
  gap: 19px;
}

.pn-frame[data-screen="confidential-sends"] .cf-card .pn-card-head { align-items: center; }
.pn-frame[data-screen="confidential-sends"] .cf-card .pn-card-head .md-btn { flex-shrink: 0; }

.pn-frame[data-screen="confidential-sends"] .cf-form {
  gap: 16px;
  padding: 16px 19px 19px;
}

/* ---------- fields ---------- */

.pn-frame[data-screen="confidential-sends"] .cf-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.pn-frame[data-screen="confidential-sends"] .cf-label {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--ac-ink);
  font-size: 11px;
  font-weight: 550;
}

.pn-frame[data-screen="confidential-sends"] .cf-required {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 5px;
  border-radius: 5px;
  background: rgb(70 117 87 / 10%);
  box-shadow: inset 0 0 0 1px rgb(70 117 87 / 20%);
  color: var(--ac-accent);
  font-size: 8.8px;
  font-weight: 650;
  line-height: 1;
}

.pn-frame[data-screen="confidential-sends"] .cf-required u {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
}

.pn-frame[data-screen="confidential-sends"] .cf-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--ac-line);
  border-radius: 8px;
  background: #fff;
  color: var(--ac-ink);
  font-size: 11px;
}

/* A required control inside a form carries the accent in its border. */
.pn-frame[data-screen="confidential-sends"] .cf-input.is-required { border-color: rgb(70 117 87 / 45%); }

.pn-frame[data-screen="confidential-sends"] .cf-input em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pn-frame[data-screen="confidential-sends"] .cf-input svg { flex-shrink: 0; color: var(--ac-dim); }

/* Seven rows tall, as the page asks for. */
.pn-frame[data-screen="confidential-sends"] .cf-input.is-area {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1px;
  height: 124px;
  padding-top: 7px;
  padding-bottom: 7px;
  line-height: 1.5;
}

.pn-frame[data-screen="confidential-sends"] .cf-hint,
.pn-frame[data-screen="confidential-sends"] .cf-note {
  color: var(--ac-mut);
  font-size: 11px;
  line-height: 1.45;
}

.pn-frame[data-screen="confidential-sends"] .cf-hint { font-size: 9.5px; }

/* ---------- the unfolded options ---------- */

.pn-frame[data-screen="confidential-sends"] .cf-details {
  padding-top: 13px;
  border-top: 1px solid var(--ac-line);
}

.pn-frame[data-screen="confidential-sends"] .cf-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ac-ink);
  font-size: 11px;
  font-weight: 550;
}

/* The disclosure triangle a <details> draws: down when open, right when not. */
.pn-frame[data-screen="confidential-sends"] .cf-marker {
  width: 0;
  height: 0;
  border-top: 5px solid currentColor;
  border-right: 3.5px solid transparent;
  border-left: 3.5px solid transparent;
}

.pn-frame[data-screen="confidential-sends"] .cf-marker.is-closed {
  border-top: 3.5px solid transparent;
  border-right: 0;
  border-bottom: 3.5px solid transparent;
  border-left: 5px solid currentColor;
}

.pn-frame[data-screen="confidential-sends"] .cf-options {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-top: 13px;
}

.pn-frame[data-screen="confidential-sends"] .cf-send { display: flex; }

/* ---------- beside the form ---------- */

.pn-frame[data-screen="confidential-sends"] .cf-aside {
  display: flex;
  flex-direction: column;
  gap: 13px;
  font-size: 11px;
  line-height: 1.6;
}

.pn-frame[data-screen="confidential-sends"] .cf-aside-title {
  color: var(--ac-ink);
  font-weight: 650;
}

.pn-frame[data-screen="confidential-sends"] .cf-aside-text { color: var(--ac-mut); }

.pn-frame[data-screen="confidential-sends"] .cf-summary.is-aside {
  padding-top: 13px;
  border-top: 1px solid var(--ac-line);
}

/* ---------- the history ---------- */

.pn-frame[data-screen="confidential-sends"] .cf-sm {
  padding: 5px 10px;
  font-size: 10px;
}

.pn-frame[data-screen="confidential-sends"] .cf-sm svg { width: 12px; height: 12px; }

.pn-frame[data-screen="confidential-sends"] .cf-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pn-frame[data-screen="confidential-sends"] .cf-send-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 0;
}

.pn-frame[data-screen="confidential-sends"] .cf-send-row:first-child { padding-top: 0; }
.pn-frame[data-screen="confidential-sends"] .cf-send-row:last-child { padding-bottom: 0; }
.pn-frame[data-screen="confidential-sends"] .cf-send-row + .cf-send-row { border-top: 1px solid var(--ac-line); }

.pn-frame[data-screen="confidential-sends"] .cf-send-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.pn-frame[data-screen="confidential-sends"] .cf-send-text b {
  color: var(--ac-ink);
  font-size: 11px;
  font-weight: 550;
}

.pn-frame[data-screen="confidential-sends"] .cf-send-text em {
  color: var(--ac-mut);
  font-size: 9.5px;
}