DataScope26/WEB
0
1/* ── MyCompanies.css ────────────────────────────────────────────────── */2 3.my-companies {4 padding: 2rem 2.25rem 2rem 5.375rem;5 min-height: 100vh;6 background-color: var(--bg);7 font-family: var(--font-body), system-ui, sans-serif;8 color: var(--color-text);9}10 11.my-companies--empty {12 height: calc(100dvh - var(--header-h));13 min-height: 0;14 box-sizing: border-box;15 display: flex;16 flex-direction: column;17 overflow: hidden;18}19 20.my-companies__limit-alert {21 position: fixed;22 top: calc(var(--header-h) + 1rem);23 right: 1.25rem;24 z-index: 110;25 width: min(28rem, calc(100vw - 2.5rem));26 box-sizing: border-box;27 display: flex;28 align-items: center;29 padding: 0.875rem 1.75rem 0.875rem 1rem;30 border-radius: 0.5rem;31 background: var(--color-danger);32 color: var(--white);33 box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.3);34}35 36.my-companies__limit-alert .button-close {37 top: 50%;38 right: 0.5rem;39 transform: translateY(-50%);40}41 42/* ── Header ─────────────────────────────────────────────────────────── */43.my-companies__header {44 display: flex;45 justify-content: space-between;46 align-items: flex-end;47 margin-bottom: 1.75rem;48}49 50.my-companies__header-info {51 display: flex;52 flex-direction: column;53}54 55.my-companies__title {56 font-size: 2rem;57 font-weight: 700;58 color: var(--color-text);59 letter-spacing: -0.0313rem;60 margin: 0 0 0.25rem 0;61}62 63.my-companies__subtitle {64 font-size: 0.82rem;65 color: #555f6e;66 text-transform: uppercase;67 letter-spacing: 0.08em;68 margin: 0;69}70 71/* ── Grid ────────────────────────────────────────────────────────────── */72.my-companies__grid {73 display: grid;74 grid-template-columns: repeat(3, 1fr);75 gap: 1.125rem;76}77 78.my-companies__grid--empty {79 flex: 1;80 min-height: 0;81 display: flex;82 align-items: center;83 justify-content: center;84}85 86/* ── Card ────────────────────────────────────────────────────────────── */87.company-card {88 background-color: var(--surface);89 border: 0.0625rem solid var(--color-border);90 padding: 1.5rem 1.375rem 1.25rem;91 position: relative;92 overflow: hidden;93 transition: border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;94 outline: none;95 display: flex;96 flex-direction: column;97 font: inherit;98 color: inherit;99 text-align: left;100}101 102.company-card::before {103 content: '';104 position: absolute;105 top: 0;106 left: 0;107 right: 0;108 height: 0.125rem;109 background: var(--green);110 transform: scaleX(0);111 transform-origin: left;112 transition: transform 0.25s ease;113}114 115.company-card:hover,116.company-card:focus-visible {117 border-color: var(--green);118 box-shadow: 0 8px 28px rgba(0, 230, 118, 0.08);119 transform: translateY(-0.1875rem);120 box-shadow: 0 0.5rem 1.75rem rgba(0, 230, 118, 0.08);121}122 123.company-card:hover::before,124.company-card:focus-visible::before {125 transform: scaleX(1);126}127 128/* "click to enter" chevron — visible on hover */129.company-card__arrow {130 position: absolute;131 top: 1.125rem;132 right: 1.125rem;133 color: #2ee88a;134 font-size: 1rem;135 opacity: 0;136 transform: translateX(-0.25rem);137 transition: opacity 0.2s ease, transform 0.2s ease;138}139 140.company-card:hover .company-card__arrow,141.company-card:focus-visible .company-card__arrow {142 opacity: 1;143 transform: translateX(0);144}145 146/* ── Logo area ───────────────────────────────────────────────────────── */147.company-card__logo-wrap {148 width: 3.25rem;149 height: 3.25rem;150 border-radius: 0.625rem;151 background-color: var(--surface-2);152 border: 0.0625rem solid var(--color-border);153 display: flex;154 align-items: center;155 justify-content: center;156 margin-bottom: 1rem;157 overflow: hidden;158}159 160.company-card__logo {161 width: 2.25rem;162 height: 2.25rem;163 object-fit: contain;164}165 166.company-card__logo-placeholder {167 font-size: 1.3rem;168 font-weight: 700;169 color: var(--green);170 line-height: 1;171}172 173/* ── Text ────────────────────────────────────────────────────────────── */174.company-card__name {175 font-size: 1rem;176 font-weight: 600;177 color: var(--color-text);178 margin: 0 0 0.625rem 0;179 white-space: nowrap;180 overflow: hidden;181 text-overflow: ellipsis;182}183 184/* ── Plan badge ──────────────────────────────────────────────────────── */185.company-card__plan {186 display: inline-flex;187 align-items: center;188 gap: 0.375rem;189 font-size: 0.72rem;190 font-weight: 600;191 text-transform: uppercase;192 letter-spacing: 0.07em;193 padding: 0.25rem 0.625rem;194 border-radius: 0.1875rem;195 align-self: flex-start;196}197 198.company-card__plan--basic {199 color: #90a4ae;200 background-color: rgba(144, 164, 174, 0.1);201 border: 0.0625rem solid rgba(144, 164, 174, 0.2);202}203 204.company-card__plan--pro {205 color: var(--green);206 background-color: rgba(0, 230, 118, 0.08);207 border: 0.0625rem solid rgba(0, 230, 118, 0.2);208}209 210.company-card__plan--enterprise {211 color: #ffd740;212 background-color: rgba(255, 215, 64, 0.07);213 border: 0.0625rem solid rgba(255, 215, 64, 0.2);214}215 216.company-card__plan-dot {217 width: 0.375rem;218 height: 0.375rem;219 border-radius: 50%;220 background-color: currentColor;221}222 223/* ── Botonera inferior ───────────────────────────────────────────────── */224.company-card__actions {225 display: flex;226 flex-direction: column;227 gap: 0.625rem;228 width: 100%;229 margin-top: 1.25rem;230 padding-top: 0.875rem;231 border-top: 0.0625rem solid var(--color-border);232}233 234.company-card__cta {235 background: transparent;236 border: none;237 padding: 0;238 font: inherit;239 font-size: 0.75rem;240 color: #3a4455;241 cursor: pointer;242 display: flex;243 align-items: center;244 justify-content: space-between;245 width: 100%;246 transition: color 0.2s ease;247}248 249/* Hover independiente para cada botón */250.company-card__cta:hover {251 color: var(--green);252}253 254/* ── Empty state ─────────────────────────────────────────────────────── */255.my-companies__empty {256 grid-column: 1 / -1;257 text-align: center;258 padding: 4rem 0;259 color: #3a4455;260}261 262.my-companies__grid--empty .my-companies__empty {263 padding: 0;264}265 266.my-companies__empty-icon {267 font-size: 2.5rem;268 margin-bottom: 0.75rem;269}270 271.my-companies__empty-text {272 font-size: 0.9rem;273}274 275/* ── Responsive ──────────────────────────────────────────────────────── */276@media (max-width: 56.25rem) {277 .my-companies__grid {278 grid-template-columns: repeat(2, 1fr);279 }280}281 282@media (max-width: 35rem) {283 .my-companies {284 padding: 1.5rem 1.125rem;285 }286 287 .my-companies__grid {288 grid-template-columns: 1fr;289 }290 291 .my-companies__header {292 flex-direction: column;293 align-items: flex-start;294 gap: 1rem;295 }296 297 .my-companies__create-btn {298 width: 100%;299 justify-content: center;300 }301}302 303/* ── Skeleton loader ─────────────────────────────────────────────────── */304.company-card--skeleton {305 pointer-events: none;306 cursor: default;307}308 309.skeleton {310 background: linear-gradient(90deg, var(--skeleton-start) 25%, var(--skeleton-mid) 50%, var(--skeleton-end) 75%);311 background-size: 200% 100%;312 animation: shimmer 1.4s infinite;313 border-radius: 0.25rem;314}315 316.skeleton--logo {317 width: 3.25rem;318 height: 3.25rem;319 border-radius: 0.625rem;320 margin-bottom: 1rem;321}322 323.skeleton--name {324 width: 70%;325 height: 1rem;326 margin-bottom: 0.75rem;327}328 329.skeleton--badge {330 width: 5rem;331 height: 1.5rem;332}333 334@keyframes shimmer {335 0% {336 background-position: 200% 0;337 }338 339 100% {340 background-position: -200% 0;341 }342}343 344/* ── Botón de Crear Empresa ────────────────────────────────────────── */345.my-companies__create-btn {346 padding: 0.625rem 1.125rem;347 font-size: 0.85rem;348 display: inline-flex;349 align-items: center;350 gap: 0.5rem;351}352 353.my-companies__create-btn-icon {354 font-size: 1.15rem;355 font-weight: 500;356 line-height: 1;357}