/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */

html, body {
  margin: 0;
  border: 0;
  padding: 0;
  background: white;
  color: black;
}

 html {
   font-size: 16px;
 }

 body {
  font-family: sans-serif;
  padding: 1.2rem;
  line-height: 1.35;
}


a {
  color: #68b04d;
  font-weight: bold;
  text-decoration: underline;
}

a:hover {
  color: black;
}
body, input, textarea, label, select {
  font-size: 1rem;
}

input[type="tel"] {
  font-size: 0.9rem;  /* Slightly smaller to compensate for monospace */
  width: 19ch;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="date"],
input[type="datetime-local"],
input[type="tel"],
input[type="number"],
textarea,
select {
  padding:  0.5rem;
  margin:  0.6rem 0 0.1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  transition: border-color 0.3s;
}

input[type="number"] {
  padding: 0.3rem 0 0.3rem 0.3rem;
}

input[type="text"]:not([size]),
input[type="email"]:not([size]),
input[type="url"]:not([size]),
input[type="password"]:not([size]),
input[type="search"]:not([size]),
textarea {
  width: 100%;
  box-sizing: border-box;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="tel"]:focus,
textarea:focus {
  border-color: #25710e;
  outline: none;
}

.char-counter {
  color: #666;
  text-align: right;
  margin-top: 4px;
}

.char-counter.warn {
  color: #c00;
}

/* App button styling is opt-in via .btn (plus the always-styled submit inputs,
   .link-button, and tab-bar links) so a bare <button> renders unstyled and
   doesn't have to fight/reset this rule. */
nav.tab-bar a, .btn, input[type="submit"], .link-button {
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
  background-color: #68b04d;
  min-width: 8rem;
  color: black;
  font-weight: 600;
  border: none;
  border-radius: 4px;
  font-size: 1.1rem;
  padding: .8rem 1.2rem;
  cursor: pointer;
  transition: background-color 0.3s;
}

.btn:has(svg) {
  min-width: auto !important;
}

input[type="submit"], .link-button {
  background: #005300;
  font-weight: 700;
  color: white;
}

.btn:disabled, input[type="submit"]:disabled {
  background-color: #cccccc;
  color: #666666;
  cursor: not-allowed;
}

.btn:not(:disabled):hover {
  background-color: #85bf6d;
}

form .btn:not(:disabled):hover {
  border: 1px solid #48902f;
}

input[type="submit"]:not(:disabled):hover, .link-button:hover {
  background-color: #002a00;
  color: white;
}


input[type="radio"] {
  margin: 5px;
  cursor: pointer;
}

label small {
  color: #939393;
  font-size: 0.9em;
}

input[type="tel"] {
  font-family: 'Roboto Mono', 'Consolas', 'Menlo', monospace;
}

[data-controller="pena"] input[type="number"] {
  width: 4em;
}

[data-controller="pena"] input[type="number"]:not(:placeholder-shown) {
  text-align: right;
}

label:has(input[type="radio"]),
label:has(input[type="checkbox"]) {
  display: inline-flex;
  align-items: flex-start;
}

input[type="radio"],
input[type="checkbox"] {
  margin-top: 0.25em;
  margin-right: 0.5em;
}

label:has(input[type="radio"]):not(:last-of-type) {
  margin-right: 1.5rem;
}

input:disabled {
  opacity: 0.35;
}

legend {
    display: table;
    float: left;
    padding: 0;
    margin-bottom: 0.5em;
    width: 100%;
}

legend + * {
  clear: both;
}

fieldset {
  border: none;
}

.field-container {
   background-color: #f5f5f5;
   margin: 1rem 0;
   padding: 0.7rem;
   border-radius: 8px;
   border: 1px solid #e0e0e0;
}


.field-container.error {
  background-color: #fff0f0;
  border-color: #ffcdd2;
}

.field-container.error input,
.field-container.error textarea,
.field-container.error select {
   border-color: #ef5350;
}

.field-container.error .error-message {
   color: #d32f2f;
   font-size: 0.9em;
}




.debug {
  border: 3px dashed #ff6b6b;
  background-color: #f9f9f9;
  border-radius: 4px;
  font-family: monospace;
  font-size: 1.2rem;
  color: #333;
  overflow-x: auto;
  width: 400px;
  text-align: center;
  position: absolute;
  top: 1rem;
  right: 1rem;
  max-height: 1.5rem;
  padding: 0 1rem;
  display: flex;
  flex-direction: column;
  opacity: 0.3;
  transition: max-height 70ms ease-out, padding 50ms ease-out, opacity 150ms ease-out;
}

.debug.letter {
  position: unset;
  max-height: unset;
  border: unset;
}

.debug.letter:hover {
  padding: 0 1rem;
}

.debug:hover {
  opacity: 1;
  padding: 3px 1rem;
  max-height: 1000px;
  transition: max-height 70ms ease-out, padding 50ms ease-in, opacity 150ms ease-in;
}

.debug a {
  background-color: #ff6b6b;
  color: white;
  padding: .5rem .9rem;
  border-radius: 3px;
  text-decoration: none;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 0.5rem;
}

.debug a:hover {
  background-color: #ff4757;
}



.auth h1 {
  font-size: 1.5rem;
  font-weight: 500;
  margin: 1rem 0 0.3rem;
  color: #333;
}

h2 {
  font-size: 1.5rem;
  font-weight: 500;
  margin: 2.4rem 0 0.5rem;
  color: #333;
}