/* Text Utilities - estilo.css
   Modern, lightweight, responsive styles for textos.php
*/

:root{
  --bg:#f7f8fa;
  --card:#ffffff;
  --muted:#6b7280;
  --accent:#2b6cb0;
  --accent-600:#235a96;
  --danger:#dc2626;
  --success:#16a34a;
  --glass: rgba(0,0,0,0.04);
  --radius:10px;
  --padding:14px;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

.textos-container{ 
  background: var(--bg);
  padding:16px;
  border-radius: var(--radius);
  box-shadow: 0 6px 16px rgba(22,28,37,0.06);
  max-width:1100px;
  margin: 14px auto;
}

.textos-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; border-radius:10px !important;  }
.textos-header h2{ margin:0; font-size:1.05rem; color:#0f172a }

.textos-tabs{ display:flex; gap:8px; flex-wrap:wrap; border-radius:10px !important; overflow:hidden }
.textos-tabs button{ background:transparent; border:1px solid transparent; padding:8px 10px; border-radius:8px; cursor:pointer; color:var(--muted); font-size:0.92rem }
.textos-tabs button.active{ background:linear-gradient(180deg,var(--card),#f8fbff); border-color:var(--glass); color:var(--accent); box-shadow:0 4px 10px rgba(43,108,176,0.08) }

/* ensure tabs are above other elements and clickable */
.textos-tabs{ position:relative; z-index:20 }
.textos-tabs button, .btn { pointer-events:auto }

.textos-main{ display:grid; grid-template-columns:1fr 420px; gap:14px }
.textos-left{ background:var(--card); padding:var(--padding); border-radius:8px }
.textos-right{ background:var(--card); padding:var(--padding); border-radius:8px; display:flex; flex-direction:column }

textarea{ width:100%; min-height:220px; resize:vertical; padding:12px; border-radius:8px; border:1px solid rgba(15,23,42,0.06); font-size:0.95rem; color:#0f172a; background:transparent }
.hidden{ display:none }
/* strongly hide option panels when hidden */
.options.hidden { display:none !important }
.option-panel.hidden { display:none !important }

.controls{ display:flex; justify-content:space-between; align-items:center; margin-top:10px }
.controls .left-controls{ display:flex; gap:8px }
.btn{ background:#fff; border:1px solid rgba(15,23,42,0.06); padding:8px 12px; border-radius:8px; cursor:pointer; color:#0b1220 }
.btn.primary{ background:var(--accent); color:#fff; border-color:var(--accent-600) }
.btn.small{ padding:6px 8px; font-size:0.85rem }

.output-header{ display:flex; justify-content:space-between; align-items:center; gap:8px }
.output{ margin-top:10px; white-space:pre-wrap; overflow:auto; border-radius:6px; padding:12px; background: linear-gradient(180deg, rgba(243,244,246,0.9), rgba(250,250,252,0.9)); border:1px solid rgba(15,23,42,0.03); color:#071132; flex:1; min-height:0 }

.options{ margin-top:12px; display:flex; flex-direction:column; gap:8px }
.option-panel{ display:flex; flex-wrap:wrap; gap:8px; align-items:center }
.option-panel label{ font-size:0.92rem; color:var(--muted); margin-right:6px }
.option-row{ display:flex; gap:8px; align-items:center }
.option-panel input[type="number"], .option-panel select{ padding:6px 8px; border-radius:6px; border:1px solid rgba(15,23,42,0.06) }

.stats{ margin-top:10px; color:var(--muted); font-size:0.92rem }

.status{ font-weight:600; color:var(--muted); font-size:0.92rem }

.toast{ position:fixed; right:20px; bottom:20px; background:#111827; color:#fff; padding:10px 12px; border-radius:8px; opacity:0; transform:translateY(6px); transition:all .22s ease; pointer-events:none }
.toast.visible{ opacity:1; transform:none }

.error{ color:var(--danger); font-weight:600 }

.diff-line{ padding:6px 8px; margin:4px 0; border-radius:6px; font-size:0.95rem }
.diff-line.common{ background:#ffffff; border:1px solid rgba(15,23,42,0.03) }
.diff-line.added{ background:rgba(34,197,94,0.08); border-left:4px solid rgba(34,197,94,0.16) }
.diff-line.removed{ background:rgba(239,68,68,0.06); border-left:4px solid rgba(239,68,68,0.16) }

/* Accessibility helpers */
.sr-only{ position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap }

@media (max-width: 980px){ .textos-main{ grid-template-columns:1fr 360px } }
@media (max-width: 780px){ .textos-main{ grid-template-columns:1fr } .textos-right{ order:2 } }

/* File bar below toolbar */
.textos-filebar{ max-width:1100px; margin:6px auto 0; padding:8px 16px; background:transparent }
.textos-filebar .file-load{ background:var(--card); padding:10px 12px; border-radius:8px; display:inline-flex; gap:8px; align-items:center; box-shadow:0 4px 10px rgba(2,6,23,0.04); border:1px solid rgba(15,23,42,0.03); position:relative; z-index:10 }
.textos-filebar input[type="file"]{ display:none }

/* Styled selects */
/* Styled select with custom arrow (keeps native-like UX) */
select{ appearance:none; -webkit-appearance:none; -moz-appearance:none; padding:8px 10px; padding-right:34px; border-radius:8px; border:1px solid rgba(15,23,42,0.08); background:#fff; color:#0f172a; cursor:pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%236b7280' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position: right 10px center }
select:focus{ outline:2px solid rgba(43,108,176,0.12) }

/* make lorem type select a bit wider */
#loremType{ min-width:200px }

/* make 'Separador' select ~50% wider for better usability */
#tolistSep{ min-width:300px }

/* Tab icons */
.tab-icon{ display:inline-block; width:1.3em; text-align:center; margin-right:8px; font-size:1.05rem; line-height:1; vertical-align:middle }
/* ensure Font Awesome icons inherit color and align nicely */
.tab-icon.fa, .tab-icon.fas, .tab-icon.far, .tab-icon.fab{ font-size:1.05rem; color:inherit }

/* ensure filebar button is above and clickable */
.textos-filebar .btn{ z-index:11 }
.textos-filebar label{ color:var(--muted); font-size:0.95rem }